vue-cli

一、vue-cli

是vue提供的脚手架工具；可通过webpack搭建的开发环境；使用ES6语法（提供相应loader对我们写的代码进行转换成浏览器可识别的es5）；打包和压缩JS为一个文件；项目文件在环境中编译而不是浏览器；实现页面自动刷新。

可以帮我们生成目录结构。

提供本地开发调试。

代码部署。

热加载特性提高编程效率。

单元测试。

到此我们的安装就成功了，打开http://localhost:8080就可以看到welcome界面了。

快捷键：进入文件夹，按住shift再右键可进入命令行

命令vue -V可以查看到安装好的vue版本。

build：webpack配置相关的文件

config：生产环境和开发环境的一些配置参数

打开index.js就可以看到开发环境的配置

node_modules：安装的第三方依赖

src：我们自己做项目的源码。

assets放置静态资源（图片，css，js）；components放公共组件；main.js是入口文件；App.vue是整个应用的入口组件，即根组件。

static：放置第三方资源。.gitcap:当我们创立了空白文件夹提交git项目是提交不上去的，会忽略空白文件夹，如果想把空的也上传，就写上.gitcap。

.babelrc：我们做项目用的是es6的语法，把es6语法转成es5。

.editorconfig：编辑器的一些配置

.eslintignore：代码检查时忽略的文件

.eslintrc：代码风格检查，在这里可以自行设置需要检查的和不想要检查的格式。在代码段前面加上这段注释，就会忽略检查这段代码：/* eslint-disable no-new */。

.giteginore: 使用git提交项目的时候忽略的文件和文件夹，如node_modules太大了。

.postcssrc：预先设置的css规则。

index.html：项目的模板。

package.json：整个项目的描述和配置。scripts是一些指令(npm run+key)来执行。

例如下npm run dev就可执行dev那一长串指令：

、

webpack相关配置文件在build与config文件夹中。

check-versions.js：检查node npm版本是否符合指定的版本。

config的index.js：构建和开发时候的一些配置项，比如port端口号。

模块作用：

chalk：定义输入终端的样式

semver：处理版本号的，比如两个版本号进行对比或者只要一些纯净的版本号。

shelljs：执行一些终端的命令。

path：处理路径相关的。

opn：启动应用时自动打开浏览器

express：node的一个框架，用来迅速搭建一个node服务。

看英文文档要会抓重点。有时候文档不够详细可以去tag里找历史版本。