vue脚手架vue-cli的学习使用教程

vue-cli的模板

1. vue-cli的脚手架项目模板有webpack-simple 和 webpack
2. 两种的区别在于webpack-simple 没有包括Eslint 检查等功能

vue-cli的项目结构

package.json文件

package.json文件是项目根目录下的一个文件，定义该项目开发所需要的各种模块以及一些项目配置信息（如项目名称、版本、描述、作者等）。

自定义npm相关命令

在package.json文件里有一个scripts字段。

在开发环境下，在命令行中运行npm run dev就相当于在执行node build/dev-server.js。所以script字段是用来指定npm相关命令的缩写的。

dependencies字段和devDependencies字段

1. dependencies字段指定了项目运行时所依赖的模块
2. devDependencies字段指定了项目开发时所依赖的模块(项目环境依赖)
3. 在命令行中运行npm install命令，会自动安装dependencies和devDependencies字段中的模块。

webpack配置相关

详情在webpack相关博客

dev-server.js

webpack.base.conf.js

check-version.js

这个文件主要是用来检测当前环境中的node和npm版本和我们需要的是否一致的。

.babelrc

Babel解释器的配置文件，存放在根目录下。Babel是一个转码器，项目里需要用它将ES6代码转为ES5代码

.editorconfig

该文件定义项目的编码规范，编辑器的行为会与.editorconfig 文件中定义的一致，并且其优先级比编辑器自身的设置要高，这在多人合作开发项目时十分有用而且必要。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!