关于前端:vuecli-4x-和-vue-3x-笔记

46次阅读

共计 2146 个字符，预计需要花费 6 分钟才能阅读完成。

以后最新版本的脚手架为 vue-cli 4.x  最新的 vue 版本为 3.x

如果我的项目中应用了 element-ui，暂无奈兼容 VUE3；在脚手架创立我的项目时，需抉择装置 VUE2 版本，

官网介绍
清理 npm 缓存：npm cache clean -f
卸载原有版本：npm uninstall vue-cli -g
装置新版本：npm install -g @vue/cli
查看 vue 版本：vue –version

问题 1：

版本更新失败

解决办法：

找到 npm 装置模块的门路、而后把无关 vue 的几个配置（vue.cmd）删除掉。而后重新安装 @vue/cli。

问题 2：

* 无奈将“vue”项辨认为 cmdlet、函数、脚本文件或可运行程序的名称。*

解决形式：

1. 查看全局装置的门路 npm config ls
prefix = "C:\\ProgramUser\\nvm\\dev\\npm"
2. 将门路退出环境变量
![配置环境变量](/img/bVcM3Dk)

2. 创立我的项目

3. 拷贝业务代码, 元我的项目 src 的内容到新初始的我的项目中

4. 启动我的项目 npm run serve，并依据报错信息装置缺失依赖

5. 在 Vue-cli4.x 中应用 sass / scss 的具体步骤

6.eslint 增加配置以满足以后，不批改业务代码也不报 eslint 的谬误

7. 报错：ESLint is disabled since its execution has not been approved or denied yet. Use the light bulb menu to open the approval dialog.eslint 解决

8.Vue3 不反对 eventBus，那么官网举荐的做法是应用第三方库 vue-happy-bus、mitt、tiny-emitter

9.vue3.x 批改端口号配置 vue.config.js

10. 设置门路别名 vue.config.js 配置 chainWebpack

11. 相对路径找不到对应字体库

 门路取了别名，应用 @import 导入时须要在后面加~：@import "~assets/font/iconfont.css"; 
 没有取别名的时候间接导入：@import "../assets/font/iconfont.css";

vue3 相对路径的形式引入图片报错：These relative modules were not found: * ./img/status-blue.svg

门路取了别名，应用 @import 导入时须要在后面加~：url("~src/scss/img/status-blue.svg"); 
 没有取别名的时候间接导入：@import url("../img/status-blue.svg"); 
 
[vue-cli 4.x 实现主动导入 scss 变量](https://www.cnblogs.com/kongbaifeiye/p/12149028.html)
[参照官网配置](https://cli.vuejs.org/zh/guide/webpack.html#%E4%BF%AE%E6%94%B9-loader-%E9%80%89%E9%A1%B9)

11. 报错 VueCompilerError: v-if/else branches must use unique keys.

12. 报错 “export ‘default’ (imported as ‘Vue’) was not found in ‘vue’

// vue2 const app = new Vue({})
import {createApp} from 'vue'
const app = createApp(App)

13. 报错 vuex createStore is not a function

14. 报错 VueCompilerError: v-if/else branches must use unique keys
VUE3 中如果手动提供键，那么每个分支必须应用惟一的键，这是一个重大的扭转。在大多数状况下，您能够删除这些键摘自官网

<!-- Vue 2.x -->
<div v-if="condition" key="a">Yes</div>
<div v-else key="a">No</div>

<!-- Vue 3.x (recommended solution: remove keys) -->
<div v-if="condition">Yes</div>
<div v-else>No</div>

<!-- Vue 3.x (alternate solution: make sure the keys are always unique) -->
<div v-if="condition" key="a">Yes</div>
<div v-else key="b">No</div>

报错 Refused to load the image ‘http://xx:8007/favicon.ico’

module.exports = {
pwa: {

iconPaths: {
  favicon32: 'favicon.ico',
  favicon16: 'favicon.ico',
  appleTouchIcon: 'favicon.ico',
  maskIcon: 'favicon.ico',
  msTileImage: 'favicon.ico'
}

}
};

正文完