在vue-cli构建的项目中使用bootstrap

发表于   |   分类于

生成项目文件

首先使用vue-cli生成一个项目，假设项目名为hello

1
vue init webpack hello

注意！本来使用eslint来检查代码格式是挺好的，但我发现使用了之后，安装jq插件会出现一堆问题，所以我们先不安装eslint，当然先安装也可以，后面也还可以设置。这里我们先添加。

添加bootstrap文件

下载bootstrap文件包，然后把css、js、fonts三个文件夹复制到项目src/assets目录下

安装jquery

1
2
3
4
cnpm install jquery --save-dev
cnpm install style-loader --save-dev  
cnpm install css-loader --save-dev  
cnpm install file-loader --save-dev

网上资料是npm install jquery --save-dev，不过我觉得npm install jquery --save比较合适。

修改webpack文件

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

1
var webpack = require('webpack')

然后在

1
2
3
entry: {
  app: './src/main.js'
}

后面添加

1
2
3
4
5
6
7
plugins: [
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "windows.jQuery": "jquery"
  })
]

在alias中多添加一条记录

1
2
3
4
5
6
7
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"
}

main.js

打开main.js文件，添加

1
2
import './assets/css/bootstrap.min.css'
import './assets/js/bootstrap.min'

保存完成后，重启服务

1
npm run dev

错误

如果报错js文件格式不匹配不能通过webpack的格式检查，我们需要修改webpack.base.conf.js文件，找到preLoaders
修改

1
2
3
4
5
6
{
  test: /\.js$/,
  loader: 'eslint',
  include: projectRoot,
  exclude: /node_modules/
}

为

1
2
3
4
5
6
{
  test: /\.js$/,
  loader: 'eslint',
  include: projectRoot,
  exclude: [/node_modules/,/js/]
}

保存完重新启动服务。

好了，最后如果还出现很多eslint格式检查错误，可以把上一步preLoads的内容全部删掉。删掉之后我们就不会使用eslint校验。

下面我用了本地Mongodb来测试。
本地nodetes1数据库中的usercollection表中有5条记录。
启动服务，查看浏览器页面
发现，bootstap样式应用成功，记录也成功显示！

参考博文