详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式

<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>

这时候运行vue 显示的页面变成：

现在我们加入的bootstrap导航代码已经可以显示出来了，但是有点丑，是因为我们还没把bootstrap的CSS文件加载过来，接下来我们就是要导入CSS文件和js文件了。

3、下载Bootstrap文件包，然后把css、js、fonts三个文件夹复制到vue项目的srcassets目录下。

4、让vue支持jQuery需要先安装jquery插件，通过cmd命令进入项目文件夹，然后运行 cnpm install jquery –save-dev 安装插件

接着分别运行

cnpm install style-loader --save-dev
cnpm install css-loader --save-dev
cnpm install file-loader --save-dev

  安装支持css的插件。

5、修改build文件夹下面的webpack.base.conf.js文件，让其支持外部的css和js，首先打开文件后在头部加入：

var webpack = require('webpack')

然后在

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

后面加

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

把

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

改成

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"
}

保存文件