如何使用Vue3+Vite+TS快速搭建一套實(shí)用的腳手架

更新時(shí)間：2022年10月29日 13:25:46 作者：傳說中的腿腿

Vite是一個(gè)面向現(xiàn)代瀏覽器的一個(gè)更輕、更快的?Web?應(yīng)用開發(fā)工具,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3+Vite+TS快速搭建一套實(shí)用腳手架的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

Vue3出了已經(jīng)有一段時(shí)間了，之前做的項(xiàng)目基本都是Vue2+webpack做的，正好現(xiàn)在馬上要接一個(gè)新的項(xiàng)目，先手?jǐn)]一套腳手架試試水~

技術(shù)棧

開發(fā)工具：VSCode
代碼管理：Git
前端框架：Vue3
構(gòu)建工具：Vite
路由：vue-router 4x
狀態(tài)管理：vuex 4x
AJAX：axios
UI庫：element-plus
數(shù)據(jù)模擬：mockjs
代碼規(guī)范：eslint
代碼格式化：Prettier
css預(yù)處理：sass

開始構(gòu)建

1. 初始化項(xiàng)目

安裝vite：

npm init vite@latest

安裝完成后vite會(huì)引導(dǎo)我們創(chuàng)建一個(gè)項(xiàng)目，輸入項(xiàng)目名稱，package名稱，然后選擇項(xiàng)目使用的框架，這里有多個(gè)選項(xiàng)，我們自然是選擇Vue：

之后提示選擇vue還是vue-ts，這里我們選擇vue-ts（如果不用ts就直接選vue）

項(xiàng)目創(chuàng)建成功，打開項(xiàng)目并初始化：

cd vite-cloud-admin
npm install

成功后運(yùn)行項(xiàng)目：

npm run dev

一個(gè)Vue3+Vite+TS的項(xiàng)目就創(chuàng)建成功了：

2. 代碼校驗(yàn)

首先安裝eslint：

npm i eslint

初始化eslint

npx eslint --init

然后會(huì)問我們?nèi)绾问褂胑slint，選擇第三項(xiàng)，檢查語法、發(fā)現(xiàn)問題并強(qiáng)制執(zhí)行代碼樣式

什么樣子的模塊引入方式，這里選擇第一項(xiàng)，import/export

然后問我們用什么框架，這里選擇Vue.js

是否使用TS，YES

代碼運(yùn)行在哪里，選擇瀏覽器

然后問我們使用什么代碼格式，這里我們選擇流行代碼格式中的Standard

選擇eslintrc文件的格式，這里選擇JavaScript

立即初始化，YES

這樣我們的eslint就安裝完成了，不過由于vue3的語法規(guī)則和vue2不同，有些情況下我們的正常開發(fā)也會(huì)報(bào)錯(cuò)，所以需要在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' }
    ]
  }

第一項(xiàng)是因?yàn)関ue3允許template下面有多個(gè)標(biāo)簽，第二個(gè)是script setup標(biāo)簽下，定義的變量或方法如果未使用會(huì)報(bào)錯(cuò)，但其實(shí)這些方法和變量可以直接在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插件，實(shí)現(xiàn)保存自動(dòng)格式化文件。
完成后保存文件發(fā)現(xiàn)報(bào)錯(cuò)了，這是因?yàn)镻rettier格式化后的代碼與eslint規(guī)范沖突，這里我們使用eslint-config-prettier這個(gè)插件解決這個(gè)問題，安裝插件：

npm i eslint-config-prettier -D

安裝完成后還需要在.eslintrc.js文件中加上一段配置才能生效，這里就直接把整個(gè).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' }
    ]
  }
}

至此，代碼格式化及校驗(yàn)就完成了。

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標(biāo)簽：

// 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>

啟動(dòng)下，看下是否生效：

npm run dev

因?yàn)槲覀冊(cè)贏pp.vue中去掉了HelloWorld組件的引入，改用router的形式，如果界面還能顯示出來，就說明配置成功了。

5.配置狀態(tài)管理器

首先安裝vuex，默認(rèn)的還是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掛載到頁面上，點(diǎn)擊按鈕向store發(fā)送事件完成count的累加，實(shí)測沒有問題，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的組件了，比較多，使用的時(shí)候直接參照官方文檔就行。

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)建一個(gè)user.ts文件，并創(chuàng)建一個(gè)登錄的請(qǐng)求：

import request from '../utils/request'

export function login(data: any) {
  return request({
    url: '/user/login',
    method: 'post',
    data
  })
}

然后在HelloWorld組件中onMounted中調(diào)用login接口：

import { onMounted } from 'vue'
onMounted(() => {
  login({ account: 'admin', password: '123456' }).then(res => {
    console.log(res)
  })
})

當(dāng)然，現(xiàn)在還調(diào)不通，所以我們先配置下mock。

8.mockjs

安裝mockjs：

npm i mockjs -D

在根目錄新建mock文件夾，并新建index.ts文件：

// index.ts
import Mock from 'mockjs'

// 設(shè)置攔截ajax請(qǐng)求的相應(yīng)時(shí)間
Mock.setup({
  timeout: '200-600'
})

Mock.mock('/user/login', 'post', (params: any) => {
  return {
    data: { token: '123' },
    status: 200,
    message: 'success'
  }
})

export default {}

簡單設(shè)置一個(gè)login接口，讓我們能夠通過axios調(diào)通，然后在main.ts中引入mock：

import '../mock'

啟動(dòng)項(xiàng)目：

有返回值，搞定

9.css預(yù)處理

vite是支持sass的，但是還是需要我們先安裝一下，不然會(huì)報(bào)錯(cuò)：

npm install --save-dev sass

結(jié)語

好了，至此我們的腳手架就搭建完成了，之后就可以直接在這個(gè)腳手架上寫業(yè)務(wù)代碼了，我這里有個(gè)開源項(xiàng)目，實(shí)現(xiàn)了一個(gè)admin系統(tǒng)的基本功能，大家不嫌棄的話可以拉取下來看看，也可以直接在上面的基礎(chǔ)上寫代碼：vue-cloud-admin

到此這篇關(guān)于如何使用Vue3+Vite+TS快速搭建一套實(shí)用的腳手架的文章就介紹到這了,更多相關(guān)Vue3+Vite+TS搭建腳手架內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: