一.引见

vue-cli是官方供应的脚手架，用来疾速竖立项目。

二.装置

npm install vue-cli -g//全局装置

三.初始化项目

vue init <template-name> <project-name>

<template-name>：示意模板称号，vue-cli官方为我们供应了5种模板，
webpack-一个周全的webpack+vue-loader的模板，功用包括热加载，linting,检测和CSS扩大。
webpack-simple-一个简朴webpack+vue-loader的模板，不包括其他功用，让你疾速的搭建vue的开辟环境。
browserify-一个周全的Browserify+vueify 的模板，功用包括热加载，linting,单位检测。
browserify-simple-一个简朴Browserify+vueify的模板，不包括其他功用，让你疾速的搭建vue的开辟环境。
simple-一个最简朴的单页运用模板。
<project-name>：标识项目称号，这个你能够依据本身的项目来起名字。
在现实开辟中，平常我们都邑运用webpack这个模板

初始化敕令是一条交互敕令，用以完美项目信息：
Project name :项目称号 ，假如不须要变动直接回车就能够了。注重：这里不能运用大写，所以我把称号改成了vueclitest
Project description:项目形貌，默以为A Vue.js project,直接回车，不必编写。
Author：作者，假如你有设置git的作者，他会读取。
Install vue-router? 是不是装置vue的路由插件，我们这里须要装置，所以挑选Y
Use ESLint to lint your code? 是不是用ESLint来限定你的代码毛病和作风。我们这里不须要输入n，假如你是大型团队开辟，最好是举行设置。
setup unit tests with Karma + Mocha? 是不是须要装置单位测试东西Karma+Mocha，我们这里不须要，所以输入n。
Setup e2e tests with Nightwatch?是不是装置e2e来举行用户行动模仿测试。

初始化完成以后，进入装置目次，必须先装置项目依靠，不然没法运转。

npm install//装置依靠

装置完成依靠以后，看看是不是能够一般运转。

npm run dev

四.项目构造

.
|-- build                            // 项目构建(webpack)相干代码
|   |-- build.js                     // 临盆环境构建代码
|   |-- check-version.js             // 搜检node、npm等版本
|   |-- dev-client.js                // 热重载相干
|   |-- dev-server.js                // 构建当地服务器
|   |-- utils.js                     // 构建东西相干
|   |-- webpack.base.conf.js         // webpack基本设置
|   |-- webpack.dev.conf.js          // webpack开辟环境设置
|   |-- webpack.prod.conf.js         // webpack临盆环境设置
|-- config                           // 项目开辟环境设置
|   |-- dev.env.js                   // 开辟环境变量
|   |-- index.js                     // 项目一些设置变量
|   |-- prod.env.js                  // 临盆环境变量
|   |-- test.env.js                  // 测试环境变量
|-- src                              // 源码目次
|   |-- components                     // vue大众组件
|   |-- store                          // vuex的状况治理
|   |-- App.vue                        // 页面进口文件
|   |-- main.js                        // 顺序进口文件，加载种种大众组件
|-- static                           // 静态文件，比方一些图片，json数据等
|   |-- data                           // 群聊剖析获得的数据用于数据可视化
|-- .babelrc                         // ES6语法编译设置
|-- .editorconfig                    // 定义代码花样
|-- .gitignore                       // git上传须要疏忽的文件花样
|-- README.md                        // 项目申明
|-- favicon.ico 
|-- index.html                       // 进口页面
|-- package.json                     // 项目基本信息
.

已上文件，有两大部份
项目源文件和设置文件
设置文件重要包括webpack，webpack是打包治理器，这又是另一个进修的重点。
源文件须要注重的是main.js是进口文件，router下的是路由文件，.vue文件是组件文件。