vue2.x利用脚手架快速构建项目并引入bootstrap、jquery

要使用vue-cli脚手架搭建项目，首先需要安装node.js

Node.js官网：https://nodejs.org/en/download/

选择你对应的系统即可下载，下载完成后傻瓜式安装即可。

安装完成之后打开cmd，输入node -v 出现版本号即安装成功

接下来便可使用脚手架快速构建你的项目了：

 npm install -g vue-cli                   全局安装vue-cli

 vue init webpack test                 生成项目名为project的的项目模板，test为你的项目名称，可自定义

 确定项目名，不修改的话直接按回车键

项目描述，可为空

作者，继续回车

继续回车即可

是否安装vue-router，选择Y，然后回车

是否使用ESLint，这是语法校验的，建议不安装，选择n，然后回车

 单元测试，选择n，然后回车

还是选择n，回车，完成项目构建

然后进入到刚才创建的项目根目录

npm install        这里建议使用国内的淘宝镜像cnmp，下载安装依赖会快很多

                         打开cmd或git bash，输入$ npm install -g cnpm --registry=https://registry.npm.taobao.org回车即可，然后就能使用cnpm了

cnpm install                          到test文件夹中打开git bash或者命令窗口初始化安装依赖，此时文件夹目录应该是这样

然后输入npm run dev  默认浏览器不会自动打开项目，我们需要手动在浏览器打开:8080，8080是默认端口，请确保该端口没被占用。

如果需要更改输入npm run dev后自动打开浏览器运行项目，打开config文件夹下面的index.js，找到autoOpenBrowser，并设为true即可

到这里，初始化vue项目就已经完成了。

很多朋友习惯了使用bootstrp、jquery，那么如何在vue项目中引用bootstrp、jquery呢？

引入jq：

输入 cnpm install jquery --save-dev      用cnpm下载jquery依赖，安装成功之后能在package.json中看到所安装的版本

找到build文件夹下的webpack.base.conf.js文件打开，修改配置：

 

1、加入webpack对象：

var webpack=require('webpack')

 2、在module.exports里面加入：

      plugins: [
           new webpack.optimize.CommonsChunkPlugin('common.js'),
          new webpack.ProvidePlugin({
          jQuery: "jquery",
         $: "jquery"
         })
      ],