文章所用技术栈：vite + vue3 + typescript + sass + vue-router + pinia + axios + ant Design Vue

创建vue3项目

1
npm create vite@latest

输入项目名称

选择框架，按上下键选择vue

选择ts

执行提示的三条命令

ok 框架已经搭建好了

安装sass

使用的vite，它对sass、less、scss等文件都内置支持，所以我们只需要安装预处理器依赖就行

安装

1
npm install scss -D

安装vue-router

1
npm install vue-router

创建/src/router/index.ts并编写如下内容

不要忘记创建路由对应文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { createRouter,createWebHashHistory } from "vue-router";
let routes= [
    {
        path: '/',
        name: 'home',
        component: () => import('../views/Home/index.vue')
    },
    {
        // 配置404页面
        path: '/:pathMatch(.*)',
        name: '404',
        component: () => import('../views/404/index.vue'),
    }
]
const router = createRouter({
    history: createWebHashHistory(),
    routes
})
export default router

修改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';

const app = createApp(App);
app.use(router)
app.mount('#app')

修改App.vue文件使用router-view组件

1
2
3
4
5
6
7
8
9
10
<script setup lang="ts">

</script>

<template>
  <RouterView></RouterView>
</template>

<style scoped>
</style>

安装pinia

1
npm install pinia

创建/src/store/counter.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
30
31
32
33
34
import { defineStore } from "pinia";;
export const useCounter = defineStore('counter', {
	// 相当于data
	state: () => {
		return {
			// 会自动推断其类型
			counter: 0,
		}
	},
	// 相当于计算属性
	getters: {
		doubleCount: (state) => {
			return state.counter * 2
		},
	},
	// 相当于vuex的 mutation + action，可以同时写同步和异步的代码
	actions: {
		add(num:number) {
			this.counter+=num;
		},
		asyncAdd(num:number) {
			return new Promise((resolve, reject) => {
				setTimeout(() => {
					try {
						this.counter += num;
						resolve('成功')
					} catch (e) {
						reject(e);
					}
				}, 1000)
			})
		}
	}
})

修改main.ts文件引入

1
2
3
4
5
6
7
8
9
10
11
import { createApp } from 'vue'
import './style.css'
import App from './App.vue';
import router from './router';
import { createPinia } from 'pinia' 

const pinia = createPinia()

const app = createApp(App);
app.use(router).use(pinia);
app.mount('#app')

**修改创建的/src/views/Home/index.vue **pinia使用

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<template>
  <div class="">
    Home<br />
    <div>
      count:{{ counter }}
    </div>
    <div>
      <input @click="count.add(1)" type="button" value="增加">
      <input @click="count.asyncAdd(2)" type="button" value="异步增加">
    </div>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';

//引入想要的使用的pinia
import { useCounter } from '../../store/counter';
import { watch } from 'vue';
const count = useCounter();

// 解构main里面的state和getters的数据，
// 使用storeToRefs解构才有响应式，响应式可以直接修改数据
let { counter, doubleCount } = storeToRefs(count);
watch(counter, () => {
  console.log(doubleCount.value);
})

//  修改数据
setTimeout(() => {
  counter.value++;
}, 2000)
// 使用方法
count.add(1)
// 获取数据
console.log(counter.value);
// 使用$patch，多个修改
count.$patch((state) => {
  state.counter++;
  // state.什么什么 = 什么
})

// $onAction函数接受一个回调函数，该回调函数内部的代码会先于actions函数调用前执行
count.$onAction(({
  name,
  store,
  args,
  after,
  onError
}) => {
  console.log({ name, store, args, after, onError })
})
</script>

<style scoped></style>

安装pinia-plugin-persistedstate 实现数据持久化

1
npm i pinia-plugin-persistedstate

修改main.ts文件

1
2
3
4
5
6
7
8
9
10
11
12
import { createApp } from 'vue'
import './style.css'
import App from './App.vue';
import router from './router';
import { createPinia } from 'pinia' 
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
const app = createApp(App);
app.use(router).use(pinia);
app.mount('#app')

修改/src/store/counter.ts 添加参数

1
persist: true

pinia-plugin-persistedstate详细使用->pinia-plugin-persistedstate

安装axios

1
npm install axios

ts+vue封装axios

配置路径别名

修改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 { resolve } from "path";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
      // ↓解析配置
    resolve: {
      // ↓路径别名
      alias: {
        "@": resolve(__dirname, "./src")
      }
    }
})

修改tsconfig.json

1
2
3
4
5
6
7
8
9
{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

安装 Ant Design Vue

1
npm i ant-design-vue @ant-design/icons-vue -S

安装就好 引入的事情交给自动引入吧

自动导入

受够每次都要引入 ref、watch….等等了吧 哈哈哈哈 看看尤大推荐的插件吧，摆脱手动引入
vue3自动导入Api、组件