Vue-cli and webpack construction websites in windows (2) Import bootstrap styles and vue-cliwebpack

Vue-cli and webpack construction websites in windows (2) Import bootstrap styles and vue-cliwebpack

1. Install vue-cli first. If you have not installed vue-cli, you can refer to: Install vue-cli and webpack in windows (1) Environment

2. After the Vue is installed, make an example to import the bootstrap style. Copy the bootstrap navigation style and replace the welcome page of Vue, open the components component directory under the Src folder, and then open Hello. vue file

Change content

<template> <nav class="navbar navbar-default" role="navigation">  <div class="container-fluid">   <!-- Brand and toggle get grouped for better mobile display -->   <div class="navbar-header">    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">     <span class="sr-only">Toggle navigation</span>     <span class="icon-bar"></span>     <span class="icon-bar"></span>     <span class="icon-bar"></span>    </button>    <a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{ msg }}</a>   </div>   <!-- Collect the nav links, forms, and other content for toggling -->   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">    <ul class="nav navbar-nav">     <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link</a></li>     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link</a></li>     <li class="dropdown">      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>      <ul class="dropdown-menu" role="menu">       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li>       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li>       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a></li>       <li class="divider"></li>       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li>       <li class="divider"></li>       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >One more separated link</a></li>      </ul>     </li>    </ul>    <form class="navbar-form navbar-left" role="search">     <div class="form-group">      <input type="text" class="form-control" placeholder="Search">     </div>     <button type="submit" class="btn btn-default">Submit</button>    </form>    <ul class="nav navbar-nav navbar-right">     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link</a></li>     <li class="dropdown">      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>      <ul class="dropdown-menu" role="menu">       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li>       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li>       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a></li>       <li class="divider"></li>       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li>      </ul>     </li>    </ul>   </div><!-- /.navbar-collapse -->  </div><!-- /.container-fluid --> </nav></template>
At this time, the page displayed when running vue becomes:

Now the bootstrap navigation code we added can be displayed, but it is a bit ugly because we haven't loaded the bootstrap CSS file yet. Next we will import the CSS file and js file.

3. Download the Bootstrap package and copy the three folders css, js, and fonts to the src \ assets Directory of the vue project.

4. To enable vue to support jQuery, install the jquery plug-in first, run the cmd command to enter the project folder, and then run cnpm install jquery -- save-dev to install the plug-in.

Then run

cnpm install style-loader --save-dev cnpm install css-loader --save-dev cnpm install file-loader --save-dev
Install a css-supported plug-in.

5. Modify the webpack. base. conf. js file under the build folder to support external css and js files. First open the file and add it to the header:

var webpack = require('webpack')
Then

module.exports = { entry: {  app: './src/main.js' },
Add

plugins: [ new webpack.ProvidePlugin({  $: "jquery",  jQuery: "jquery",  "windows.jQuery": "jquery" })],
Set

alias: { 'vue$': 'vue/dist/vue.common.js', 'src': path.resolve(__dirname, '../src'), 'assets': path.resolve(__dirname, '../src/assets'), 'components': path.resolve(__dirname, '../src/components')}
Change

alias: { 'vue$': 'vue/dist/vue.common.js', 'src': path.resolve(__dirname, '../src'), 'assets': path.resolve(__dirname, '../src/assets'), 'components': path.resolve(__dirname, '../src/components'), jquery: "jquery/src/jquery"}
Save files
6. Modify the main. js file under the src folder, open the file, and add

import './assets/css/bootstrap.min.css'import './assets/js/bootstrap.min'
Save and restart the npm run dev service.
If an error is prompted

Bootstrap. the js File Format mismatch cannot pass the webpack format check, so we need to set the js file in the webpack configuration file to the non-check format, open the webpack under the build folder. base. conf. js file, find

{ test: /\.js$/, loader: 'eslint', include: projectRoot, exclude: /node_modules/}
Code, modified

{ test: /\.js$/, loader: 'eslint', include: projectRoot, exclude: [/node_modules/,/js/]}
Save and runnpm  run dev

The navigation effect is displayed.


The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.