webcli

• 常用的vue2/3脚手架,公共配置，无需再次配置
• 使用git命令将所需的vue初始化cli拉取指定分支

仓库分支介绍

1. vue2+element-ui+sass git命令 node版本 14.18.3

git clone -b v2-el-sass https://github.com/Rr210/webcli.git

2. vue2+elment-ui+less

git clone -b v2-el-less https://github.com/Rr210/webcli.git

3. vue2+vant2+less

git clone -b v2-vt2-less https://github.com/Rr210/webcli.git

4. vue2+vant2+sass

git clone -b v2-vt2-sass https://github.com/Rr210/webcli.git

5. vue2+echart+less

git clone -b v2-ect-less https://github.com/Rr210/webcli.git

6. vue3+element-plus+less

git clone -b v3-elp-less https://github.com/Rr210/webcli.git

7. vue3+element-plus+sass

git clone -b v3-elp-sass https://github.com/Rr210/webcli.git

8. vue3+vite+element-plus+less

git clone -b v3-v-elp-less https://github.com/Rr210/webcli.git

9. vue3+vite+element-plus+less+typescript

git clone -b v3-v-elp-less+tjs https://github.com/Rr210/webcli.git

10. vue3+vant3+less

git clone -b v3-vt3-less https://github.com/Rr210/webcli.git

11. vue3+vite+vant3+less

git clone -b v3-v-vt3-less https://github.com/Rr210/webcli.git

常用的npm包

npm名称	地址	npm名称	地址
vue富文本	vue-quill-editor	海报截图工具	html2canvas
sass全局变量使用	sass-resources-loader	轮播图工具	swiper
常用的动画效果	animate css3动画	处理移动端rem适配	amfe-flexible，postcss-pxtorem
github部署项目	gh-pages	上传图片压缩	compressorjs
移动端滑动问题	better-scroll	cookie设置	js-cookie

常用的性能优化

1. 首页白屏优化查看

node和node-sass版本关系

node-sass and sass-loader 点击展开

• 使用node -v 查看自己的sass版本

NodeJS	Supported node-sass version	Node Module
Node 17	7.0+	102
Node 16	6.0+	93
Node 15	5.0+, <7.	88
Node 14	4.14+	83
Node 13	4.13+, <5	79
Node 12	4.12+	72
Node 11	4.10+, <5	67
Node 10	4.9+, <6.	64
Node 8	4.5.3+, <5.0	57
Node <8	<5.0	<57

node-sass 和 sass-loader版本

sass-loader 4.1.1，node-sass 4.3.0
sass-loader 7.0.3，node-sass 4.7.2
sass-loader 7.3.1，node-sass 4.7.2
sass-loader 7.3.1，node-sass 4.14.1
sass-loader 8.0.2，node-sass 4.12.0
sass-loader 10.2.0，node-sass 6.0.1

• 最新查看原地址【node-sass】