vue-cli（脚手架的使用）以及webpack打包项目 原来构建一个项目是这么轻松。

构建一个vue项目

1.首先要有vue。直接npm全局安装。

npm install vue -g

2. 接下来就是安装脚手架

npm install vue-cli -g

3. 创建工程化目录

vue init webpack porject

然后就会提示你
你的项目名字？
? Project name ddporject
你要添加的备注信息？
? Project description this is 当当项目
开发人的信息？
? Author pengboooo 1223577600@qq.com
用vue构建项目？
? Vue build (Use arrow keys)
用vue独立构建？
? Vue build standalone
是否安装vue-router？
? Install vue-router? Yes
使用ESLint对代码进行格式化？
? Use ESLint to lint your code? Yes
选择ESLint预置标准
? Pick an ESLint preset Standard
设置单元测试？
? Set up unit tests Yes
选择一个测试运行器
? Pick a test runner jest
设置黑盒e2e测试
? Setup e2e tests with Nightwatch? Yes

当你完成了以上选择之后就开始自动下载模板文件，以及依赖包。

1. 当你下载完成以后，
   cd 到你的项目

cd project
 npm start//启动项目。

2.如果你想自动启动浏览器，需要在 config文件夹下的index.js
中设置 autoOpenBrowser: true,，这样就可以自动打开浏览器了。

工程化目录的功能含义

|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- utils.js // 构建工具相关
| |-- vue-loader.conf.js // webpack loader配置
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置,构建开发本地服务器
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- router // vue的路由管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- static // 静态文件，比如一些图片，json数据等
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- .postcsssrc // postcss配置文件
|-- README.md // 项目说明
|-- index.html // 入口页面
|-- package.json // 项目基本信息,包依赖信息等