基于 vite 創建 vue3 全家桶專案（vite + vue3 + tsx + pinia）-有解無憂

vite 最近非常火，它是 vue 作者尤大神發布前端構建工具，底層基于 Rollup，無論是啟動速度還是熱加載速度都非常快，vite 隨 vue3 正式版一起發布，剛開始的時候與 vue 系結在一起，但之后的 v2 版本便比較獨立，vite 不僅支持 vue，還支持 React、Preact、Vanilla 等前端庫，

由于 vite 出現的時間不是很久，基于 vite 創建的專案沒有 vue-cli 那么完整，如果要使用 vue 全家桶、ESLint 等，還需要開發人員手動添加和配置，步驟稍多，略繁瑣，雖然在創建專案時可以選擇 Customize with create-vue，但我由于網路問題，一直沒有成功過，所以我封裝了一個 cli 用于快速創建基于 vite + vue3 的專案，如果各位覺得一步步手動添加和配置比較麻煩，可以使用我封裝并發布到 npmjs 上的腳手架 yyg-cli，使用 yyg-cli 目前只能快速創建 Vite + Vue3 全家桶的專案，后面會逐步更新對其他庫的支持，各位可以直接去文章最后查看 yyg-cli 的使用，

本文將一步步使用 vite 創建 vue3 專案，整合 vue 全家桶，實作基于 vue-cli 創建的專案的效果，整合的內容包括：

vue3 + vite 2

TypeScript、TSX

ESLint Standard

Sass

Vue Router

Pinia（狀態管理）

Element Plus（含圖示全域注冊）

1 創建專案

1.1 創建專案

我習慣使用 yarn 代替 npm 作為包管理工具，某些依賴使用 npm 安裝會有各種問題，使用 yarn 創建專案：

yarn create vite

1）Project name 輸入專案名： vue3-vite-archetype

2）Select a framework 選擇框架：Vue

3）Select a variant 選擇變種（語言）：TypeScript

1.2 啟動專案

專案創建完成，按照命令列中的提示操作：

1）進入專案：cd vue3-vite-archetype

2）安裝依賴：yarn

3）啟動專案：yarn dev

控制臺出現如下資訊，則專案啟動成功，在瀏覽器中訪問控制臺中的地址：

2 專案配置

2.1 添加編輯器組態檔

在根目錄下添加編輯器組態檔：.editorconfig

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

2.2 配置別名

vue開發程序中，在引入檔案時，習慣使用 @ 代替 src，vite 默認是不識別的，例如 App.vue 中第4行（引入 HelloWorld 組件），如果修改為：

import HelloWorld from '@/components/HelloWorld.vue'

會出現如下錯誤：

需要在 vite.config.js 配置路徑別名，

1）安裝依賴：

 yarn add @types/node -D

2）匯入 path

import path from 'path'

3）在匯出的物件中添加 resolve：

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

同樣的，可以繼續在 alias 中給常用的目錄定義其他別名，

除了上面三步，還需要修改專案根目錄下 tsconfig.json 檔案，在 compilerOptions 節點中添加兩個屬性配置 baseUrl 和 paths，如下：

{
  "compilerOptions": {
...
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
...
}

此時就不會報錯了，在專案中可以使用 @ 代替 src，

2.3 處理 sass/scss

如果在工程中使用 scss，例如為 App.vue 中的 style 指定 lang="scss"：

<style scoped lang="scss">

此時會出現錯誤，提示沒有找到 sass 依賴：

添加 sass/scss 的支持，只需要安裝 sass 開發依賴即可：

yarn add sass -D

2.4 處理 tsx

1）添加開發依賴

yarn add @vitejs/plugin-vue-jsx -D

2）在 vite.config.ts 中配置該插件

import vueJsx from '@vitejs/plugin-vue-jsx'

...

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
...
  ],
  ...
})

3 添加 ESLint

ESLint 主要用于代碼規范、統一代碼風格，

3.1 安裝依賴

首先安裝 eslint 為開發依賴：

yarn add eslint -D

3.2 初始化 ESLint 配置

接著執行命令初始化 eslint：

npx eslint --init

執行上述命令后，控制臺中會有如下步驟：

1）需要安裝 @eslint/create-config，問是否繼續：當然需要繼續，直接回車；

