如何使用Vue3+Vite+TS快速搭建一套實用的腳手架
前言
Vue3出瞭已經有一段時間瞭,之前做的項目基本都是Vue2+webpack做的,正好現在馬上要接一個新的項目,先手擼一套腳手架試試水~
技術棧
- 開發工具:VSCode
- 代碼管理:Git
- 前端框架:Vue3
- 構建工具:Vite
- 路由:vue-router 4x
- 狀態管理:vuex 4x
- AJAX:axios
- UI庫:element-plus
- 數據模擬:mockjs
- 代碼規范:eslint
- 代碼格式化:Prettier
- css預處理:sass
開始構建
1. 初始化項目
安裝vite:
npm init vite@latest
安裝完成後vite會引導我們創建一個項目,輸入項目名稱,package名稱,然後選擇項目使用的框架,這裡有多個選項,我們自然是選擇Vue:
之後提示選擇vue還是vue-ts,這裡我們選擇vue-ts(如果不用ts就直接選vue)
項目創建成功,打開項目並初始化:
cd vite-cloud-admin npm install
成功後運行項目:
npm run dev
一個Vue3+Vite+TS的項目就創建成功瞭:
2. 代碼校驗
首先安裝eslint:
npm i eslint
初始化eslint
npx eslint --init
然後會問我們如何使用eslint,選擇第三項,檢查語法、發現問題並強制執行代碼樣式
什麼樣子的模塊引入方式,這裡選擇第一項,import/export
然後問我們用什麼框架,這裡選擇Vue.js
是否使用TS,YES
代碼運行在哪裡,選擇瀏覽器
然後問我們使用什麼代碼格式,這裡我們選擇流行代碼格式中的Standard
選擇eslintrc文件的格式,這裡選擇JavaScript
立即初始化,YES
這樣我們的eslint就安裝完成瞭,不過由於vue3的語法規則和vue2不同,有些情況下我們的正常開發也會報錯,所以需要在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
然後在根目錄創建.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插件,實現保存自動格式化文件。
完成後保存文件發現報錯瞭,這是因為Prettier格式化後的代碼與eslint規范沖突,這裡我們使用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.配置狀態管理器
首先安裝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發送事件完成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
文件夾,然後在其下創建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文件夾,創建一個user.ts文件,並創建一個登錄的請求:
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) }) })
當然,現在還調不通,所以我們先配置下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
結語
好瞭,至此我們的腳手架就搭建完成瞭,之後就可以直接在這個腳手架上寫業務代碼瞭,我這裡有個開源項目,實現瞭一個admin系統的基本功能,大傢不嫌棄的話可以拉取下來看看,也可以直接在上面的基礎上寫代碼:vue-cloud-admin
到此這篇關於如何使用Vue3+Vite+TS快速搭建一套實用的腳手架的文章就介紹到這瞭,更多相關Vue3+Vite+TS搭建腳手架內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 使用vue3.x+vite+element-ui+vue-router+vuex+axios搭建項目
- Vue項目中token驗證登錄(前端部分)
- vue+tp5實現簡單登錄功能
- Vue3.x最小原型系統講解
- vite+vue3.0+ts+element-plus快速搭建項目的實現