Vite開發(fā)環(huán)境搭建詳解
?Vite???現(xiàn)在可謂是炙手可熱，可能很多小伙伴還沒有使用過??Vite???，但是我相信大多數(shù)小伙伴已經在使用??Vite???了，因為是太香了有沒有?？赡茉谑褂眠^程中很多東西??Vite???不是配置好的，并不像??Vue-cli??配置的很周全，那么今天就說一下如何配置開發(fā)環(huán)境，其中主要涉及到的點有一下幾個：
- TypeScript
- Vuex
- Vue-Router
- E2E
- Cypress
- Test unit
- Jest
- vtu
- Eslint + Perttite
- verify git commit message
- CI
- alias
Vite初始化項目
在開始之前首先要先使用??Vite??創(chuàng)建項目，如果小伙伴已經對??Vite??已經有了一定的了解，那么可以跳過。根據(jù)??Vite??官網介紹可以使用??npm??或??yarn??來創(chuàng)建項目。
?使用 NPM:
npm init vite@latest
使用 Yarn:
yarn create vite
使用 PNPM:
pnpx create-vite
輸入完命令之后然后按照提示操作即可，因為在項目要支持??TypeScript???所以我這里就選擇的是??vue-ts???。創(chuàng)建好之后??Vite???會幫助我們把項目給創(chuàng)建好，可以發(fā)現(xiàn)??Vite???所創(chuàng)建好的項目其實與使用??Vue-cli??所創(chuàng)建的項目目錄結構其實是差不多的，這里也就不多贅述了。
集成Vue-Router
??Vue-Router??是大多數(shù)項目中比不可少的工具之一了，??Vue-Router??可以讓構建單頁面應用變得更加的容易。包含的功能有：
- 嵌套的路由/視圖表
- 模塊化的、基于組件的路由配置
- 路由參數(shù)、查詢、通配符
- 基于 Vue.js 過渡系統(tǒng)的視圖過渡效果
- 細粒度的導航控制
- 帶有自動激活的 CSS class 的鏈接
- HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
- 自定義的滾動條行為
以上截取自? ?Vue-router官網??
安裝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??進行初始化配置。我們暫時把初始化的工作擱置一下，先需要創(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??的代碼，測試一下我們的路由是否已經可以正常使用了。
<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>接下來啟動服務就可以看到所配置的頁面了，說明配置的路由已經生效了。??Good Job??，真的很不錯~~~
集成Vuex
??Vuex??是??Vue??所支持的狀態(tài)管理工具，在在實際應用過程中也有很大的作用，當多個組件之間的數(shù)據(jù)流轉變得非常困難，因此需要集中的對狀態(tài)進行管理，??Vuex??的狀態(tài)存儲是響應式的。當??Vue??組件從??store??中讀取狀態(tài)的時候，若??store??中的狀態(tài)發(fā)生變化，那么相應的組件也會相應地得到高效更新。
安裝Vuex:
使用 NPM:
npm install vuex@next --save
使用 Yarn:
yarn add vuex@next --save
安裝完成之后，首先添加??store/index.ts??來初始化??Vuex??。需要注意的是，如下示例使用了??Vuex??命名空間?？赡茉趯嶋H項目中使用命名空間相對來說還是比較普遍的，避免進行狀態(tài)管理的時候導致變量污染。
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??就已經被集成到??Vue??中了為了保證集成的??Vuex??是有效地，那么需要對此進行測試：
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>當點擊按鈕的時候，就可以發(fā)現(xiàn)??count???值也隨著點擊每次遞增，那么??store???是可以正常使用。??Good Job??，真的很不錯~~~
集成Git提交驗證
在開發(fā)項目的時候可能并不是一個人進行開發(fā)的，可能會由多個人進行開發(fā)，那么作為標準的自動化來講，對于??Git??提交的時候，要有一些固定顯著的格式來規(guī)范我們的項目開發(fā)人員，這個時候就需要使用某些工具進行約束。
安裝相關依賴：
使用 NPM:
npm install yorkie -D npm install chalk -D
使用 Yarn:
yarn add yorkie --dev yarn add chalk --dev
安裝完依賴之后，對??yorkie??之后需要對其進行相關的配置，在??package.json??中添加字段：
{
"gitHooks": {
"commit-msg": "node scripts/commitMessage.js"
}
}在上面的配置中，運行了一個??js??文件，那么這個??js??文件中則是對提交內容的校驗。
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??對于團隊開發(fā)來說是一個很不錯的工具，可以根據(jù)??Eslint??的配置給約束開發(fā)者代碼的風格，以及書寫格式。
安裝相關依賴：
使用 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??進行配置，在根目錄下創(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
}
}配置項已經添加好了，如何去運行已經配置好的??eslint??呢？接下來就需要在??package.json??中添加命令：
{
"lint": "eslint --ext src/**/*.{ts,vue} --no-error-on-unmatched-pattern"
}接下來運行一下??yarn lint??就可以了，可以通過??eslint??完成格式的校驗了，現(xiàn)在的問題是什么，在執(zhí)行??yarn lint??的時候把所有的文件全部都校驗了一次，這個可不是我們所希望的，如果有很多文件的話，那么速度將會很慢，那么有沒有辦法，只在??git??提交的時候對修改的文件進行??eslint??校驗呢？
安裝相關依賴：
使用 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??沒有提供類似的配置，所以我們需要手動的對其進行一些相關的配置，才能繼續(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??配置進行修改：
修改??jest.config.js??：
module.exports = {
transform: {
'^.+\\.vue$': 'vue-jest',
'^.+\\.jsx?$': 'babel-jest',
'^.+\\.tsx?$': 'ts-jest',
},
testMatch: ['**/?(*.)+(test).[jt]s?(x)'],
moduleNameMapper: {
"@/(.*)$": "<rootDir>/src/$1"
}
};到此這篇關于Vite開發(fā)環(huán)境搭建詳解的文章就介紹到這了,更多相關Vite開發(fā)環(huán)境搭建內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
- vite?+?react?+typescript?環(huán)境搭建小白入門教程
- vue3+vite使用環(huán)境變量.env的一些配置情況詳細說明
- 教你如何開發(fā)Vite3插件構建Electron開發(fā)環(huán)境
- 如何在vite里獲取env環(huán)境變量淺析
- vite與xcode環(huán)境變量配置記錄詳解
- Vite+React搭建開發(fā)構建環(huán)境實踐記錄
- vue3+vite中開發(fā)環(huán)境與生產環(huán)境全局變量配置指南
- vue使用vite配置跨域以及環(huán)境配置詳解
- Vite結合whistle實現(xiàn)一勞永逸開發(fā)環(huán)境代理方案
- Vite多環(huán)境配置項目高定制化能力詳解
相關文章
Vue Element前端應用開發(fā)之用戶管理模塊的處理
本篇隨筆以權限管理模塊中的用戶管理為媒介，進行相關功能的介紹和界面設計的處理。2021-05-05
Vue中@change、@input和@blur的區(qū)別及@keyup介紹
這篇文章主要給大家介紹了關于Vue中@change、@input和@blur的區(qū)別及@keyup介紹的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue如何監(jiān)聽瀏覽器主動刷新，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
在本篇文章里我們給大家分享了Vue組件插槽的使用以及調用組件內的方法相關知識點，有需要的朋友們參考下。2018-11-11
這篇文章主要介紹了vue中標簽自定義屬性的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
今天小編就為大家分享一篇解決vue熱替換失效的根本原因，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了Vue.js框架實現(xiàn)購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
vue在前端技術中使用越來越多，也成為了主流框架，今天咱花點時間學習下Vue與element-ui整合方式，本文結合示例代碼給大家介紹的非常詳細，需要的朋友參考下吧2022-04-04
本篇文章主要介紹了Vue2.0 組件傳值通訊的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了Vue?項目運行完成后自動打開瀏覽器的多種實現(xiàn)方法，方法一比較適用于vue3，每種方法通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2022-02-02