Vite開發(fā)環(huán)境搭建詳解

更新時間：2023年02月10日 08:20:16 作者：尼羲

Vite是一款非常輕量級的Web開發(fā)框架，它可以幫助開發(fā)者快速搭建一個開發(fā)環(huán)境。Vite搭建的開發(fā)環(huán)境可以提供更快的編譯速度，更少的配置，更好的性能和更多的開發(fā)者友好性，使開發(fā)者可以更快地構(gòu)建出功能強(qiáng)大的Web應(yīng)用程序。

?Vite???現(xiàn)在可謂是炙手可熱，可能很多小伙伴還沒有使用過??Vite???，但是我相信大多數(shù)小伙伴已經(jīng)在使用??Vite???了，因?yàn)槭翘懔擞袥]有。可能在使用過程中很多東西??Vite???不是配置好的，并不像??Vue-cli??配置的很周全，那么今天就說一下如何配置開發(fā)環(huán)境，其中主要涉及到的點(diǎn)有一下幾個：

TypeScript
Vuex
Vue-Router
E2E

Cypress

Test unit

Jest
vtu

Eslint + Perttite
verify git commit message
CI
alias

Vite初始化項(xiàng)目

在開始之前首先要先使用??Vite??創(chuàng)建項(xiàng)目，如果小伙伴已經(jīng)對??Vite??已經(jīng)有了一定的了解，那么可以跳過。根據(jù)??Vite??官網(wǎng)介紹可以使用??npm??或??yarn??來創(chuàng)建項(xiàng)目。

?使用 NPM:

npm init vite@latest

使用 Yarn:

yarn create vite

使用 PNPM:

pnpx create-vite

輸入完命令之后然后按照提示操作即可，因?yàn)樵陧?xiàng)目要支持??TypeScript???所以我這里就選擇的是??vue-ts???。創(chuàng)建好之后??Vite???會幫助我們把項(xiàng)目給創(chuàng)建好，可以發(fā)現(xiàn)??Vite???所創(chuàng)建好的項(xiàng)目其實(shí)與使用??Vue-cli??所創(chuàng)建的項(xiàng)目目錄結(jié)構(gòu)其實(shí)是差不多的，這里也就不多贅述了。

集成Vue-Router

??Vue-Router??是大多數(shù)項(xiàng)目中比不可少的工具之一了，??Vue-Router??可以讓構(gòu)建單頁面應(yīng)用變得更加的容易。包含的功能有：

嵌套的路由/視圖表
模塊化的、基于組件的路由配置
路由參數(shù)、查詢、通配符
基于 Vue.js 過渡系統(tǒng)的視圖過渡效果
細(xì)粒度的導(dǎo)航控制
帶有自動激活的 CSS class 的鏈接
HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
自定義的滾動條行為

以上截取自? ?Vue-router官網(wǎng)??

安裝Vue-Router：

使用 NPM:

npm install vue-router@next --save

使用 Yarn:

yarn add vue-router@next --save

安裝完成之后在??src??目錄下創(chuàng)建文件夾??router/index.ts??，創(chuàng)建完成之后需要在??Vue-Router??中對??Vue-Router??進(jìn)行初始化配置。我們暫時把初始化的工作擱置一下，先需要創(chuàng)建??pages??文件夾，把需要展示的頁面創(chuàng)建完成。

創(chuàng)建完成之后，接下來就是完善??router/index.ts??中文件的初始化工作了：

import { createRouter, createWebHashHistory } from "vue-router";

const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: "/home",
name: "Home",
alias: "/",
component: () => import("../pages/Home.vue")
},
{
path: "/about",
name: "About",
component: () => import("../pages/About.vue")
}
]
})

export default router;

接下來在??main.ts??文件中集成??Vue-Router??：

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??的代碼，測試一下我們的路由是否已經(jīng)可以正常使用了。

<template>
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
name: 'App'
})
</script>

接下來啟動服務(wù)就可以看到所配置的頁面了，說明配置的路由已經(jīng)生效了。??Good Job??，真的很不錯~~~

集成Vuex

