VUE 项目中遇到的问题归总

正常项目平时运行的好好，突然有一天项目启动报错了，多由于项目中的某些包的版本出现问题

1.nodo 版本号和 npm版本号不匹配

有时候手贱升级了node 版本，导致了 npm run serve 项目跑不起来 。

解决方案：

方案一：node 版本回退

方案二： 如要一定要升级高版本的话，先回退node版本，再升级npm到指定版本，然后最后升级node 版本

npm install -g [email protected]

2.node 版本号V16.12.0 对应的node-sass 和 sass-loader

原本正常的项目，由于升级到了高版本的 node， 引发 node-sass 和 sass-loader 的兼容性问题

V16.12.0 的 node 可以使用

    "node-sass": "^6.0.1",

    "sass-loader": "^10.2.0"

如果安装不上，先安装下淘宝镜像

npm install -g mirror-config-china --registry=http://registry.npm.taobao.org

3. 新建的 vue 项目，Eslint 可能无法正常使用： 其他项目正常使用，新建的项目自动保存后，空格和单引号会被替换，报错

解决方案：在项目根目录，新建一个 .prettierrc 文件

{
  "semi": false,
  "singleQuote": true,
}

4.前端如何优化性能

加载时的优化：

1. 减少 http 请求
2. 使用服务端渲染 SSR
3. 静态资源使用 CDN
4. CSS 写在头部，Javascript 写在底部
5. 字体图片替代图片图标
6. 图片优化 （ 延迟加载 ）
7. webpack 按需加载代码

运行时的优化：

1. 减少重绘重排
2. 使用事件委托
3. if-else 对比 switch
4. 不要覆盖原生方法
5. 降低 CSS 选择器的复杂性
6. 使用 flexbox 布局
7. 使用 tranform 和opacity 属性更改来实现动画

5. 使用 Git 的规范 :

• feat: 新功能
• fix: 修复 bug
• docs: 文档
• style: 格式
• refactor: 重构
• test: 增加测试
• chore: 构建过程或辅助工具的变动

6. node & npm 升级到指定版本

对于已经安装了低版本的node 和npm ,或者node 版本和npm 不匹配，建议

先将npm升级到指定版本

npm install -g [email protected]

然后在升级node

qiankun 微框架的特性

• 基于 single-spa 封装，提供了更加开箱即用的 API
• 技术栈无关，任何技术栈的应用均可使用/接入,不论是 React/Vue/Angular/JQuery 还是其他框架
• Html entry 接入方式，让你的接入微应用像使用 iframe 一样简单
• 样式隔离，确保微应用之间样式互相不干扰
• JS 沙箱，确保微应用之间，全局变量/事件不冲突
• 资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用的打开速度
• umi 插件，提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统

uni-app 的优势

• 兼容性好，一套代码编译后多端通用，一套代码可以同时生成 安卓、ios、H5、小程序，节约大量成本
• 学习成本低：基于 vue 
• 开发速度快
• 扩展性强：多端开发