Vue CLI官方网址与基本介绍

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 -- 项目说明，说明一下此项目作何使用等。

　　　　

• 

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生产环境配置文件

　　　　

1.3 config

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

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

　　

1.4 .editorconfig

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