??Vuex??是??Vue??所支持的狀態(tài)管理工具，在在實(shí)際應(yīng)用過程中也有很大的作用，當(dāng)多個組件之間的數(shù)據(jù)流轉(zhuǎn)變得非常困難，因此需要集中的對狀態(tài)進(jìn)行管理，??Vuex??的狀態(tài)存儲是響應(yīng)式的。當(dāng)??Vue??組件從??store??中讀取狀態(tài)的時候，若??store??中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會相應(yīng)地得到高效更新。

安裝Vuex:

使用 NPM:

npm install vuex@next --save

使用 Yarn:

yarn add vuex@next --save

安裝完成之后，首先添加??store/index.ts??來初始化??Vuex??。需要注意的是，如下示例使用了??Vuex??命名空間?？赡茉趯?shí)際項(xiàng)目中使用命名空間相對來說還是比較普遍的，避免進(jìn)行狀態(tài)管理的時候?qū)е伦兞课廴尽?/p>

import { createStore } from "vuex";

const store = createStore({
modules: {
home: {
namespaced: true,
state: {
count: 1
},
mutations: {
add(state){
state.count++;
}
}
}
}
})

export default store;

集成到??Vue??中：

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');

現(xiàn)在??Vuex??就已經(jīng)被集成到??Vue??中了為了保證集成的??Vuex??是有效地，那么需要對此進(jìn)行測試：

pages/Home.vue

<template>
<h1>Home</h1>
<h2>{{count}}</h2>
<button @click="handleClick">click</button>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useStore } from 'vuex';

export default defineComponent({
setup () {
const store = useStore();
const count = computed(() => store.state.home.count);
const handleClick = () => {
store.commit('home/add');
};
return {
handleClick,
count
};
}
})
</script>

當(dāng)點(diǎn)擊按鈕的時候，就可以發(fā)現(xiàn)??count???值也隨著點(diǎn)擊每次遞增，那么??store???是可以正常使用。??Good Job??，真的很不錯~~~

集成Git提交驗(yàn)證

在開發(fā)項(xiàng)目的時候可能并不是一個人進(jìn)行開發(fā)的，可能會由多個人進(jìn)行開發(fā)，那么作為標(biāo)準(zhǔn)的自動化來講，對于??Git??提交的時候，要有一些固定顯著的格式來規(guī)范我們的項(xiàng)目開發(fā)人員，這個時候就需要使用某些工具進(jìn)行約束。

安裝相關(guān)依賴：

使用 NPM:

npm install yorkie -D
npm install chalk -D

使用 Yarn:

yarn add yorkie --dev
yarn add chalk --dev

安裝完依賴之后，對??yorkie??之后需要對其進(jìn)行相關(guān)的配置，在??package.json??中添加字段：

{
"gitHooks": {
"commit-msg": "node scripts/commitMessage.js"
}
}

在上面的配置中，運(yùn)行了一個??js??文件，那么這個??js??文件中則是對提交內(nèi)容的校驗(yàn)。

scripts/commitMessage.js

const chalk = require('chalk')
const msgPath = process.env.GIT_PARAMS
const msg = require('fs').readFileSync(msgPath, 'utf-8').trim()

const commitRE = /^(revert: )?(feat|fix|docs|dx|style|refactor|perf|test|workflow|build|ci|chore|types|wip|release)(\(.+\))?(.{1,10})?: .{1,50}/
const mergeRe = /^(Merge pull request|Merge branch)/

if (!commitRE.test(msg)) {
if (!mergeRe.test(msg)) {
console.log(msg)
console.error(
` ${chalk.bgRed.white(' ERROR ')} ${chalk.red(
`invalid commit message format.`,
)}\n\n` +
chalk.red(
` Proper commit message format is required for automated changelog generation. Examples:\n\n`,
) +
` ${chalk.green(`feat(compiler): add 'comments' option`)}\n` +
` ${chalk.green(
`fix(v-model): handle events on blur (close #28)`,
)}\n\n` +
chalk.red(
` See https://github.com/vuejs/vue-next/blob/master/.github/commit-convention.md for more details.\n`,
),
)
process.exit(1)
}
}

集成Eslint

