饿了么项目---1、vue-cli快速构建项目（包括兼容老项目时需引入bootstrap、jquery的方法）

一、搭建项目环境

• 安装nodejs
  首先需要安装node环境，可以直接到中文官网 http://nodejs.cn/ 下载安装包。只是这样安装的 node 是固定版本的。
  如果需要多版本的 node，可以使用 nvm 安装 http://blog.csdn.net/s8460049/article/details/52396399 安装完成后，可以命令行工具中输入 node -v 和
  npm -v，如果能显示出版本号，就说明安装成功。
• 安装淘宝镜像cnpm ，npm构建项目及下载插件会很慢。
  shell命令：npm install -g cnpm –registry=https://registry.npm.taobao.org，
• 全局安装vue-cli，shell命令： npm install -g vue-cli

二、vue-cli脚手架工具快速构建项目架构

• 项目文件夹下输入shell命令： vue init webpack my-project
  该命令会生成项目名为my-project的项目模板

• 项目文件夹下输入shell命令： cnpm install
  该命令会在项目my-project文件夹下安装依赖
  完成这些后，文件夹目录如下所示:
  

• 项目文件夹下输入shell命令：cnpm run dev 运行项目
  该命令会自动打开浏览器，运行项目中的简单案例

三、有引入Bootstrap的需求时

    使用VueJS作为Javascript框架时，需要搭配一款比较合适的框架，目前推荐的是Element-UI,里面封装了一些丰富的UI控件，学习和使用请上Element-UI官网：http://element.eleme.io/#/zh-CN
    如果你有意维护之前的项目，需要使用Bootstrap与Jquery时，可以按照如下方法去引入框架到Vue项目中：

• webpack.dev.config.js文件中加入webpack对象：

var webpack=require('webpack');

• webpack.dev.config.js文件中的module.exports里面加入：

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

• 在入口文件main.js中引入及使用，全局引入jq

import $ from 'jquery'

引入bootstrap：

• 修改webpack.base.conf.js文件：

 alias: {           'vue$': 'vue/dist/vue.esm.js',           '@': resolve('src'),           //新加         'assets': path.resolve(__dirname, '../src/assets'),           'jquery': "jquery/src/jquery"         }

• 在入口文件main.js中加入：

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

• 在assets文件目录中拷贝bootstrap各种文件