一、安装vue-cli
安装vue-cli前提，你的电脑已经安装好了Node.js,因为vue-cli 安装是给予
NPM（包管理工具）来进行安装的，同时安装好的同学，建议你们把NPM下载地址指定到淘宝NPM镜像地址，其原因就不说了，墙内人都懂。
安装命令
$ npm install -g vue-cli // 替换了淘宝镜像的使用 cnpm
$ vue -V // 查看vue版本号
2.8.1
-g（global）：代表全局安装，出现了 版本号，也就说明我们的Vue-cli已经成功的安装到了我们的计算机里了。
二、创建一个vue项目（初始化）
我们用vue init 命令来初始化项目
$ vue init <template-name> <project-name>
init : 通过vue-cli 来初始化构建一个vue项目
template-name : 模板名称，vue-cli官方给我们提供了5种模板。
- vue-cli 官方模板
- webpack - 一个全面的webpack+vue-loader的模板，功能包括热加载（更新），linting（语法检测），测试和Css扩展。
- webpack-simple - 一个简单webpack+vue-loader的模板，不包含其他功能，让你快速构建vue开发环境。
- browserify - 一个全面的Browerify+vueify的模板，功能包括热加载，linting，单元测试。
- browserify-simple - 一个简单的Browerify+vueify的模板，不包含其他功能，让你快速的构建vue的开发环境。
- simple - 一个最简单的单页应用模板。
<project-name> : 标识项目名称
在实际开发中，普遍是使用webpack这个模板，我们来实际创建一个项目吧。
$ vue init webpack vuecliTest
执行命令后，会询问我们几个简单的选项，根据自己的需要进行确认就好。
- 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来进行用户行为模拟测试，我们这里不需要，所以输入n。
项目构建完成
三、运行项目
根据上图命令提示：
$ cd vuecliTest //进入项目目录
$ npm install //安装项目依赖包，根据package.json里的包，这里替换了淘宝镜像 使用`cnpm`来安装
$ npm run dev //开发模式下运行我们的项目程序。给我们自动构建了开发用的服务器和浏览器中打开，并实时监视我们的代码更改，即时呈现给我们。
运行项目
出现上图，说明我们的项目初始化已经成功，我们可以开始来自由编写我们的程序了。
四、Vue-cli 项目目录解析
|-- 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 // 源码目录
| |-- assets // 资源目录
| |-- components // vue公共组件
| |-- store // vuex的状态管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- static // 静态文件，比如一些图片，json数据等
| |-- data // 群聊分析得到的数据用于数据可视化
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
| |-- .postcssrc.js // 通过JS插件装换样式的工具
|-- README.md // 项目说明
|-- favicon.ico
|-- index.html // 入口页面
|-- package.json // 项目基本信息
网友评论