??Eslint??對于團(tuán)隊開發(fā)來說是一個很不錯的工具，可以根據(jù)??Eslint??的配置給約束開發(fā)者代碼的風(fēng)格，以及書寫格式。

安裝相關(guān)依賴：

使用 NPM:

npm install eslint -D
npm install eslint-plugin-vue -D
npm install @vue/eslint-config-typescript -D
npm install @typescript-eslint/parser -D
npm install @typescript-eslint/eslint-plugin -D
npm install typescript -D
npm install prettier -D
npm install eslint-plugin-prettier -D
npm install @vue/eslint-config-prettier -D

使用 Yarn:

yarn add eslint --dev
yarn add eslint-plugin-vue --dev
yarn add @vue/eslint-config-typescript --dev
yarn add @typescript-eslint/parser --dev
yarn add @typescript-eslint/eslint-plugin --dev
yarn add typescript --dev
yarn add prettier --dev
yarn add eslint-plugin-prettier --dev
yarn add @vue/eslint-config-prettier --dev

配置安裝完成之后呢，還需要對??eslint??進(jìn)行配置，在根目錄下創(chuàng)建??.eslintrc??:

.eslintrc

{
"root": true,
"env": {
"browser": true,
"node": true,
"es2021": true
},
"extends": [
"plugin:vue/vue3-recommended",
"eslint:recommended",
"@vue/typescript/recommended"
],
"parserOptions": {
"ecmaVersion": 2021
}
}

配置項(xiàng)已經(jīng)添加好了，如何去運(yùn)行已經(jīng)配置好的??eslint??呢？接下來就需要在??package.json??中添加命令：

{
"lint": "eslint --ext src/**/*.{ts,vue} --no-error-on-unmatched-pattern"
}

接下來運(yùn)行一下??yarn lint??就可以了，可以通過??eslint??完成格式的校驗(yàn)了，現(xiàn)在的問題是什么，在執(zhí)行??yarn lint??的時候把所有的文件全部都校驗(yàn)了一次，這個可不是我們所希望的，如果有很多文件的話，那么速度將會很慢，那么有沒有辦法，只在??git??提交的時候?qū)π薷牡奈募M(jìn)行??eslint??校驗(yàn)?zāi)兀?/p>

安裝相關(guān)依賴：

使用 NPM:

npm install lint-staged -D

使用 Yarn:

yarn add lint-staged --dev

修改??package.json??：

{
"gitHooks": {
"commit-msg": "node scripts/commitMessage.js",
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{ts,vue}": "eslint --fix"
},
"scripts": {
"test:unit": "jest",
"test:e2e": "cypress open",
"test": "yarn test:unit && npx cypress run",
"lint": "npx prettier -w -u . && eslint --ext .ts,.vue src/** --no-error-on-unmatched-pattern",
"bea": "npx prettier -w -u ." // 美化代碼
},
}

配置alias

在使用??cli??的時候總是使用??@??去引入某些文件，由于??Vite??沒有提供類似的配置，所以我們需要手動的對其進(jìn)行一些相關(guān)的配置，才能繼續(xù)使用??@??符號去快捷的引入文件。

修改??vite.config.ts??:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { join } from "path";

// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: [
{
find: '@',
replacement: '/src',
},
{ find: 'views', replacement: '/src/views' },
{ find: 'components', replacement: '/src/components' },
]
}
});

修改??tsconfig.json??:

{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"types": ["vite/client", "jest"],
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/unit"
]
}

為了保證在單元測試中也可以使用??@??引入??src??下面的文件需要對??jest.config.js??配置進(jìn)行修改：

修改??jest.config.js??：

module.exports = {
transform: {
'^.+\\.vue$': 'vue-jest',
'^.+\\.jsx?$': 'babel-jest',
'^.+\\.tsx?$': 'ts-jest',
},
testMatch: ['**/?(*.)+(test).[jt]s?(x)'],
moduleNameMapper: {
"@/(.*)$": "<rootDir>/src/$1"
}
};

到此這篇關(guān)于Vite開發(fā)環(huán)境搭建詳解的文章就介紹到這了,更多相關(guān)Vite開發(fā)環(huán)境搭建內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: