Vue CLI官方网址与基本介绍

刺骨的言语ヽ痛彻心扉 2021-12-11 22:23 156阅读 0赞

[https://cli.vuejs.org/zh/config/\#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE][https_cli.vuejs.org_zh_config_E5_85_A8_E5_B1_80-cli-_E9_85_8D_E7_BD_AE]

vue.config.js

`vue.config.js` 是一个可选的配置文件，如果项目的 (和 `package.json` 同级的) 根目录中存在这个文件，那么它会被 `@vue/cli-service` 自动加载。你也可以使用 `package.json` 中的 `vue` 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

**写在前面：**

vue是什么，是一套构建用户界面的渐进式框架（官网解释），什么叫渐进式框架呢，简单回答就是主张最少，这些概念只能自己去看，自己去理解，一千个读者一千个哈姆雷特，不过多的解释。Vue官方文档 很全面的。

**vue-cli脚手架的优势：**

*  有一套成熟的vue项目架构设计,能够快速初始化一个Vue项目.
 *  vue-cli是官方支持的一个脚手架，会随本版本进行迭代更新。
 *  vue-cli提供了一套本地的node测试服务器，使用vue-cli自己提供的命令，就可以启动服务器。
 *  集成打包上线方案。
 *   还有一些优点，包括：模块化，转译，预处理，热加载，静态检测和自动化测试等，等大家深入使用下去就会发现vue-cli的强大之处。

**使用vue-cli快速创建的vue项目目录如下：**

*   *  build  -- webpack相关配置以及服务启动文件，配置多依赖于下边的config文件夹中内容
     *  config -- vue基本配置文件，如监听端口，打包输出等配置
     *  node\_modules -- 安装依赖包的目录文件
     *  src -- 页面以及业务逻辑文件夹，在此文件夹下进行项目开发
     *  static -- 静态资源，可存放一些不需要进行打包的资源文件
     *  .babelrc -- ES6语法编译配置，用来将ES6代码转换为浏览器识别的代码(ES6转ES5)
     *  .editorconfig -- 代码规范化配置文件
     *  .gitignore -- git上传需要忽略的文件格式
     *  .postcssrc.js -- 转换css工具，用js来处理css
     *  index.html -- 页面入口
     *  package.json -- 项目基本信息，项目开发所需的模块，项目名称，版本等
     *  readme.txt -- 项目说明，说明一下此项目作何使用等。

*  ![706116-20190102111537258-6644350.png][]

### 1.2 build ###

build文件夹下的文件目录如下：

*   *  build.js -- 生产环境构建代码
     *  check-versions.js -- 检查node,npm等版本
     *  logo.png
     *  utils.js -- 构建工具相关
     *  vue-loader.conf.js -- css加载器配置
     *  webpack.base.conf.js -- webpack基础配置文件
     *  webpack.dev.conf.js -- webpack开发环境配置文件
     *  webpack.prod.conf.js -- webpack生产环境配置文件

![706116-20190102112506549-1753286484.png][]

### 1.3 config ###

config文件夹下的文件目录如下：

*   *  dev.env.js -- 开发环境变量
     *  index.js -- 项目的一些配置变量
     *  prod.env.js -- 生产环境变量

![706116-20190102112916474-188690590.png][]

### 1.4 .editorconfig ###

代码规范化编辑可以帮助我们简单整洁的展示代码结构，而.editorconfig文件就是对代码规范设置的一个文档。使用编辑器/IDE打开项目时编辑器会自动寻找.editorconfig文件，然后根据其内容配置去显示相关的项目代码文件。

![706116-20190102114908613-1009163804.png][]

[https_cli.vuejs.org_zh_config_E5_85_A8_E5_B1_80-cli-_E9_85_8D_E7_BD_AE]: https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
[706116-20190102111537258-6644350.png]: /images/20211211/903732ad0696472cb716e26520405d1c.png
[706116-20190102112506549-1753286484.png]: /images/20211211/da9c7d081b7741dc8b90bad42c154330.png
[706116-20190102112916474-188690590.png]: /images/20211211/75c3b56dee864e518330226d548a8f44.png
[706116-20190102114908613-1009163804.png]: /images/20211211/ef89bee199c54f1fb2c56b6f728e78d2.png