使用Vite+Vue3+TypeScript?搭建開發(fā)腳手架的詳細過程
更新時間：2023年02月03日 10:25:47 作者：qq_41315539
這篇文章主要介紹了Vite+Vue3+TypeScript?搭建開發(fā)腳手架的詳細過程，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
Vite前端開發(fā)與構(gòu)建工具
開發(fā)環(huán)境中，vite無需打包，可快速的冷啟動
真正的按需編譯，不需要等待整個應(yīng)用編譯完成
一個開發(fā)服務(wù)器，它基于原生ES模塊 提供了豐富的內(nèi)建功能，速度快模塊熱更新（HMR）
一套構(gòu)建指令，它使用Rollup打包代碼，并且它是預(yù)配置的，可輸出用于生產(chǎn)環(huán)境的高度優(yōu)化過的靜態(tài)資源。
Vue3 與 Vue2區(qū)別
Vue2 使用 Options API 而 Vue3 使用的 Composition API
TypeScript
在應(yīng)用中對類型判斷的定義和使用有很強的表現(xiàn)。同一對象的多個鍵返回值必須通過定義對應(yīng)的接口（interface）來進行類型定義。要不然在 ESLint 時都會報錯
使用Vite創(chuàng)建腳手架
注意：Vite 需要 Node.js 版本 >= 12.0.0
1、創(chuàng)建項目文件夾
例如：想在workSpace文件下創(chuàng)建 my-vue-app，則先進入workplace文件夾，再打開cmd，運行一下命令
# npm 6.x npm init vite@latest my-vue-app --template vue # npm 7+, 需要額外的雙橫線： npm init vite@latest my-vue-app -- --template vue
2、選擇Vue
3、選擇TypeScript
4、完成后可以看到項目文件夾（my-vue-app)
然后根據(jù)指令，進入文件夾，安裝依賴，運行項目
完成后效果
配置文件引用別名 alias
修改 vite.config.ts 文件配置（此時：會報錯 path 未定義，接下來定義path）
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
// 配置文件引用別名 alias
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
})定義path，修改tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"moduleResolution": "Node",
"strict": true,
"jsx": "preserve",
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["ESNext", "DOM"],
"skipLibCheck": true,
"noEmit": true,
"baseUrl": ".",
"paths": {
"@/*":["src/*"] // 未設(shè)置 "baseUrl" 時，不允許使用非相對路徑。是否忘記了前導(dǎo) "./"，所以添加一個baseUrl
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}安裝css處理器插件scss
npm install sass-loader sass webpack --save-dev 或yarn add sass-loader --dev npm i dart-sass 或yarn add dart-sass --dev npm i npm-sass 或yarn add sass --dev
配置全局scss樣式（在src/assets 下創(chuàng)建style 文件夾，用于存放全局樣式文件，創(chuàng)建main.scss文件，用于測試）
$test-color: rgb(255, 0, 60);
在組件 HelloWorld.vue文件中 添加測試元素與綁定測試樣式
僅僅這樣會編譯報錯，還需要在vite.config.ts 中增加 全局樣式配置
// 全局配置 樣式變量
css:{
preprocessorOptions:{
scss:{
additionalData:'@import "@/assets/style/main.scss";'
}
}
},完整配置如下圖
效果圖片
安裝路由 vue-router
npm i vue-router yarn add vue-router@4
在src 文件夾下 創(chuàng)建 router 文件夾 -》并新建router.ts 文件，文件內(nèi)容如下
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
const routes: RouteRecordRaw[] = [
{
path: '/home',
name: 'home',
component: () => import('@/views/Home/index.vue'), //可能問題1 注意這里要帶上 文件后綴.vue
},
{
path: '/',
name: 'helloWorld',
component: () => import('@/components/HelloWorld.vue'), //可能問題1 注意這里要帶上 文件后綴.vue
},
{
path: '/helloWorld',
name: 'helloWorld',
component: () => import('@/components/HelloWorld.vue'), //可能問題1 注意這里要帶上 文件后綴.vue
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;新建頁面：在src 文件夾下創(chuàng)建 views文件夾-》創(chuàng)建 home 文件夾-》創(chuàng)建 index.vue 文件，文件內(nèi)容如下
<template>
<h1>這是 home 頁</h1>
<router-link :to="{path:'/helloWorld'}">跳轉(zhuǎn)到helloWord(router-link)</router-link>
<br/>
<button @click="goHelloWordPage">跳轉(zhuǎn)到 helloWord(js_function)</button>
</template>
<script setup lang="ts">
import {useRouter} from 'vue-router'
// 2. 調(diào)用useRouter函數(shù)
const $r = useRouter();
const goHelloWordPage = () =>{
$r.push("helloWorld")
}
</script>在入口文件main.ts 中 配置路由
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from '@/router/router'
const app = createApp(App)
app.use(router)
app.mount('#app')
//createApp(App).mount('#app')注意：配置完成后發(fā)現(xiàn) 瀏覽器地址欄：http://127.0.0.1:5174/home 無法跳轉(zhuǎn)，需要在App.vue中配置路由容器，原有的template 替換為 一下內(nèi)容
<template>
<!-- <h1>這是 主容器</h1> -->
<router-view></router-view>
</template>狀態(tài)管理 Pinia
安裝
npm i pinia yarn add pinia@next
在main.ts 中注冊 pinia
// 導(dǎo)入組件
import { createPinia } from "pinia"
# 創(chuàng)建根存儲庫并將其傳遞給應(yīng)用程序
app.use(createPinia())
定義狀態(tài)：在src文件夾下 創(chuàng)建store文件夾-》創(chuàng)建main.ts文件，文件內(nèi)容如下
import { defineStore } from 'pinia'
export const useMainStore = defineStore({
id: 'main',
state: () =>({
name: '群主'
}),
getters: {
nameLength: (state) => state.name.length,
}
})組件中使用與修改：
<template>
<div>這是狀態(tài)管理Pinia：{{ mainStore.name }}<br />長度:{{ mainStore.nameLength }}</div>
<button @click="updateName">修改 store 中的 name</button>
</template>
<script setup lang="ts">
import { useMainStore } from "@/store/main";
const mainStore = useMainStore()
const updateName = () => {
// $patch 修改 store 中的數(shù)據(jù)
mainStore.$patch({
name: "名稱被修改了,nameLength也隨之改變了",
});
};
</script>例如在 home->index.vue 中使用
<template>
<h1>這是 home 頁</h1>
<router-link :to="{path:'/helloWorld'}">跳轉(zhuǎn)到helloWord(router-link)</router-link>
<button @click="goHelloWordPage">跳轉(zhuǎn)到 helloWord(js_function)</button>
<div>這是狀態(tài)管理Pinia：{{ mainStore.name }}<br />長度:{{ mainStore.nameLength }}</div>
<button @click="updateName">修改 store 中的 name</button>
</template>
<script setup lang="ts">
import {useRouter} from 'vue-router'
import { useMainStore } from "@/store/main";
const mainStore = useMainStore()
const updateName = () => {
// $patch 修改 store 中的數(shù)據(jù)
mainStore.$patch({
name: "名稱被修改了,nameLength也隨之改變了",
});
};
// 2. 調(diào)用useRouter函數(shù)
const $r = useRouter();
const goHelloWordPage = () =>{
$r.push("helloWorld")
}
</script>環(huán)境變量配置
vite提供了開發(fā)模式（development）和生產(chǎn)模式（product）
項目根目錄創(chuàng)建開發(fā)環(huán)境 .enc.dev 文件，文件內(nèi)容如下
NODE_ENV=development VITE_APP_WEB_URL= 'https://www.baidu.com'
項目根目錄創(chuàng)建生產(chǎn)環(huán)境 .enc.prod 文件，文件內(nèi)容如下
NODE_ENV=production VITE_APP_WEB_URL='https://www.goole.com'
使用：在views->home->index.vue 中 添加
<template>
<p>當前環(huán)境：{{ env.NODE_ENV }}</p>
</template>
<script setup lang="ts">
const env = import.meta.env
</script>最后修改 pacakge.json 生效
"scripts": {
"dev": "vite --mode dev",
"dev:prod": "vite --mode prod",
"build": "vue-tsc && vite build",
"build:dev": "vue-tsc --noEmit && vite build --mode dev",
"build:uat": "vue-tsc --noEmit && vite build --mode uat",
"build:prod": "vue-tsc --noEmit && vite build --mode prod",
"preview": "vite preview"
},啟動項目時：
npm run dev
npm run dev:prod
不同的啟動方式，環(huán)境變量值不同
到此這篇關(guān)于Vite+Vue3+TypeScript 搭建開發(fā)腳手架的文章就介紹到這了,更多相關(guān)Vite+Vue3+TypeScript 搭建腳手架內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了ant design vue中表格指定格式渲染方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了Vue中的全局指令防止按鈕重復(fù)點擊，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要給大家介紹了關(guān)于vue3中如何使用d3.js繪制流程圖的相關(guān)資料,D3.js是由javaScript語言編寫繪圖庫,其原理是通過調(diào)用一系列內(nèi)置函數(shù),生成SVG,并在網(wǎng)頁渲染,需要的朋友可以參考下2023-10-10
Vue中的無限加載vue-infinite-loading的方法
本篇文章主要介紹了Vue中的無限加載vue-infinite-loading的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了Vue3.x最小原型系統(tǒng)講解。既然用Vue3.0構(gòu)建最小原型系統(tǒng)，那么肯定要用尤大的最新構(gòu)建工具Vite來進行項目的初始化，下文舉例說明,需要的朋友可以參考一下2022-02-02
這篇文章主要介紹了關(guān)于Vue v-on指令的一些使用場景，比如監(jiān)聽事件、傳入event參數(shù)、事件修飾符的一些場景，下面就來看看具體使用的方法吧,需要的朋友可以參考一下2021-10-10
vxe-list?vue?如何實現(xiàn)下拉框的虛擬列表
這篇文章主要介紹了vxe-list?vue?如何實現(xiàn)下拉框的虛擬列表，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了graphQL在前端vue中使用過程,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
Vue?組件通信是前端開發(fā)核心知識點,不同組件層級對應(yīng)不同的通信方案,本文將按基礎(chǔ)場景,進階場景,特殊場景進行系統(tǒng)梳理,希望對大家有所幫助2026-04-04
Vue路由傳遞參數(shù)與重定向的使用方法總結(jié)
路由的本質(zhì)就是一種對應(yīng)關(guān)系,比如說我們在url地址中輸入我們要訪問的url地址之后,瀏覽器要去請求這個url地址對應(yīng)的資源,下面這篇文章主要給大家介紹了關(guān)于Vue路由傳遞參數(shù)與重定向的使用方法,需要的朋友可以參考下2022-10-10