1、vite项目初始化
我们使用vite来初始化项目，记得初始化的过程选择vue-ts哟，这样我们就能引入ts，后面不用额外单独对他引入
npm init vite@latest
2、vite 配置
配置别名@
（1）安装node依赖
npm i --save-dev @types/node
（2）引入node模块
tsconfig.json
{
"compilerOptions": {
...(省略配置)
"types": ["node"]
},
"include": ...(省略配置)
}
（3）配置@别名
import { defineConfig } from 'vite'
import path from 'path'
export default defineConfig({
...(省略配置)
resolve:{
alias:{
'@':path.resolve(__dirname,'src')
}
}
})
（4）使用
app.vue
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
</template>
<script setup lang="ts">
import HelloWorld from '@/components/HelloWorld.vue'
</script>
vite 的配置项很多，具体的小伙伴可以到vite官网去看一下https://vitejs.dev/config/，这次我们就配置一下别名。这个别名@的配置有一个小小的坑，也不算是坑，就是要引入path的时候会报错，这可能是我自己对这个不熟，又没有认真看这个提示，就花了点时间才解决这个问题。下面就是解决方案及具体可以看我另外一篇文章。
使用import方式引入的报错提示
image.png
使用require方式引入path的报错提示
image.png
解决方案：
(1)安装node依赖
npm i --save-dev @types/node
(2)配置node模块
在ts.config.js中添加配置"types": ["node"]
image.png
（3）配置别名
resolve:{
alias:{
'@':path.resolve(__dirname,'src')
}
}
image.png
3、引入sass
（1）安装依赖
npm install --save-dev sass
（2）使用
<style scoped lang="scss">
.box{
a{
color: red;
}
}
</style>
4、引入ui库
在src目录下创建plugins文件夹，再新建一个element3.ts,用于存放ui库引入的配置
（1）安装依赖
npm i element3 -S
（2）全局引入
src/plugins/element3.ts
import element3 from 'element3'
import 'element3/lib/theme-chalk/index.css'
export default function (app){
app.use(element3)
}
main.ts
import element3 from "./plugins/element3";
createApp(App).use(element3).mount('#app')
（3）按需引入
src/plugins/element3.ts
import {ElButton,ElInput} from 'element3'
import 'element3/lib/theme-chalk/button.css'
import 'element3/lib/theme-chalk/input.css'
export default function (app){
app.use(ElButton)
app.use(ElInput)
}
main.ts
import element3 from "./plugins/element3";
createApp(App).use(element3).mount('#app')
5、引入vue-router
（1）安装依赖
npm i vue-router@next -S
（2）编写路由配置
src/router/index.ts
import { createRouter,createWebHashHistory } from 'vue-router'
const router = createRouter({
history:createWebHashHistory(),
routes:[
{
path:'/',
component:()=> import('../views/home.vue')
}
]
})
export default router
（3）引入
...
import router from "./router";
createApp(App).use(router).mount('#app')
（4）使用
src/views/home.vue
<template>
<div>
<HelloWorld msg="国庆快乐！"></HelloWorld>
</div>
</template>
<script setup>
import HelloWorld from '@/components/HelloWorld.vue'
</script>
<style scoped>
</style>
App.vue
<template>
<router-view></router-view>
</template>
6、引入vuex
（1）安装依赖
npm i vuex@next -S
（2）编写vuex属性
src/store/index
import { createStore } from 'vuex'
export default createStore({
state:{
count:10
},
mutations:{
add(state){
state.count++
}
}
})
（3）引入
import store from './store'
createApp(App).use(store).mount('#app')
（4）使用
HelloWord.vue
<span @click="$store.commit('add')">{{$store.state.count}}</span>
7、引入mock
1、安装依赖
npm i mockjs -S
npm i vite-plugin-mock -D
2、配置依赖
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig({
plugins: [...,viteMockServe()],
})
3、编写mock接口
在根目录新建mock文件夹，新建user.ts文件
export default [
{
url: '/api/getUsers',
method: 'get',
response: () => {
return {
code: 0,
message: 'ok',
data: ['Amy','Tim']
}
},
},
]
4、调用接口
Helloworld.vue
fetch('/api/getUsers').then(res=>res.json()).then(data=>{
console.log(data)
})
5、配置启动项(可选)
安装依赖
cnpm i cross-env -D
配置(package.json)
"dev": "cross-env NODE_ENV=development vite"
