1.vite+TS+Vue3

npm create  vite
Project name:... yourProjectName
Select a framework:>>Vue
Select a variant:>>Typescrit

2. 修改vite基本配置

配置 Vite {#configuring-vite} | Vite中文網 (vitejs.cn)

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path';   // 編輯器提示 path 模塊找不到，可以cnpm i @types/node --dev 即可// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],     // 默認配置resolve: {alias: {'@': resolve(__dirname, 'src')    // 配置別名；將 @ 指向'src'目錄}},server: {port: 3000,       // 設置服務啟動的端口號；如果端口已經被使用，Vite 會自動嘗試下一個可用的端口open: true,       // 服務啟動后自動打開瀏覽器proxy: {          // 代理'/api': {target: '真實接口服務地址',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')     // 注意代理地址的重寫},// 可配置多個... }}
})

3.安裝vue-router

cnpm install vue-router@4 --save

創建src/router/index.ts文件，使用路由懶加載，優化訪問性能。

import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from 'vue-router'const routes: Array<RouteRecordRaw> = [{path: '/',name: 'Home',component: () => import('@/views/home.vue') // 建議進行路由懶加載，優化訪問性能},{path: '/about',name: 'About',component: () => import('@/views/about.vue')}
]const router = createRouter({// history: createWebHistory(),    // 使用history模式history: createWebHashHistory(),	 // 使用hash模式routes
})export default router

main.ts?里面引入router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'createApp(App).use(router).mount('#app')

在App.vue?文件中使用router-view?組件，路由匹配到組件會通過router-view?組件進行渲染。

<template><div id="nav"><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></div><router-view />
<template>

4.安裝vuex 安裝pinia

npm install vuex@next --save創建src/store/index.ts文件。

import { createStore } from 'vuex'const defaultState = {count: 0
}
const store = createStore({state () {return {count: 10}},mutations: {increment (state: typeof defaultState) {state.count++}}
})
export default store;

main.ts?里面引入vuex

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/index'const app = createApp(App);// 將store、router掛載到全局變量上, 方便使用
import { useStore } from "vuex";
import { useRoute } from "vue-router";
app.config.globalProperties.$store = useStore();
app.config.globalProperties.$router = useRoute();app.use(router).use(store).mount('#app')

<template><div>首頁 {{count}}<p @click="handleSkip">點我</p></div>
</template><script>
import { getCurrentInstance, computed, ref } from 'vue';
export default {name: 'Home',setup() {const { proxy } = getCurrentInstance();// 使用storeconst count = computed(() => proxy.$store.state.count);const handleSkip = () => {// 使用routerproxy.$router.push('/about');}return {count: ref(count),handleSkip}}
}
</script>

pinia

yarn add pinia
# 或者使用 npm
npm install pinia

main.ts

import { createApp } from 'vue'
import './style.css'
import router from './router'
import { createPinia } from 'pinia'
import App from './App.vue'createApp(App).use(router).use(createPinia()).mount('#app')

@/store/counter.ts

import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => ({ count: 0 }),getters: {double: (state) => state.count * 2,},actions: {increment() {this.count++},},
})

Home.vue

<template><div><p>home</p><button @click="increment">count:{{count}};double:{{double}}</button></div>
</template><script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useCounterStore } from '../store/counter';
const counter = useCounterStore()const {count, double}  = storeToRefs(counter)//這樣才是響應式的
const {increment } = counter
</script><style scoped></style>

5.安裝 UI庫

1.Element UI Plus

一個 Vue 3 UI 框架 | Element Plus

NPM

$ npm install element-plus --save

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')

volar插件支持 獲取對Element UI Plus 的提示 需要在tsconfig.json做如下設置

新增"types": ["element-plus/global"]

{"compilerOptions": {// ..."types": ["element-plus/global"]}
}

2.Ant Design Vue

Ant Design of Vue - Ant Design Vue (antdv.com)

$ npm install ant-design-vue@next --save
$ yarn add ant-design-vue@next

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';const app = createApp(App);app.use(Antd).mount('#app');

3.Iview

npm install view-ui-plus --save

import { createApp } from 'vue'
import ViewUIPlus from 'view-ui-plus'
import App from './App.vue'
import router from './router'
import store from './store'
import 'view-ui-plus/dist/styles/viewuiplus.css'const app = createApp(App)app.use(store).use(router).use(ViewUIPlus).mount('#app')

4.Vant 移動端

npm i vant -S

import Vant from 'vant'
import 'vant/lib/index.css';
createApp(App).use(Vant).$mount('#app)

6.安裝axios

npm install axios --save

封裝公共請求方法

新建工具類?src/utils/request.ts

import axios from 'axios'interface ApiConfig {body: object;data: object
}async function request(url: string, options: ApiConfig) {// 創建 axios 實例const service = axios.create({baseURL: "", // api base_urltimeout: 6000 // 請求超時時間});// 請求攔截service.interceptors.request.use(config => {// 這里可設置請求頭等信息if (options && options.body) {config.data = options.body;}return config;});// 返回攔截service.interceptors.response.use(response => {// 這里可進行返回數據的格式化等操作return response.data;});return service(url, options);
}
export default request;

使用方法

<script>
import request from "@/utils/request.ts"export default {setup() {request('/api/getNewsList').then(res => {console.log(res);// to do...});}
}
</script>

7.安裝mockjs

安裝

mock?模擬數據我們選用?mockjs?插件，vite?中需要安裝?vite-plugin-mock?插件。

npm install mockjs --savenpm install vite-plugin-mock --save-dev

vite.config.ts?中引用插件

import { viteMockServe } from 'vite-plugin-mock'export default defineConfig({plugins: [vue(),viteMockServe({supportTs: true,mockPath: './src/mock'})],   
})

使用mock

新建文件src/mock/index.ts，編寫一下代碼：

import { MockMethod } from 'vite-plugin-mock'
export default [{url: '/api/getNewsList',method: 'get',response: () => {return {code: 0,message: 'success',data: [{title: '標題111',content: '內容1111'},{title: '標題222',content: '內容2222'}]}}},// more...
] as MockMethod[]

然后我們就可以在工程中進行?mock?數據的訪問了，這里我們使用之前創建公共 api 請求方法 request。

<script>
import request from "@/utils/request.ts"export default {setup() {request('/api/getNewsList').then(res => {console.log(res);// to do...});}
}
</script>