这可能是vue-cli最全的解析了……

2018-07-12 本文已影响39人 rewq123

相信很多vue新手，都像我一样，只是知道可以用vue-cli直接生成一个vue项目的架构，并不明白，他究竟是怎么运行的，现在我们一起来研究一下。。。

一、安装vue-cli，相信你既然会用到vue-cli，自然node环境是OK的，直接命令行下安装

npm install -g vue-cli

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

用法： vue init

template-name:

. webpack

. webpack-simple // 一个简单webpack+vue-loader的模板，不包含其他功能。

. browserify // 一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。

. browserify-simple // 一个简单Browserify+vueify的模板，不包含其他功能。

. pwa // 基于webpack模板的vue-cli的PWA模板

. simple // 一个最简单的单页应用模板

常用的就是webpack了，模板之间的不同，自己体验

示例：

vue init webpack my-project

执行指令后，会让用户输入几个基本的选项，如图所示

需要注意的是项目的名称不能大写，不然会报错。

Project name :项目名称，如果不需要更改直接回车就可以了。注意：这里不能使用大写。

Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。

Author：作者，如果你有配置git，他会读取.ssh文件中的user。

Install vue-router? 是否安装vue的路由插件，Y代表安装，N无需安装，下面的命令也是一样的。

Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格

setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha。

Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试。

Should we run npm install for you after the project has been created?(recommended)npm

询问你使用npm安装还是yarn安装包依赖，我这里选择的是npm，yarn更快更好，使用yarn之前确保你的电脑已经安装yarn。

根据提示，待模板加载完成之后,执行下面两条命令

cd my-project

npm run dev // dev代表下图框选的内容

出现如图，就是编译成功了，英文稍微好点，就能读懂这时候，鼠标放到 http://localhost:8080 会提示用“Alt+点击”即可访问；

出现如图，就成功创建了项目；

三、文件目录结构

本文主要分析开发（dev）和构建（build）两个过程涉及到的文件，故下面文件结构仅列出相应的内容。