一套規(guī)范的vue3+vite2+ts4前端工程化項目環(huán)境?webvueblog.github.io/vue3-vite2-…

Vue 3 + Typescript + Vite

vue3-vite2-ts4

npm init @vitejs/app
vue
vue-ts
npm install
npm run dev
復(fù)制代碼

目錄結(jié)構(gòu)如下

├── public              靜態(tài)資源
├── src
│?? ├── assets ? ? ? ? ? 資源目錄（圖片、less、css等）
│?? ├── components ? ? ? 項目組件
│?? ├── App.vue ? ? ? ?  主應(yīng)用
│?? ├── env.d.ts ? ? ? ? 全局聲明
│?? └── main.ts ? ? ? ?  主入口
├── .gitignore ? ? ? ? ? git忽略配置
├── index.html ? ? ? ? ? 模板文件
├── package.json        依賴包/運行腳本配置文件
├── README.md
├── tsconfig.json ? ? ?  ts配置文件
├── tsconfig.node.json ? ts配置文件
└── vite.config.ts ? ? ? vite配置
復(fù)制代碼

每個目錄的作用后文都會提及

├── src
│?? ├── router ? ? ? ? ? 路由配置
│?? ├── stores ? ? ?     狀態(tài)管理
│?? ├── typings ? ? ? ?  ts公共類型
│?? ├── utils ? ? ? ? ?  工具類函數(shù)封裝
│?? └── views ? ? ? ?    頁面視圖
復(fù)制代碼

指定解析路徑使用的 path module需要先安裝@type/node

npm install @types/node --save-dev
復(fù)制代碼

打包功能

build: {
 ? ? ?outDir: 'dist',   // 指定打包路徑，默認為項目根目錄下的 dist 目錄
 ? ? ?terserOptions: {
 ? ? ? ? ?compress: {
 ? ? ? ? ? ? ?keep_infinity: true, ?// 防止 Infinity 被壓縮成 1/0，這可能會導致 Chrome 上的性能問題
 ? ? ? ? ? ? ?drop_console: true,   // 生產(chǎn)環(huán)境去除 console
 ? ? ? ? ? ? ?drop_debugger: true   // 生產(chǎn)環(huán)境去除 debugger
 ? ? ? ?  },
 ? ?  },
 ? ? ?chunkSizeWarningLimit: 1500   // chunk 大小警告的限制（以 kbs 為單位）
}
復(fù)制代碼

接入代碼規(guī)范

ESlint 被稱作下一代的 JS Linter 工具，能夠?qū)?JS 代碼解析成 AST 抽象語法樹，然后檢測 AST 是否符合既定的規(guī)則。

yarn add eslint @typescript-eslint/parser @typescript/eslint-plugin eslint-plugin-vue
復(fù)制代碼

TypeScirpt 官方?jīng)Q定全面采用 ESLint 作為代碼檢查的工具，并創(chuàng)建了一個新項目 typescript-eslint，提供了 TypeScript 文件的解析器 @typescript-eslint/parser 和相關(guān)的配置選項 @typescript-eslint/eslint-plugin 等

使用 scss 來增強 css 的語法能力

yarn add sass
yarn add stylelint
yarn add stylelint-scss
復(fù)制代碼

接入naive ui庫

Naive UI 是尤大推薦的 vue3 UI 庫(www.naiveui.com/zh-CN/os-th…)

接入 vue-router

npm install vue-router --save
復(fù)制代碼

import {
 ? ?createRouter, createWebHashHistory, RouteRecordRaw,
} from 'vue-router'

const routes: Array = [
 ?  { path: '/', name: 'Home', component: () => import('views/home/index.vue')}
]

const router = createRouter({
 ? ?history: createWebHashHistory(),    // history 模式則使用 createWebHistory()
 ? ?routes,
})

export default router
復(fù)制代碼

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

const app = createApp(App as any)
app.use(router)
復(fù)制代碼

接入狀態(tài)管理工具 pinia

pinia 是一個輕量級的狀態(tài)管理庫

npm install pinia --save
復(fù)制代碼

引入

在 main.ts中引入

import { createPinia } from 'pinia'

app.use(createPinia())
復(fù)制代碼

在src/stores下新建一個counters.ts文件

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
 ? ?state: () => {
 ? ? ? ?return {
 ? ? ? ? ? ?count: 0
 ? ? ?  }
 ?  },
 ? ?getters: {
 ? ? ? ?count() {
 ? ? ? ? ? ?return this.count
 ? ? ?  }
 ?  },
 ? ?actions: {
 ? ? ? ?increment() {
 ? ? ? ? ? ?this.count++
 ? ? ?  }
 ?  }
})
復(fù)制代碼

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
 ? ?const count = ref(0)
 ? ?function increment() {
 ? ? ?count.value++
 ?  }

 ? ?return { count, increment }
})
復(fù)制代碼



復(fù)制代碼

const counter = useCounterStore()
const { count } = counter

{{ count }}

復(fù)制代碼

pinia很貼心的提供了storeToRefs方法，讓我們可以享受解構(gòu)的樂趣：

const { count } = storeToRefs(counter)
復(fù)制代碼

接入圖表庫 echarts5

安裝&引入

npm install echarts --save
復(fù)制代碼

在src/utils/下新建echarts.ts用來引入我們需要使用的組件

import * as echarts from 'echarts/core'
import {
 ? ?BarChart,
 ? ?// 系列類型的定義后綴都為 SeriesOption
 ? ?BarSeriesOption,
 ? ?// LineChart,
 ? ?LineSeriesOption
} from 'echarts/charts'
import {
 ? ?TitleComponent,
 ? ?// 組件類型的定義后綴都為 ComponentOption
 ? ?TitleComponentOption,
 ? ?TooltipComponent,
 ? ?TooltipComponentOption,
 ? ?GridComponent,
 ? ?GridComponentOption,
 ? ?// 數(shù)據(jù)集組件
 ? ?DatasetComponent,
 ? ?DatasetComponentOption,
 ? ?// 內(nèi)置數(shù)據(jù)轉(zhuǎn)換器組件 (filter, sort)
 ? ?TransformComponent,
 ? ?LegendComponent
} from 'echarts/components'
import { LabelLayout, UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'

// 通過 ComposeOption 來組合出一個只有必須組件和圖表的 Option 類型
export type ECOption = echarts.ComposeOption<
 ? ?| BarSeriesOption
 ? ?| LineSeriesOption
 ? ?| TitleComponentOption
 ? ?| TooltipComponentOption
 ? ?| GridComponentOption
 ? ?| DatasetComponentOption
>

// 注冊必須的組件
echarts.use([
 ? ?TitleComponent,
 ? ?TooltipComponent,
 ? ?GridComponent,
 ? ?DatasetComponent,
 ? ?TransformComponent,
 ? ?BarChart,
 ? ?LabelLayout,
 ? ?UniversalTransition,
 ? ?CanvasRenderer,
 ? ?LegendComponent
])

// eslint-disable-next-line no-unused-vars
const option: ECOption = {
 ? ?// ...
}

export const $echarts = echarts
復(fù)制代碼

就可以在頁面中使用了：


復(fù)制代碼

配置統(tǒng)一 axios 處理

安裝&引入

npm install axios --save
復(fù)制代碼

截圖：