如何使用Vue3+Vite+TS快速搭建一套實用的腳手架
前言
Vue3出了已經有一段時間了，之前做的項目基本都是Vue2+webpack做的，正好現(xiàn)在馬上要接一個新的項目，先手擼一套腳手架試試水~
技術棧
- 開發(fā)工具：VSCode
- 代碼管理：Git
- 前端框架：Vue3
- 構建工具：Vite
- 路由：vue-router 4x
- 狀態(tài)管理：vuex 4x
- AJAX：axios
- UI庫：element-plus
- 數(shù)據(jù)模擬：mockjs
- 代碼規(guī)范：eslint
- 代碼格式化：Prettier
- css預處理：sass
開始構建
1. 初始化項目
安裝vite：
npm init vite@latest
安裝完成后vite會引導我們創(chuàng)建一個項目，輸入項目名稱，package名稱，然后選擇項目使用的框架，這里有多個選項，我們自然是選擇Vue：
之后提示選擇vue還是vue-ts，這里我們選擇vue-ts（如果不用ts就直接選vue）
項目創(chuàng)建成功，打開項目并初始化：
cd vite-cloud-admin npm install
成功后運行項目：
npm run dev
一個Vue3+Vite+TS的項目就創(chuàng)建成功了：
2. 代碼校驗
首先安裝eslint：
npm i eslint
初始化eslint
npx eslint --init
然后會問我們如何使用eslint，選擇第三項，檢查語法、發(fā)現(xiàn)問題并強制執(zhí)行代碼樣式
什么樣子的模塊引入方式，這里選擇第一項，import/export
然后問我們用什么框架，這里選擇Vue.js
是否使用TS，YES
代碼運行在哪里，選擇瀏覽器
然后問我們使用什么代碼格式，這里我們選擇流行代碼格式中的Standard
選擇eslintrc文件的格式，這里選擇JavaScript
立即初始化，YES
這樣我們的eslint就安裝完成了，不過由于vue3的語法規(guī)則和vue2不同，有些情況下我們的正常開發(fā)也會報錯，所以需要在rules里面添加如下配置：
rules: {
'vue/no-multiple-template-root': 0,
'no-unused-vars': [
'error',
// we are only using this rule to check for unused arguments since TS
// catches unused variables but not args.
{ varsIgnorePattern: '.*', args: 'none' }
]
}
第一項是因為vue3允許template下面有多個標簽，第二個是script setup標簽下，定義的變量或方法如果未使用會報錯，但其實這些方法和變量可以直接在template中使用的。
3.代碼格式化
安裝prettier：
npm i prettier
然后在根目錄創(chuàng)建.prettierrc文件，配置如下
{
"semi": false,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100,
"bracketSpacing": true,
"jsxBracketSameLine": true,
"useEditorConfig": true,
"useTabs": false,
"vueIndentScriptAndStyle": true,
"arrowParens": "avoid",
"htmlWhitespaceSensitivity": "ignore",
"overrides": [
{
"files": ".prettierrc"
}
]
}
配置完成后可以在vscode安裝Prettier插件，實現(xiàn)保存自動格式化文件。
完成后保存文件發(fā)現(xiàn)報錯了，這是因為Prettier格式化后的代碼與eslint規(guī)范沖突，這里我們使用eslint-config-prettier這個插件解決這個問題，安裝插件：
npm i eslint-config-prettier -D
安裝完成后還需要在.eslintrc.js文件中加上一段配置才能生效，這里就直接把整個.eslintrc.js拷上來了：
module.exports = {
env: {
browser: true,
es2021: true
},
extends: [
'plugin:vue/essential',
'standard',
'prettier' // 就是這段配置
],
parserOptions: {
ecmaVersion: 'latest',
parser: '@typescript-eslint/parser',
sourceType: 'module'
},
plugins: [
'vue',
'@typescript-eslint'
],
rules: {
'vue/no-multiple-template-root': 0,
'no-unused-vars': [
'error',
// we are only using this rule to check for unused arguments since TS
// catches unused variables but not args.
{ varsIgnorePattern: '.*', args: 'none' }
]
}
}
至此，代碼格式化及校驗就完成了。
4.配置路由
直接安裝vue-router
npm install vue-router@4
在src文件夾下新建router目錄，并在目錄下新建index.ts文件，并做如下配置：
// index.ts
import { createRouter, createWebHashHistory } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
const routes = [{ path: '/', component: HelloWorld }]
export default createRouter({
history: createWebHashHistory(),
routes
})
在main.ts中引入該文件：
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
在App.vue里添加router-view標簽：
// App.vue
<template>
<router-view></router-view>
</template>
<script setup lang="ts"></script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
啟動下，看下是否生效：
npm run dev
因為我們在App.vue中去掉了HelloWorld組件的引入，改用router的形式，如果界面還能顯示出來，就說明配置成功了。
5.配置狀態(tài)管理器
首先安裝vuex，默認的還是3x版本，vue3是不支持的，這里需要這樣安裝：
npm install vuex@next -S
安裝完成后在src文件夾下新建store文件夾，然后新建index.ts文件：
// store/index.ts
import { createStore } from 'vuex'
const store = createStore({
state() {
return {
count: 0
}
},
mutations: {
increment(state: any) {
state.count++
}
}
})
export default store
在main.ts文件中引入store：
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')
引入完成后，我們還需要測試下有沒有生效，改寫下HelloWorld組件：
<!--HelloWorld.vue-->
<template>
<button type="button" @click="onClick">count is: {{ count }}</button>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const count = computed(() => {
return store.state.count
})
const onClick = () => {
store.commit('increment')
}
</script>
HelloWorld中引入了store，并且將store中的count掛載到頁面上，點擊按鈕向store發(fā)送事件完成count的累加，實測沒有問題，vuex安裝成功。
6.element-plus
element-ui的vue3版本，首先安裝它：
npm install element-plus --save
在main.ts中作出如下配置：
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus' // 引入element-plus
import 'element-plus/dist/index.css' // 引入element-plus的樣式
const app = createApp(App)
app.use(router)
app.use(store)
app.use(ElementPlus) // use element-plus
app.mount('#app')
然后就可以使用element-plus的組件了，比較多，使用的時候直接參照官方文檔就行。
7.封裝axios
安裝axios：
npm i axios
在src文件夾下新建utils文件夾，然后在其下創(chuàng)建request.ts文件：
import axios from 'axios'
import { ElMessage } from 'element-plus'
const instance = axios.create({
baseURL: '',
timeout: 5000
})
instance.interceptors.request.use(
config => {
return config
},
error => {
console.log(error)
return Promise.reject(error)
}
)
instance.interceptors.response.use(
response => {
const res = response.data
if (res.status !== 200) {
ElMessage({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res.data
}
},
error => {
console.log('err' + error) // for debug
ElMessage({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default instance
src下新建api文件夾，創(chuàng)建一個user.ts文件，并創(chuàng)建一個登錄的請求：
import request from '../utils/request'
export function login(data: any) {
return request({
url: '/user/login',
method: 'post',
data
})
}
然后在HelloWorld組件中onMounted中調用login接口：
import { onMounted } from 'vue'
onMounted(() => {
login({ account: 'admin', password: '123456' }).then(res => {
console.log(res)
})
})
當然，現(xiàn)在還調不通，所以我們先配置下mock。
8.mockjs
安裝mockjs：
npm i mockjs -D
在根目錄新建mock文件夾，并新建index.ts文件：
// index.ts
import Mock from 'mockjs'
// 設置攔截ajax請求的相應時間
Mock.setup({
timeout: '200-600'
})
Mock.mock('/user/login', 'post', (params: any) => {
return {
data: { token: '123' },
status: 200,
message: 'success'
}
})
export default {}
簡單設置一個login接口，讓我們能夠通過axios調通，然后在main.ts中引入mock：
import '../mock'
啟動項目：
有返回值，搞定
9.css預處理
vite是支持sass的，但是還是需要我們先安裝一下，不然會報錯：
npm install --save-dev sass
結語
好了，至此我們的腳手架就搭建完成了，之后就可以直接在這個腳手架上寫業(yè)務代碼了，我這里有個開源項目，實現(xiàn)了一個admin系統(tǒng)的基本功能，大家不嫌棄的話可以拉取下來看看，也可以直接在上面的基礎上寫代碼：vue-cloud-admin
到此這篇關于如何使用Vue3+Vite+TS快速搭建一套實用的腳手架的文章就介紹到這了,更多相關Vue3+Vite+TS搭建腳手架內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
- 如何搭建一個完整的Vue3.0+ts的項目步驟
- vite+vue3.0+ts+element-plus快速搭建項目的實現(xiàn)
- Vue3+script setup+ts+Vite+Volar搭建項目
- 一個基于vue3+ts+vite項目搭建初探
- 從零搭建一個vite+vue3+ts規(guī)范基礎項目(搭建過程問題小結)
- Vue3+TS+Vite+NaiveUI搭建一個項目骨架實現(xiàn)
- 一步步帶你用vite簡單搭建ts+vue3全家桶
- 使用Vite搭建vue3+TS項目的實現(xiàn)步驟
- vue3+ts+vite+electron搭建桌面應用的過程
- vue3+ts項目搭建的實現(xiàn)示例
相關文章
這篇文章主要介紹了Vue 讓元素抖動/擺動起來的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要為大家介紹了Vue3?源碼分析reactive?readonly實例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要介紹了nuxtjs中如何對axios二次封裝問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本篇文章主要介紹了Vue實現(xiàn)路由跳轉和嵌套，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了vue中使用路由改瀏覽器標題和圖標，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
node+vue前后端分離實現(xiàn)登錄時使用圖片驗證碼功能
這篇文章主要介紹了node+vue前后端分離實現(xiàn)登錄時使用圖片驗證碼,記錄前端使用驗證碼登錄的過程，后端用的是node.js，關鍵模塊是svg-captcha，結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-11-11
使用element-ui的Pagination分頁的注意事項及說明
這篇文章主要介紹了使用element-ui的Pagination分頁的注意事項及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
本文主要介紹了使用ElementUI寫一個前端分頁查詢的實例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
Element UI是一個基于Vue 2.0的桌面端組件庫,旨在構建簡潔、快速的用戶界面,這篇文章主要介紹了Vue如何引入ElementUI并使用,需要的朋友可以參考下2024-06-06
解決vue中使用swiper插件問題及swiper在vue中的用法
Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。這篇文章主要介紹了解決vue中使用swiper插件及swiper在vue中的用法,需要的朋友可以參考下2018-04-04