使用Vite搭建
Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依賴(lài)更高的 Node 版本才能正常運(yùn)行，當(dāng)你的包管理器發(fā)出警告時(shí)，請(qǐng)注意升級(jí)你的 Node 版本。
首先 npm 輸入：
npm create vite@latest
Project name：項(xiàng)目名稱(chēng)Select a framework：選擇一個(gè)框架Select a variant：選擇 ts 或者 js
輸入項(xiàng)目名稱(chēng)后選擇 vue 選擇 ts 后 cd 進(jìn)入目錄 npm install 安裝依賴(lài)后，npm run dev 運(yùn)行。
項(xiàng)目目錄
與webpack搭建的是有些區(qū)別的，首先多了ts的配置文件，以及vite的配置文件vite.config.ts,還有vite呢?fù)碛懈玫拇虬幾g性能。
這塊可以看下使用webpack和vite搭建的區(qū)別
使用Vite創(chuàng)建的項(xiàng)目是沒(méi)有配置Vuex（或者用Pinia）、VueRouter、Sass的，需要我們手動(dòng)配置，我們可以看下package.json文件只有vite 、vue、ts等依賴(lài)。
配置Router
1、 首先，安裝 Vue Router：
npm install vue-router@next
2、 在項(xiàng)目的根目錄下創(chuàng)建一個(gè)新的目錄，比如 src/router。
3、 在 src/router 目錄下創(chuàng)建一個(gè)新的文件，比如 index.ts，并在其中配置路由：
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
const routes: Array<RouteRecordRaw> = [
{
path:'/',
name: 'index',
component: () => import('../views/index.vue'),
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
4、 在 src/main.ts 中導(dǎo)入并使用路由：
import { createApp } from 'vue'
import router from './router';
import './style.css'
import App from './App.vue'
createApp(App).use(router).mount('#app')
這樣就成功配置了 Vue Router，并創(chuàng)建了一個(gè)簡(jiǎn)單的路由。
配置 Element-Plus
Element-Plus
首先安裝依賴(lài)：
npm install element-plus --save
在main.ts中引入element-plus
import { createApp } from 'vue'
import router from './router';
import ElementPlus from 'element-plus' // element-plus
import 'element-plus/dist/index.css' // element-plus
import './style.css'
import App from './App.vue'
createApp(App).use(router).use(ElementPlus).mount('#app')
配置sass
首先安裝依賴(lài)：
npm install sass sass-loader
使用
<style scoped lang="scss"></style>
配置Pinia
Pinia 與 Vuex 的比較
Pinia 最初是為了探索 Vuex 的下一次迭代會(huì)是什么樣子，結(jié)合了 Vuex 5 核心團(tuán)隊(duì)討論中的許多想法。最終，我們意識(shí)到 Pinia 已經(jīng)實(shí)現(xiàn)了我們?cè)?Vuex 5 中想要的大部分內(nèi)容，并決定實(shí)現(xiàn)它 取而代之的是新的建議。
與 Vuex 相比，Pinia 提供了一個(gè)更簡(jiǎn)單的 API，具有更少的規(guī)范，提供了 Composition-API 風(fēng)格的 API，最重要的是，在與 TypeScript 一起使用時(shí)具有可靠的類(lèi)型推斷支持。
1、首先安裝依賴(lài)
npm install pinia
2、在項(xiàng)目的根目錄下創(chuàng)建一個(gè)新的目錄，比如 src/store。
3、在 src/store 目錄下創(chuàng)建一個(gè)新的文件，比如 index.ts，用于配置和創(chuàng)建 Pinia
import { defineStore } from 'pinia';
// 創(chuàng)建 Pinia Store
export const dataStore = defineStore('dataStore', {
state: () => {
return {
msg: 'hello pinia'
}
},
});
4、在 src/main.ts 中導(dǎo)入并使用 Pinia：
import { createApp } from 'vue'
import router from './router';
import { createPinia } from 'pinia' // pinia
const pinia = createPinia() // pinia
import ElementPlus from 'element-plus' // element-plus
import 'element-plus/dist/index.css' // element-plus
import './style.css'
import App from './App.vue'
createApp(App).use(router).use(ElementPlus).use(pinia).mount('#app')
5、在Vue 組件中，可以使用 dataStore 函數(shù)來(lái)訪問(wèn)和操作 Pinia Store。
<script setup lang="ts">
import {dataStore} from './store'
let store = dataStore()
console.log(store.msg)
</script>
6、訪問(wèn)state
在組件中首先引入：
import {dataStore} from './store'
let store = dataStore()
store.變量名的形式訪問(wèn)
7、訪問(wèn)getters
getter 完全等同于 Store 狀態(tài)的 計(jì)算值。 它們可以用 defineStore() 中的 getters 屬性定義。 他們接收“狀態(tài)”作為第一個(gè)參數(shù)以鼓勵(lì)箭頭函數(shù)的使用：
import { defineStore } from 'pinia';
// 創(chuàng)建 Pinia Store
export const dataStore = defineStore('dataStore', {
state: () => {
return {
msg: 'hello pinia',
num: 0
}
},
getters:{
addNum():number{
return this.num+10
}
}
});
<script setup lang="ts">
import {dataStore} from './store'
let store = dataStore()
console.log(store.msg) // 訪問(wèn)store中state變量
console.log(store.addNum) // 訪問(wèn)store中g(shù)etters計(jì)算屬性
</script>
8、getters如何傳值？
getters 只是幕后的 computed 屬性，因此無(wú)法向它們傳遞任何參數(shù)。 但是，可以從 getter 返回一個(gè)函數(shù)以接受任何參數(shù)：
import { defineStore } from 'pinia';
// 創(chuàng)建 Pinia Store
export const dataStore = defineStore('dataStore', {
state: () => {
return {
msg: 'hello pinia',
num: 0
}
},
getters:{
addNum():number{
return this.num+10
},
addNum2(){
return (number:number) => this.num + number
}
}
});
<script setup lang="ts">
import {dataStore} from './store'
let store = dataStore()
console.log(store.msg) // 訪問(wèn)store中state變量
console.log(store.addNum) // 訪問(wèn)store中g(shù)etters計(jì)算屬性
console.log(store.addNum2(100)) // 訪問(wèn)store中g(shù)etters計(jì)算屬性并傳值
</script>
9、Actions
相當(dāng)于組件中的 methods。 它們可以使用 defineStore() 中的 actions 屬性定義，并且它們非常適合定義業(yè)務(wù)邏輯：
import { defineStore } from 'pinia';
// 創(chuàng)建 Pinia Store
export const dataStore = defineStore('dataStore', {
state: () => {
return {
msg: 'hello pinia',
num: 0
}
},
getters:{
addNum():number{
return this.num+10
},
addNum2(){
return (number:number) => this.num + number
}
},
actions:{
actionFun(){
console.log("我是store中actions的方法")
}
}
});
<script setup lang="ts">
import {dataStore} from './store'
let store = dataStore()
console.log(store.msg) // 訪問(wèn)store中state變量
console.log(store.addNum) // 訪問(wèn)store中g(shù)etters計(jì)算屬性
console.log(store.addNum2(100)) // 訪問(wèn)store中g(shù)etters計(jì)算屬性并傳值
store.actionFun() // 調(diào)用store中actions的方法
</script>
配置解析 @ 符號(hào)，并找到對(duì)應(yīng)的路徑
在tsconfig.json中配置如下：
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* 配置解析 @ 符號(hào)，并找到對(duì)應(yīng)的路徑 */
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
在vite.config.ts配置如下：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
// 配置解析 @ 符號(hào)，并找到對(duì)應(yīng)的路徑
resolve: {
alias: {
'@': '/src',
},
}
})
TypeScript忽略類(lèi)型檢查
單行忽略(添加到忽略得哪行代碼的前一行)
// @ts-ignore
跳過(guò)對(duì)某些文件的檢查 (添加到該文件的首行)文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-493289.html
// @ts-nocheck
對(duì)某些文件的檢查(添加到要檢查文件的前一行)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-493289.html
// @ts-check
到了這里，關(guān)于使用 Vite + Vue3 + Element-Plus + Pinia + Ts 搭建 Vue3 項(xiàng)目的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
