Mac下用vue-cli+webpack+bootstrap实现一个todo-list(一)

• 新建项目

考虑到npm较慢，这里使用cnpm

安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

全局安装vue-cli，这样以后就可以不用在每个项目下安装vue-cli了
cnpm install -g vue-cli

创建一个基于webpack的vue模版
cnpm install webpack vue-todolist
cd vue-todolist

安装依赖
cnpm intall

因为使用了bootstrap，而bootstrap中的js是依赖jquery的

安装jquery
cnpm install jquery --save-dev

• 下载bootstrap包

这里用的版本是3.3.7。
下载下来后将fonts，js，css文件夹分别放到项目目录/src/assets下。

• 配置jquery

打开config文件夹下的webpack.base.conf.js文件,在文件头中加入对webpack的引用，在整个配置对象的末尾增加plugins配置

const webpack = require('webpack')
plugins: [
   new webpack.ProvidePlugin({
     $: "jquery",
     jQuery: "jquery"
   })
 ]

• 引入bootstrap

在src/main.js文件的顶部加入如下对bootstrap主要文件的引用

import './assets/css/bootstrap.min.css'
import './assets/js/bootstrap.min'
运行npm run dev