vue项目搭建，配置webpack，包优化

具体可见https://cloud.tencent.com/developer/article/1485228

公司所有项目在用户中心下配置，有一个git项目seed前端框架。
如果有新项目搭建框架，可以直接拉seed，拉到本地改成自己需要的配置然后push到新的项目git下。注意不能直接复制粘贴，如果直接复制粘贴git上没有git log记录，这样的话如果框架进行了修改，新项目只能手动修改。
项目中系统标识符和用户中心配置的一致，每个项目的系统标识符都应唯一。

从零搭建

准备

安装node，vue-cli，webpack，webpack-cli

npm install -g vue-cli
npm install -g webpack@版本号
npm install -g webpack-cli@版本号
//查看版本号
vue -V
webpack -v

如果出现'vue' 不是内部或外部命令，也不是可运行的程序 或批处理文件。或者'webpack' 不是内部或外部命令，也不是可运行的程序 或批处理文件。
解决：配置环境变量
npm config list查看配置信息

添加环境变量
此电脑->属性->高级系统设置->环境变量->path->新建->复制路径->确定->重启命令行窗口

创建项目

vue init webpack 项目名

是否安装编译器的详细选择

Runtime + Compiler: recommended for most users运行程序+编译器

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - re
nder functions are required elsewhere

仅运行程序，比上面模式轻约6kb，但template（或任何特定于vue的html）只允许在.vue文件中使用，其他地方要用render函数。

两模式生成的脚手架主要区别在main,js。其他基本一样

vue的运行过程
compiler：运行过程 template->ast->render->virtual dom->UI
将vue中template模板解析成ast树（抽象语法树）
将ast编译成render函数
将render函数再翻译成virtual dom（虚拟dom）
将虚拟dom显示在浏览器

only：运行过程 render->virtual dom->UI
省略了从template->ast->render过程

更详细的区别可以看这个
https://blog.csdn.net/weixin_43974265/article/details/112743656

使用命令npm run dev打开项目

配置webpack

创建的项目各文件配置理解可以看这个
https://www.jianshu.com/p/051fcd267316

webpack-dev-server搭建项目的时候自动加载了，热更新也自动开启了，但是直接运行项目不会自动打开网页，需要在package.js文件中启动命令中添加配置--open

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --open"

此时，运行项目可以自动打开页面

入口（entry），出口（output）配置
webpack配置最重要且必选的两项，入口告诉webpack从哪里开始寻找依赖进行编译。出口配置编译后的文件存储位置和文件名

入口，出口在这个文件夹下


配置各种loader
css
sass
…
配置各种优化项目的
等有时间慢慢更