项目初始化
选择vue和TypeScript，创建项目后，进入项目目录，安装相关依赖：
项目初始化就完成了，进入package.json文件中，可以在scripts模块中看到相关的命令，执行yarn dev或npm run dev，即可启动项目。
配置路径别名
在vite.config.ts中配置路径别名。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
plugins: [vue()],
resolve:{
alias: {
"@": path.resolve(__dirname,"src")
}
}
})
|
如果提示无法识别path模块，需要安装一个依赖@types/node:
1
2
3
| npm install @types/node
yarn add @types/node
|
router配置
接下来配置router，首先安装vue-router
1
2
3
| yarn add vue-router@4
npm install vue-router@4
|
然后在src目录下创建router/index.ts文件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const history = createWebHistory()
const routes: Array<RouteRecordRaw> = [
{
path: "/",
redirect: "/home",
},
{
path: "/home",
name: "home",
component: () => import("@/views/home/index.vue"),
},
];
const router = createRouter({
history,
routes
})
export default router
|
在src目录下创建views目录，然后创建home/index.vue文件:
1
2
3
4
5
6
7
8
9
10
| <!-- src/views/home/index.vue -->
<template>
<div>hello world!</div>
</template>
<script lang="ts" setup name="Home">
</script>
<style scoped>
</style>
|
修改App.vue中的代码：
1
2
3
4
5
6
7
8
| <!-- src/views/App.vue -->
<template>
<router-view />
</template>
<style scoped>
</style>
|
最后在main.ts中引入router文件：
1
2
3
4
5
6
7
8
|
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from '@/router'
createApp(App).use(router).mount('#app')
|
如果引入router的时候编译器报错找不到模块“@/router”或其相应的类型声明。ts(2307)，这时候需要在tsconfig.json中配置一下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
}
}
|
配置完之后，就会发现报错消失了。
store配置
全局变量需不需要配置，还是看个人的项目需求，如果没有全局变量就不用配置。我这里的话，使用的是pinia，如果想使用vuex，可以参考vuex的文档进行配置。
首先需要安装pinia
1
2
3
| yarn add pinia
npm install pinia
|
安装完成后，在main.ts文件中引入pinia:
1
2
3
4
5
6
7
8
9
10
|
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from '@/router'
import { createPinia } from 'pinia'
const pinia = createPinia()
createApp(App).use(router).use(pinia).mount('#app')
|
接下来，在src目录下创建store/user.ts文件：
1
2
3
4
5
6
7
8
9
10
11
12
|
import { defineStore } from "pinia";
const storeUser = defineStore('user',{
state: ()=>({
username: 'test',
age: 18,
}),
})
export default storeUser
|
使用的时候，引入user.ts，然后获取相关的字段就可以了，例子：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <!-- src/views/home/index.vue -->
<template>
<div>hello world!</div>
<div>姓名：{{username}}，年龄：{{age}}</div>
</template>
<script lang="ts" setup name="Home">
import storeUser from '@/store/index'
const {username,age} = storeUser()
</script>
<style scoped>
</style>
|
自动导入vue
在写组件的时候，几乎每个页面都需要ref或者一些生命周期函数，这样的话就需要每个页面都进行导入，可以在vite.config.ts文件中配置按需导入。
需要下载一个插件unplugin-auto-import：
1
2
3
| yarn add unplugin-auto-import
npm install unplugin-auto-import
|
然后在vite.config.ts文件中进行配置：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
import AutoImport from "unplugin-auto-import/vite";
export default defineConfig({
plugins: [
AutoImport({
imports: ['vue'],
})
]
})
|
UI配置
我这里使用的是element-plus，按照文档进行配置就可以了。
首先先安装element-plus:
1
2
3
| yarn add element-plus
npm install element-plus
|
引入可以选择完整引入和按需引入，我这里选择的是按需引入，用的是自动导入，需要安装unplugin-vue-components 和 unplugin-auto-import：
1
2
3
| yarn add npm install -D unplugin-vue-components unplugin-auto-import
npm install unplugin-vue-components unplugin-auto-import
|
然后在vite.config.ts中进行配置：
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
|
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports: ['vue'],
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
resolve: {
alias: {
"@": path.resolve(__dirname, "src"),
},
},
});
|
然后按照文档，在页面中使用组件就可以了。除此之外，有个特别注意的地方，如果需要使用组件 API，得手动导入样式，示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| // src/views/home/index.vue
<template>
<div>hello world!</div>
<div>姓名：{{username}}，年龄：{{age}}</div>
<el-button @click="showMessage" type="success">Success</el-button>
</template>
<script lang="ts" setup name="Home">
import storeUser from '@/store/index'
//需要手动换导入样式
import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'
const showMessage = ()=>{
ElMessage.success('test')
}
const {username,age} = storeUser()
</script>
<style scoped>
</style>
|
按需引入icon
axios配置
