具体可见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
…
配置各种优化项目的
等有时间慢慢更