2）使用 ESLint 來干嘛：我選最后一個 To check syntax, find problems, and enforce code style（檢查語法、尋找問題、強制代碼風格）

3）使用哪種模塊化的方式：肯定選 JavaScript modules (import/export) （幾乎我參與的 vue 專案都是 ESModule）

4）專案使用什么框架：Vue.js*

5）專案是否使用 TypeScript：Yes

6）專案運行在什么環境：Browser

7）如何定義專案的代碼風格：Use a popular style guide 使用流行的風格

8）在流行的風格中選擇其中一種：Standard

9）ESLint 組態檔的格式：JavaScript

10）根據上面選擇的，提示需要安裝一大堆依賴，是否安裝？Yes

11）選擇使用什么包管理工具安裝：yarn

接下來耐心等待安裝依賴，

依賴安裝完畢后，專案的根目錄下也會自動生成 .eslintrc.cjs 檔案（可以將后綴名重命名為 .js），由于 eslint 默認整合的 vue 規范比較舊，咱們專案是 vue3，vue3 語法規則有些變化（如在 template 標簽下面可以允許有多個節點等），這些變化會導致 eslint 校驗不太適用于 vue3，所以需要修改 eslint的部分配置，使其對 vue3 友好，將 extends 中的 'plugin:vue/essential' 修改為 vue3 的 'plugin:vue/vue3-essential' 即可，

3.3 修改配置

修改后 .eslintrc.cjs 配置如下：

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
  rules: {}
}

3.4 插件配置

上述步驟已經完成 eslint 的引入和配置了，接下來就是配置 vite 的 eslint 插件，該插件可以讓 vite 知道專案的 eslint 配置，

1）安裝插件為開發依賴：

yarn add vite-plugin-eslint -D

2）在 vite.config.js 中添加該插件：

//...
import eslint from 'vite-plugin-eslint'

export default defineConfig({
  plugins: [
    vue(),
    eslint()
  ],
//...
})

3.5 配置 Webstorm

WebStorm 對 ESLint 支持非常好，可以在 WebStorm 指定 ESLint 配置，并自動修正，在 WebStorm 的 Preferences 中按照下圖進行設定：

4 添加 vue-router

4.1 安裝依賴

安裝 vue-router 依賴：

yarn add vue-router@next

4.2 創建測驗頁面

在 src 中創建目錄 views，并在 src/views/ 中創建兩個檔案 about.vue 和 home.vue，兩個 vue 檔案的代碼分別如下：

home.vue：

<template>
  <div >
    <div>
      <a href="https://vitejs.dev" target="_blank">
        <img src="https://www.cnblogs.com/vite.svg"  alt="Vite logo"/>
      </a>
      <a href="https://vuejs.org/" target="_blank">
        <img src="https://www.cnblogs.com/youyacoder/archive/2022/09/13/@/assets/vue.svg"  alt="Vue logo"/>
      </a>
    </div>
    <HelloWorld msg="Vite + Vue"/>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue'

export default defineComponent({
  name: 'home',
  components: {
    HelloWorld
  }
})
</script>
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

about.vue :

<template>
  <div >
    <h1>This is an about page</h1>
  </div>
</template>

4.3 配置路由

在 src 目錄下創建目錄 router，并在 src/router 中創建 index.ts 檔案，該檔案用于定義路由和創建路由物件，

src/router/index.ts：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/home.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/about.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

4.4 引入配置配置

修改 src/main.ts，引入路由，修改后內容如下：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

4.5 添加插座

修改 src/App.vue，添加鏈接和路由插座：

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>
</template>

樣式也可以調整一下，修改 src/style.css：

body {
  margin: 0;
  display: flex;
  min-width: 320px;
  min-height: 100vh;
}
#app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}
a {
  font-weight: 500;
  text-decoration: inherit;
}
a.router-link-exact-active {
  color: #42b983;
}
svg {
  width: 1em;
  height: 1em;
}

5 狀態管理 Pinia

在 vue2 一般采用 vuex 進行狀態管理，在 vue3 中推薦使用 Pinia，Pinia 相對 vuex 語法更簡潔、拋棄了 mutations 操作、對 TypeScript 支持也更好、滿足 Vue3 的 Composition API，是最新一代輕量級狀態管理插件，按照尤大神的意思，vuex 將不再接受新的功能，推薦使用 Pinia，

