vue工程学习（2）之vueCli2和vuecli3创建vue的项目目录解析
发布于2021-06-06 17:03 阅读(1440) 评论(0) 点赞(28) 收藏(4)
vue工程学习（2）之vueCli2和vuecli3创建vue的项目目录解析
1.vuecli2创建步骤
2.使用idea打开vueCli2创建vue的项目vuecli2-project
- build，打包
在package.josn里，看scripts脚本，有一个build，对应的命令就是 node build/build.js，目录build的build.js
build.js (打包)
- 先通过rm来啊删除之前打包的文件夹
- 再通过webpack拿到webpack配置
- webpack导入的配置是prod中的配置
- prod中的配置又是拼接的baseWebpackConfig+特殊配置
- config（定义一些变量）
- dist打包之后存放的目录
- node_modules （依赖的node包）
- src （业务代码开发）
- static （一些静态资源，会原封不同的放到dist文件夹中）
- .babelrc （适配浏览器，将ES6转成ES5，市场份额大于百分之一，最新的两个版本，不支持小于ie8）
- editorconfig （对代码进行统一）
当第一行的root = true的时候才会去解析这个文件 - .gitignore （上传git的一些忽略）
- .postcssrc.js （css转化的时候的配置）
- index.html （模板）
- package.json （包管理）
- package-lock.json （真实的包的映射）
- README.md（说明书）
3.使用idea打开vueCli3创建vue的项目vuecli3-project
- dist（打包之后存放的目录）
- node_modules （node的包）
- public （相当于vuecli2中的static，打包的时候会原封不动的提交）
- src （主要业务代码编写的文件夹）
- .browserslistrc （配置浏览器相关东西，和vuecli2的babelrc一样，市场份额大于1%，最新的两个版本，不支持小于ie8）
- gitignore （git忽略内容）
- babel.config.js （对babel的配置）
- package.json （包管理）
- package-lock.json （真实的包的映射）
- postcss.config.js （css转化的配置）
- 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，就可以访问了，通过可视化结果也可以完成配置
原文链接:https://blog.csdn.net/qq_30442207/article/details/117588185
所属网站分类: 技术文章 > 博客
作者：临摹
链接：http://www.phpheidong.com/blog/article/88158/d9c146a50af28e4ee742/
来源：php黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力