说明:
搭建项目用的是vue/cli4, vue@3.4, elementplus@2.3, ts@4.1, 边写项目, 边学习vue3.0, 边汇总遇到的问题,版本不同、书写方式不同(例如: 格式setup(props, context),或者<script setup>), 问题与解决方案可能有误差,而且ts的引入也会有一些新的要求去满足(比如:vue3获取ref实例结合ts的InstanceType), 读者有问题欢迎留言,一起探讨.
项目中用到的语法格式
<script lang="ts">
export default defineCComponent({
setup(props, context){
return {}
}
})
</script>
1、在vue中报export ‘default‘ (imported as ‘Vue‘) was not found in ‘vue
代码格式:
报错:
我安装的vue/cli版本是@vue/cli 4.5.13, 引用文件如下图:
cli3中是通过 import vue from ‘vue’的格式引入.
解决2中思路:
(1) 使cli4的格式
(2) uninstall cli4, 安装cli3
2、手动配置vuex、router, v2与v3差异化
v3使用专门的api, v2需要手动实例化
3、手动安装element-plus
main.ts中引入格式如下
错误提示:
This dependency was not found:
* element-plus/lib/theme-chalk/index.css in ./src/main.ts
To install it,
you can run: npm install --save element-plus/lib/theme-chalk/index.css
解决办法:
我去element-plus官网查询，发现其已经将其进行修改【第二行代码】
运行正常.
4、
解决方案:https://blog.csdn.net/qq_54139028/article/details/126698066
我在项目中应用了elment-plus, 报错的是引用在el-form表单中的变量,提示属性不存在, 在项目中使用以上方法未生效.
5、vue解决less-loader报错this getOptions is not a function
原因:less-loader的版本太高了,webpack与less-loader的版本兼容导致的
解决方案:
下载高版本: npm uninstall less less-loader
重新安装低版本
npm install less@3.9.0 less-loader@5.0.0 --save-dev
6、vue提示Already included file name '.../components/TagsView.vue' differs from file name
明明引入的文件名和地址都是正确的，但是还是报错误
解决方案:
把文件名的后缀vue去掉
把路径前面的点改成@
在子组件中加载子组件依然存在这个问题,对了,我懒得配置ts.config.json,因为我的组件路径比较深,配置后并不方便,重要的是页面正常显示且组件引入使用相对路径查找更方便.
紧接着会出现问题7
7、Cannot find module '@/components/nav/component/navleft/Navleft' or its corresponding type declarations.Vetur(2307)
原因: 当script 标签上加上lang="ts" 时就会出现这个问题。因为tsconfig.json 没有配置
8、子组件加载成功,但是不显示子组件内容,组件高度为0
子组件需要写在components里
9、element-plus去掉el-dropdown 点击之后显示的蓝色边框
解决方案
参考:https://www.jianshu.com/p/24e7d4f5b50d
10、修改packge.json文件的name属性报错
npm ERR! Invalid name: "后台管理系统"
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/apple/.npm/_logs/2023-09-05T11_52_59_602Z-debug.log
name属性不能是中文
参考:https://blog.csdn.net/weixin_45711931/article/details/130399946
11、更改项目标题的方式
vue.config.js配置chainWebpack
参考:https://zhuanlan.zhihu.com/p/570272839
12、关闭any警告
警告:
warning Unexpected any. Specify a different type @typescript-eslint/no-explicit-any
解决:eslintrc.js文件添加rules配置
添加完成之后，重新运行项目即可
参考:https://blog.csdn.net/weixin_42744724/article/details/128898447
13、
Argument 'state' should be typed with a non-any type.
eslint@typescript-eslint/explicit-module-boundary-types(parameter) state: any
解决方案:
写接口定义state类型
14、elementPlus中icon的使用
参考:官网关于icon的用法,结合component的is属性动态渲染icon
15、vue3中各个钩子的使用
参考:https://www.python100.com/html/3RS6K3NT85N3.html
16、ref的使用
使用ref函数定义一个变量，ref扩号里是变量的初始值
import { ref } from 'vue'
let conter=ref(0)
let arr=ref(['我是字符串'])
template里的用法
<button @click="conter++">{{conter}}</button>
<div v-for="item in arr">
<p>{{item}}</p>
</div>
js里的用法
function add(){
conter.value++
console.log(conter)
arr.value.push('耗子尾汁')
}
17、vue3.0 区分生产环境，测试环境，正式环境
1.在根目录下新建.env.xxx文件
2、不同环境配置
测试环境
开发环境
生产环境
文件中根据 process.env.NODE_ENV 来区分不同环境,设置不同域名
3、输出目录配置
通过 process.env.outputDir 直接获取
4、 如果分测试环境和正式环境，npm run build时会打包两次。修改根目录下的 package.json
// 在scripts中加入以下代码
--mode production // 打包正式环境
--mode development // 打包开发环境
--mode test // 打包测试环境
拓展:https://www.jianshu.com/p/3917d97f8b96
18、node版本管理nvm配置过程遇到的问题
mac已安装node的卸载
nvm提示安装失败
nvm安装成功和重启终端后两种情况zsh终端报错 zsh: command not find:nvm
解决方案参考我的另一个文章: https://www.jianshu.com/p/8f79fa2fe035
19、vue 运行报错 TypeError: Cannot read property 'upgrade' of undefined
原因:vue.config.js中devServer设置了proxy，但target为空，将target设置一个地址即可。
解决方案: target 设置成非空
20、vue中的hooks
hooks就是函数的一种写法,就是将文件中一些单独功能的js代码抽离出来,放到单独的js文件中,或者说是一些公共的功能或者方法.vue3.0中的hooks跟vue2.0中的mixin有点类似,相比较hooks更清晰复用代码的来源,更清晰易懂.
21、vue3.0中使用ref来调用子组件实例(vue3获取ref实例结合ts的InstanceType)
参考: https://www.jb51.net/javascript/2953413t9.htm
父组件定义ref绑定子组件时候,InstanceType很重要()
(1)< script setup >通过ref获取子组件的值或方法。(我的项目中未实践)
关于defineExpose的使用
defineExpose: 子组件使用defineExpose暴露变量或者方法给父组件
defineExpose的变量在子组件一定也要return
(2)setup（）通过ref获取子组件值 (我的项目中使用的是这种方式)
子组件
父组件
22、vue3 defineEmits的使用
参考:https://blog.csdn.net/weixin_47228574/article/details/128144067
23、vue3.0中使用nextTick
参考:https://blog.csdn.net/qq_41619796/article/details/118996974
24、.eslintrc.js文件中【globals】下配置【defineEmits: true】
25、vue3中setUp函数的2个参数详解
参考: https://blog.51cto.com/u_12553473/5642509
26、vue3.0监听props
参考: https://blog.csdn.net/LJJ_3/article/details/119117788
vue3.0+ts+elementPlus后台系统, 源码地址 https://git@github.com:wangAlisa/vue3.0-ts-elementPlus.git
持续更新中
网上搜罗来的:
http://www.taodudu.cc/news/show-5155435.html?action=onClick
https://juejin.cn/post/7006108454028836895
