饿了么项目---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各种文件