5.1 安裝依賴

使用 yarn 安裝 pinia 依賴：

yarn add pinia

5.2 創建根存盤

在 src/main.ts 創建一個根存盤 pinia，并傳遞給應用程式：

...
import { createPinia } from 'pinia'
...
app.use(createPinia())
...

5.3 定義 store

在 src 目錄下創建 store，并在 src/store 中創建 demo.ts 檔案，該檔案中咱們使用 Composition API 的方式實作 store，

src/store/demo.ts：

import { defineStore } from 'pinia'
import { ref } from 'vue'

const useDemoStore = defineStore('demo', () => {
  const counter = ref(0)

  const increment = () => {
    counter.value++
  }

  return {
    counter,
    increment
  }
})

export default useDemoStore

5.4 使用 store

上面創建了 store，接下來再 src/views/about.vue 中使用 store：

<template>
  <div >
    <h1>This is an about page</h1>
    <h3>counter: {{counter}}</h3>
    <button @click="add">Ad Count</button>
  </div>
</template>

<script lang="ts" setup>
import useDemoStore from '@/store/demo'
import { storeToRefs } from 'pinia'

const demoStore = useDemoStore()
const { counter } = storeToRefs(demoStore)

const add = () => {
  demoStore.increment()
}
</script>

如此便實作了 pinia 狀態管理的 demo，在 about 頁面上點擊按鈕，會修改狀態 counter 的值，

6 使用 Element Plus

Element UI 是很常用的中后臺管理界面的 vue UI庫，對應 Vue3 的版本名為 Element Plus，

6.1 添加 Element Plus

1）安裝依賴：

yarn add element-plus

2）在 src/main.ts 中引入：

...
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

...
app.use(ElementPlus)
...

3）在 about.vue 中替換 button 按鈕測驗：

<el-button @click="add">Ad Count</el-button>

6.2 全域注冊圖示

在 element-ui 中，安裝 element-ui 后便可以直接使用圖示，但 element-plus 需要單獨安裝依賴，并在使用圖示時引入對應的圖示組件，咱可以進行簡單的封裝，使之與 element-ui 中的用法一致，

1）安裝依賴：

yarn add @element-plus/icons-vue

2）在 src 下創建 utils/str-utils.ts ，定義駝峰命名轉中劃線命名的函式：

export const camelCaseToLine = (v: string): string => {
  return v.replace(/([A-Z])/g, '-$1').toLowerCase()
}

3）在 src/main.ts 中全域注冊所有圖示，的方式進行使用：

...
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { camelCaseToLine } from '@/utils/str-utils'

...

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(`el-icon${camelCaseToLine(key)}`, component)
}
...

4）在 about.vue 頁面上測驗使用

<el-button @click="add">
  <el-icon-plus></el-icon-plus>
</el-button>

使用圖示替換之前的文字 Add Count，效果如下：

至此便完成了 vite + vue3 + vue router + pinia + element plus 的基礎整合了，步驟較多較繁瑣，大家可以使用 yyg-cli 省略上述步驟，

7 yyg-cli

yyg-cli 實作了上面的步驟，只需要一個命令便可以創建 vue3 全家桶專案，

首先使用 npm 全域安裝 yyg-cli：

npm install -g yyg-cli

全域安裝成功后，使用 yyg create 命令便可創建專案，如創建名為 demo 的專案：

yyg create demo

輸入該命令后，按照自己專案的需求輸入專案描述、版本號、作者、開發運行的埠號 (全部非必填，可以直接回車)，

然后詢問你是否要立即按照依賴，直接回車即可，最后選擇包管理工具，便開始自動安裝依賴，

依賴安裝完成，進入專案根目錄，yarn dev 啟動專案即可，

yyg-cli 幫大家節省了手動整合和配置的時間，后續會引入對 ant-d 、hero-admin-ui 等的支持，實作開箱即用，快速創建企業級中后臺專案的基礎框架，

感謝你閱讀本文，如果本文給了你一點點幫助或者啟發，還請三連支持一下，點贊、關注、收藏，作者會持續與大家分享更多干貨

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/507232.html

標籤：其他

上一篇：前端面試題JavaScript篇——2022-09-13

下一篇：記錄--uni-app實作藍牙列印小票