vue工程学习（2）之vueCli2和vuecli3创建vue的项目目录解析

vue工程学习（2）之vueCli2和vuecli3创建vue的项目目录解析

1.vuecli2创建步骤

vue工程学习（1）（1）之vueCli创建vue项目

2.使用idea打开vueCli2创建vue的项目vuecli2-project

1. build，打包

在package.josn里，看scripts脚本，有一个build，对应的命令就是 node build/build.js，目录build的build.js

build.js (打包)

• 先通过rm来啊删除之前打包的文件夹
• 再通过webpack拿到webpack配置
• webpack导入的配置是prod中的配置
• prod中的配置又是拼接的baseWebpackConfig+特殊配置
  

2. config（定义一些变量）
3. dist打包之后存放的目录
4. node_modules （依赖的node包）
5. src （业务代码开发）
6. static （一些静态资源，会原封不同的放到dist文件夹中）
7. .babelrc （适配浏览器，将ES6转成ES5，市场份额大于百分之一，最新的两个版本，不支持小于ie8）
8. editorconfig （对代码进行统一）
   当第一行的root = true的时候才会去解析这个文件
9. .gitignore （上传git的一些忽略）
10. .postcssrc.js （css转化的时候的配置）
11. index.html （模板）
12. package.json （包管理）
13. package-lock.json （真实的包的映射）
14. README.md（说明书）

3.使用idea打开vueCli3创建vue的项目vuecli3-project

1. dist（打包之后存放的目录）
2. node_modules （node的包）
3. public （相当于vuecli2中的static，打包的时候会原封不动的提交）
4. src （主要业务代码编写的文件夹）
5. .browserslistrc （配置浏览器相关东西，和vuecli2的babelrc一样，市场份额大于1%，最新的两个版本，不支持小于ie8）
6. gitignore （git忽略内容）
7. babel.config.js （对babel的配置）
8. package.json （包管理）
9. package-lock.json （真实的包的映射）
10. postcss.config.js （css转化的配置）
11. README.md（说明书）

4.cli3创建项目和cli2创建对比

1）cli3创建的项目目录结构文件夹和文件都变少了，移除了static、build、config，增加了一个pubilc公共文件，vue-cli3项目文件目录结构就很简单，因为在项目创建的时候，就帮我们自动配置了80%左右的基本配置，其余的配置需要我们自行创建 vue.config.js 文件进行配置。

2）webpack配置文件不见，但是它还是存在的，cli3要自己建一个vue.config.js（这个名称是固定，就想springboot的application.yaml，减少配置xml文件），vue.config.js 是一个可选的配置文件，如果项目的（和package.json 平级）根目录中存在这样一个文件，那么他会被 @vue/cli-service 自动加载，（并覆盖其内部的配置）。更多配置需要看官网，有专门一页在说vue.config.js怎么配置

举例：vue.config.js配置端口

module.exports = {
     
    devServer:{
     
        port: 9002
    }
}

3）新增了一个UI界面操作，在cmd里运行vue ui，就可以访问了，通过可视化结果也可以完成配置