乐趣区

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

vue-cli 4.x 应用 element-ui

以后最新版本的脚手架为 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>
  1. 报错 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'
}

}
};

退出移动版