快速构建vue-cli（vue脚手架）

vue-cli 是vue.js的脚手架，用于自动生成vue.js模板工程的。

 一、使用npm安装vue-cli

   须要先装好vue 和 webpack（前提是已经安装了nodejs，不然连npm都用不了）

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

　

　　注意：上面这些装过一次以后都不须要再安装了

二、使用vue-cli构建vue项目

vue init webpack my-project    //生成项目名为my-project的模板

命令输入后，会进入安装阶段，须要用户输入一些信息:

Project name (vuetest)                    项目名称，能够本身指定，也可直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，若是有会报错Sorry, name can no longer contain capital letters），阮一峰老师博客为何文件名要小写 ，能够参考一下。

Project description (A Vue.js project)  项目描述，也可直接点击回车，使用默认名字

Author (........)       做者（随便你）

Runtime + Compiler: recommended for most users    运行加编译，既然已经说了推荐，就选它了

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere   仅运行时，已经有推荐了就选择第一个了

Install vue-router? (Y/n)    是否安装vue-router，这是官方的路由，大多数状况下都使用。

Use ESLint to lint your code? (Y/n)      是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，并不会影响总体的运行，这也是为了多人协做，新手就不用了，通常项目中都会使用。ESLint官网

接下来也是选择题Pick an ESLint preset (Use arrow keys)            选择一个ESLint预设，编写vue项目时的代码风格，由于我选择了使用ESLint

Standard (https://github.com/feross/standard)    标准，js的标准风格

AirBNB (https://github.com/airbnb/javascript)    JavaScript最合理的方法，这个github地址说的是JavaScript最合理的方法

none (configure it yourself)    本身定义风格 ，我选择标准风格

Setup unit tests with Karma + Mocha? (Y/n)  是否安装单元测试，教程未安装

Setup e2e tests with Nightwatch(Y/n)?     是否安装e2e测试 ，教程未安装

 

cd my-project　　　　　　　　//进入到项目文件夹
npm install                    //初始化安装依赖

如图

3.启动运行命令的：npm run dev

4.在浏览器中打开http://localhost:8080

5.通常项目目录的简要说明（与本案例不符，仅为参考）

 

├── build
 
// 项目构建(webpack)相关代码
 
│ ├── build.js
 
// 生产环境构建代码
 
│ ├── check-versions.js
 
// 检查node&npm等版本
 
│ ├── dev-client.js
 
// 热重载相关
 
│ ├── dev-server.js
 
// 构建本地服务器
 
│ ├── utils.js
 
// 构建配置公用工具
 
│ ├── vue-loader.conf.js
 
// vue加载器
 
│ ├── webpack.base.conf.js
 
// webpack基础配置
 
│ ├── webpack.dev.conf.js
 
// webpack开发环境配置
 
│ └── webpack.prod.conf.js
 
// webpack生产环境配置
 
├── config
 
// 项目开发环境配置
 
│ ├── dev.env.js
 
// 开发环境变量
 
│ ├── index.js
 
// 项目一些配置变量
 
│ └── prod.env.js
 
// 生产环境变量
 
├──node_modules
 
// 项目依赖的模块
 
├── src
 
// 源码目录
 
│ │ ├── assets
 
// 资源目录
 
│ │ └── logo.png
 
 
 
│ ├── components
 
// vue公共组件
 
│ │ └── Hello.vue
 
 
 
│ ├──router
 
// 前端路由
 
│ │ └── index.js
 
// 路由配置文件
 
│ ├── App.vue
 
// 页面入口文件
 
│ └── main.js
 
// 程序入口文件
 
└── static
 
// 静态文件，好比一些图片，json数据等
 
│ ├── .gitkeep
 
 
 
├── .babelrc
 
// ES6语法编译配置
 
├── .editorconfig
 
// 定义代码格式
 
├── .gitignore
 
// git上传须要忽略的文件格式
 
├── index.html
 
// 入口页面
 
├── package.json
 
// 项目基本信息
 
├── README.md
 
// 项目说明