# Vue3项目搭建
Vue3项目搭建
使用vite
yarn create vite
1
Vue-router类型声明
# eslint
yarn add eslint
eslint-plugin-vue
eslint-define-config
@typescript-eslint/eslint-plugin
@typescript-eslint/parser -D
1
2
3
4
5
2
3
4
5
https://juejin.cn/post/6975442828386107400#heading-2
https://juejin.cn/post/7021464780242321439#heading-1
最终配置
const { defineConfig } = require('vite')
module.exports = defineConfig({
root: true,
// 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。
env: {
node: true
},
parserOptions: {
// js的版本
ecmaVersion: 13, // 解析器
parser: '@typescript-eslint/parser', // 模块化方案
sourceType: 'module'
},
extends: [
'eslint:recommended',
'prettier',
'plugin:vue/vue3-essential',
],
plugins: ['vue', '@typescript-eslint'],
rules: {
semi: ['error', 'never'],
quotes: ['error', 'single'],
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'vue/multi-word-component-names': [
'error',
{
ignores: ['Home']
}
]
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
# Typescript ESlint
https://typescript-eslint.io/docs/linting/
yarn add eslint
typescript
@typescript-eslint/parser
@typescript-eslint/eslint-plugin -D
1
2
3
4
2
3
4
# 路由模块的按需加载
以下代码通过将每个页面打包成单独的js文件，以解决打包单个文件过大，首屏加载慢的问题。
两种方式
# 1.import.meta.glob
vite中的 import.meta.glob (opens new window)
首先引入所有路由文件
const modules = import.meta.glob('../views/**/*.vue')
1
const handleAsyncRoutes = (routes: RouteConfig[]): RouteRecordRaw[] =>
routes.map((route) => {
return {
path: route.path,
component: modules[`../pages/${route.component}.vue`]
}
})
const asyncRoutes = handleAsyncRoutes(routesMap)
asyncRoutes.forEach((route) => router.addRoute(route))
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
这样页面就可以正常显示了
# 2.动态import
针对单个文件使用动态import
# 动态导入No match found for location with path 问题
addRoute(routeConfig)时发现 routeConfig中的一级component为undefined
addRoute的代码如下
import Layout from '@/view/layout/index.vue'
const modules = import.meta.glob('../views/**/*.vue')
// ...
function filterRoute(routeConfigMap: any) {
const asyncRoutes = routeConfigMap.map((routeConfig: any) => {
// routeConfig.component 为 null时
if (!routeConfig.component) {
console.log('我进来了')
routeConfig.component = Layout // 这里不能这样写
// routeConfig.component = Layout
routeConfig.path = routeConfig.url
}
// 有子菜单
if (routeConfig.children && routeConfig.children.length > 0) {
routeConfig.children = filterRoute(routeConfig.children)
}
// routeConfig.component 不为 null
return {
name: routeConfig.name,
path: routeConfig.url,
component: modules['../views/' + routeConfig.component + '.vue'],
children: routeConfig.children
}
})
console.log('asyncRoutes: ', asyncRoutes)
return asyncRoutes
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
原因是因为routeConfig.component = Layout后最后return的是modules['../views/' + routeConfig.component + '.vue'],
找不到所以是undefined。
改成 routeConfig.component = 'layout/index.vue'
routeConfig.name 是唯一的
# 思考🤔：为什么vue中import() 语法不能传一个变量？
es6的import是编译阶段执行，所以不能使用表达式和变量这种只有在运行时才确定值的语法。
webpack是在编译时查找模块的，而用变量的方式保存路径是运行时执行的
let a = 'export'
import some from `${a}.js` // 报错
const some = require(`./${a}.js`) // 不报错
1
2
3
4
2
3
4
require
const a = 10,
b = 20
var env
if (a > b) {
env = require('./.env.dev')
} else env = require('./.env.prod')
console.log(env) // 不报错
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
es6 import
if (false) {
import env from './.env.dev.mjs'
} else import env from './.env.prod.mjs'
console.log(env) // 报错
1
2
3
4
5
2
3
4
5
# 关于vite动态导入
学习理解Vue3 →