2021.8.11
坑46(
vue3、组件命名
):目标是将多组件组成的主页面集中到一个文件夹内,例如pages/home文件夹,其中放置主要引用文件index.vue和其他组件比如UserOperate.vue等,此时,index.vue中导出的name应该依然试用'Home'。
// 例一 pages/home/index.vue
<script>
export defalut {
name:'Home'
}
</script>
// 例二 pages/login/index.vue
<script>
export defalut {
name:'Login'
}
</script>
坑47(
vs code、快捷键、新建文件、新建文件夹
):目标是设置方便的新建文件及文件夹的快捷键。方法:设置=>键盘快捷方式=>搜索:新建,可以看到'文件:新建文件'、'文件、新建文件夹'这两项,设置便于操作的快捷键即可。因为常用的ctrl+字母键几乎都已被占用,所以此处设置了连按模式:ctrl+Q ctrl+Q => 文件:新建文件;ctrl+W ctrl+W => 文件:新建文件夹。
坑48(
js、数组、判断是否为空
):目标是判断一个树中的子树是否为空,子树是数组的格式,判断方法:
if(!tree.children || !tree.children.length)为true,则子树不存在或为空数组。
if(tree.children &&
tree.children.length
)为true,则
不为空的
子树存在。
坑49(
vite2、alias、路径别名
):目标是设置根目录的别名。在vite.config.js中配置即可。测试了很多组合,@与src的组合,配合@/调用可行。相关代码如下(展示的是成功的情况,踩坑、报错的错误组合见最下方):
// vite.config.js
import { defineConfig } from 'vite'
import { resolve } from 'path' //path是默认有的,不需要自己写
...
export default defineConfig({
...
resolve:{
alias:[
{
find:'@',
//此处填'/src'也可以
replacement:resolve(__dirname,'src')
}
]
}
})
// router.js中调用
...
// 注意!无论上方是'src'还是'src/',调用时的'/'不能省略,否则会报错[vite] Internal server error: Failed to resolve import "@views/system/user/index.vue" from "src\router\index.js". Does the file exist?
component:()=>import('@/views/system/user/index.vue'),
...
注意!
踩坑、报错在这里。以下为错误组合:
// 错误组合1
{ find:'@/', replacement:resolve(__dirname,'src/') }
// 调用1 component:()=>import('@/views/system/user/index.vue'),
// 报错1 error: Could not resolve "@/views/system/user/index.vue"
// 调用2 component:()=>import('@views/system/user/index.vue'),
// 报错2 [vite] Internal server error: Failed to resolve import "@views/system/user/index.vue" from "src\router\index.js". Does the file exist?
//错误组合2
{ find:'@/', replacement:resolve(__dirname,'src') }
// 调用1 component:()=>import('@/views/system/user/index.vue'),
// 报错1 error: Could not resolve "@/views/system/user/index.vue"
// 调用2 component:()=>import('@views/system/user/index.vue'),
// 报错2 error: Could not resolve "@views/system/user/index.vue"
// 错误组合的成功调用方式:component:()=>import('@//views/system/user/index.vue'),
相关原因:vite 2.x中的 alias 会被传递给 @rollup/plugin-alias 并不再需要开始/结尾处的斜线了。相关文档: 从 v1 迁移 | Vite 官方中文文档 (vitejs.dev)
by 莫得感情踩坑机(限定)