從零搭建一個vite+vue3+ts規(guī)范基礎(chǔ)項目(搭建過程問題小結(jié))
最近時間總算是閑了下來，準備著手搭建一個基礎(chǔ)模板，為后面新項目準備的，搭建過程中遇到不少問題，現(xiàn)在總結(jié)下來給大家使用。
項目初始化
本項目已vite開始，所以按照vite官方的命令開始。這里使用的命令行的方式來搭建基礎(chǔ)項目：
yarn create vite my-vue-app --template vue
執(zhí)行完之后的項目結(jié)構(gòu)是這樣的：
接下來就開始著手安裝東西了(腥風(fēng)血雨要開始了！)。
安裝router和pinia
安裝這兩個的過程還是比較簡單的，基本是可以按照官方文檔就可以做完，接下來執(zhí)行命令：
yarn add vue-router@4
在根目錄新建router文件夾，新建index.ts文件，代碼如下：
import { createRouter,createWebHashHistory, RouteRecordRaw} from 'vue-router'
import HelloWorld from '@/components/HelloWorld.vue'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router這時候需要在main.ts文件中引入
import { createApp } from 'vue'
import router from './router'
import App from './App.vue'
createApp(App).use(router).mount('#app')這時候你執(zhí)行代碼的時候，會發(fā)現(xiàn)控制臺報錯，如下：
這是因為vite不能識別@，這其實跟webpack的配置是一樣的，重定向一下就可以了。打開vite.config.ts加入以下的內(nèi)容：
import { defineConfig } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
+ resolve: {
+ alias: [
+ {
+ find: '@',
+ replacement: path.resolve(__dirname, 'src'),
+ },
+ ],
+ },
})這時候還是不行的，因為是不能識別到path這個東西的，需要安裝@types/node
yarn add @types/node -D
同時需要在tsconfig.node.json中添加compilerOptions.allowSyntheticDefaultImports: true,即如下：
"compilerOptions":{
+ allowSyntheticDefaultImports:true
}這時候就可以解決之前的報錯了。接下來就是pinia的安裝：
yarn add pinia
pinia可以說是現(xiàn)在vuex的潮流，必須要嘗嘗鮮，新增store同時在文件新增index.ts文件
import { defineStore }from 'pinia'
const useStore = defineStore('main',{
state:()=>{
return {
counter: 0,
name:'RadiomM'
}
},
actions:{
reset(){
this.$reset()
}
}
})
export default useStore本人粗略的使用了一下里面的語法，非常的好用，這里只展示最簡單的示例。在main.ts里面再引入一下即可。
import { createApp } from 'vue'
import router from './router'
import { createPinia} from 'pinia'
import App from './App.vue'
createApp(App).use(createPinia()).use(router).mount('#app')安裝ESlint
安裝eslint可以說一個比較麻煩的一件事，我是翻閱了不少文章，參考了別人文章的配置，但是途中還是踩了不少坑，有插件也只知道安裝，并不知道為了解決什么問題而安裝，所以這次我的展示會比較的長，目的是為了介紹每個插件的用途。開始！運行一下命令：
npx eslint --init
按照下面步驟選擇，可以完成基本的eslint配置：
選擇ESlint用途
什么模塊引入方式
什么框架使用eslint
是否使用typescript
運用環(huán)境選擇
選擇流行規(guī)則
選擇Airbnb規(guī)則
用什么類型文件做載體
是否開始安裝
用什么工具安裝
完成上面步驟后，可以看到項目里新增一個eslintrc.js文件，但是這僅僅是剛開始，接下來看各種坑吧。
eslint的vue規(guī)則需要切換
如下報錯，在app.vue可以看到，這里提示需要一個根元素，實際上vue3已經(jīng)不需要寫一個根元素了。
這時候需要修改.eslintrc.js文件，如下：
module.exports = {
env: {
browser: true,
es2021: true,
+ 'vue/setup-compiler-macros': true， // 這是為了兼容defineProps這種API的
},
extends: [
- 'plugin:vue/essential',
+ 'plugin:vue/vue3-recommended', // 兼容vue3語法規(guī)范
'airbnb-base',
],
+ parser: 'vue-eslint-parser' // 這個插件其實已經(jīng)安裝了，用來解析template語法
parserOptions: {
ecmaVersion: 'latest',
parser: '@typescript-eslint/parser',
sourceType: 'module',
},
plugins: [
'vue',
'@typescript-eslint',
],
rules: {
},
};這時候，你去看其他文件的時候會有linebreak-style的錯誤，這是因為eslint默認是unit的也就是lr行尾，現(xiàn)在可以直接在.eslintrc.js文件中添加新規(guī)則：
'linebreak-style':['error','windows']
注意，如果加了之后沒有效果，需要重啟vscode才能有效果，實際上很多新加的東西都需要重啟才能有效果。這時候整個項目就不存在報錯，接著進行下一步。
安裝prettier
單純安裝eslint只會提示你代碼的格式錯誤，并不會幫你自動修改，這時候就需要這個prettier來實現(xiàn)這個功能。執(zhí)行下面的命令：
yarn add eslint-plugin-prettier eslint-config-prettier prettier -D
這時候需要重新修改.eslintrc.js文件，如下：
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'plugin:vue/vue3-recommended',
'airbnb-base',
+ 'plugin:prettier/recommended',
],
parserOptions: {
ecmaVersion: 'latest',
parser: '@typescript-eslint/parser',
sourceType: 'module',
},
plugins: [
'vue',
'@typescript-eslint',
],
rules: {
+ 'prettier/prettier':'error',
+ 'linebreak-style':['erro','window']
},
};這里解釋一下這些插件：eslint-plugin-prettier這個插件主要禁用掉了一些不必要的以及和 Prettier 相沖突的 ESLint 規(guī)則。eslint-config-prettier不符合prettier規(guī)則的時候會報一個錯誤，同時可以用eslint --fix命令修復(fù)。
同時需要新增.prettierrc.js文件，寫入下面東西：
module.exports = {
printWidth: 80, // 每行代碼長度（默認80）
tabWidth: 2, // 每個tab相當于多少個空格（默認2）
useTabs: false, // 是否使用tab進行縮進（默認false）
singleQuote: true, // 使用單引號（默認false）
semi: false, // 聲明結(jié)尾使用分號(默認true)
trailingComma: 'es5', // 多行使用拖尾逗號（默認none）
bracketSpacing: true, // 對象字面量的大括號間使用空格（默認true）
bracketSameLine: false,
arrowParens: 'avoid', // 只有一個參數(shù)的箭頭函數(shù)的參數(shù)是否帶圓括號（默認avoid）
endOfLine: 'crlf', // 添加這個屬性時，可以將eslint中的linebreak-style刪除。
}接著我們可以再package.json中新增一個命令：
"scripts":{
"lint:script": "eslint --ext .js,.jsx,.ts,.tsx --fix --quiet ./",
}然后可以運行一下命令，感受一下雙巨頭的加持(啥代碼的都沒有，一點感受都沒有)：
yarn lint:script
當然這樣也只能是在運行命令的時候才能修復(fù)，我們想要的是保存代碼的時候就可以實現(xiàn)代碼自動格式化，這時候需要在vscode的setttings.json文件中添加下面內(nèi)容：
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
},同時你的vscode需要安裝兩個插件，如下：
這時候在你保存的時候，就可以代碼格式化了。當然，我們也可以在運行項目的時候就讓這些錯誤格式報錯。安裝插件
yarn add vite-plugin-eslint -D
然后在vite.config.ts文件中添加：
import viteEslint from 'vite-plugin-eslint';
// 具體配置
{
plugins: [
// 省略其它插件
viteEslint(),
]
}現(xiàn)在你可以試著重新啟動項目， ESLint 的錯誤已經(jīng)能夠及時顯示到命令行窗口中了。
----------------------------------------補充----------------------------------------- 在你運行yarn lint:script命令的時候，會出現(xiàn)下面的錯誤：
這里需要一個個問題慢慢解決，首先是import/extensions問題，主要是airbnb規(guī)范中的配置是跟我們vue項目不一樣的，所以在eslint規(guī)則中需要加入下面：
'import/extensions': [
'error',
'ignorePackages',
{
js: 'never',
jsx: 'never',
ts: 'never',
tsx: 'never',
},
],而解決依賴位置報錯問題import/no-extraneous-dependencies，其實他這個報錯是錯誤的，但是同樣解決，同樣是新增規(guī)則：
'import/no-extraneous-dependencies': ['error', { devDependencies: true }],接下來是比較麻煩的import/no-unresolved，這個參考的國外友人的配置解決的。
首先需要安裝插件：
yarn add -D eslint-import-resolver-typescript
接下來需要在.eslintrc.js文件中添加如下(和rules同級)：
settings: {
'import/resolver': {
typescript: {}, // this loads <rootdir>/tsconfig.json to eslint
},
},關(guān)于這個配置其實還有js版本的解決辦法，可以參考這個網(wǎng)站 最后展示.eslintrc.js文件
module.exports = {
env: {
browser: true,
es2021: true,
'vue/setup-compiler-macros': true,
},
extends: [
'plugin:vue/vue3-recommended',
'airbnb-base',
'plugin:prettier/recommended',
],
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 'latest',
parser: '@typescript-eslint/parser',
sourceType: 'module',
},
plugins: ['vue', '@typescript-eslint'],
rules: {
'prettier/prettier': 'error',
'linebreak-style': ['error', 'windows'],
+ 'import/extensions': [
+ 'error',
+ 'ignorePackages',
+ {
+ js: 'never',
+ jsx: 'never',
+ ts: 'never',
+ tsx: 'never',
+ },
+ ],
+ 'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
},
+ settings: {
+ 'import/resolver': {
+ typescript: {}, // this loads <rootdir>/tsconfig.json to eslint
+ },
+ },
}安裝stylelint
這個就是樣式的格式化插件，不廢話直接安裝：
yarn add stylelint stylelint-prettier stylelint-config-prettier stylelint-config-recess-order stylelint-config-standard stylelint-config-standard-scss stylelint-config-recommended-vue -D
同樣的需要新建.stylelintrc.js文件，寫入以下內(nèi)容：
module.exports = {
// 注冊 stylelint 的 prettier 插件
plugins: ['stylelint-prettier'],
// 繼承一系列規(guī)則集合
extends: [
// standard 規(guī)則集合
'stylelint-config-standard',
// standard 規(guī)則集合的 scss 版本
'stylelint-config-standard-scss',
// 樣式屬性順序規(guī)則
'stylelint-config-recess-order',
// 接入 Prettier 規(guī)則
'stylelint-config-prettier',
'stylelint-prettier/recommended',
'stylelint-config-recommended-vue'
],
// 配置 rules
rules: {
// 開啟 Prettier 自動格式化功能
'prettier/prettier': true,
// "no-empty-source": null // style不能是空
}
};再次同樣的，需要在settings.json文件中添加配置，目標同樣是為了保存文件自動格式化。
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
+ "source.fixAll.stylelint": true
},
},
+ "stylelint.validate": ["css", "less", "scss","vue"], 這時候可以在package.json文件添加命令：
script: {
"lint:style": "stylelint --fix \"src/**/*.{css,scss}\""
}其實跟上面的eslint的命令差不多。當然，同樣有運行時報錯的插件，如下：
yarn add @amatlash/vite-plugin-stylelint -D
然后在 Vite 配置文件中添加如下的內(nèi)容:
import viteStylelint from '@amatlash/vite-plugin-stylelint';
{ plugins:
[
// 省略其它插件
viteStylelint({
// 對某些文件排除檢查
exclude: /node_modules/ }),
]
}最后展示文件內(nèi)容：
import { defineConfig } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
import viteEslint from 'vite-plugin-eslint'
import viteStylelint from '@amatlash/vite-plugin-stylelint'
export default defineConfig({
plugins: [
vue(),
viteEslint(),
viteStylelint({
// 對某些文件排除檢查
exclude: /node_modules/,
}),
],
resolve: {
alias: [
{
find: '@',
replacement: path.resolve(__dirname, 'src'),
},
],
},
})同樣的，可以在vscode中安裝下面的插件。
安裝husky
安裝這個主要是為了卡點，在提交信息的時候，會校驗代碼格式，保證線上代碼規(guī)范統(tǒng)一，執(zhí)行下面命令：
yarn add husky -D
- 緊接著初始化husky
npx husky install,并將husky作為項目啟動前腳步，如下：
{
"scripts": {
// 會在安裝 npm 依賴后自動執(zhí)行
"postinstall": "husky install"
}
}- 添加 Husky 鉤子，在終端執(zhí)行如下命令:
npx husky add .husky/pre-commit "npm-run-lint"
注意window系統(tǒng)下雙引號內(nèi)容需要連接符，mac系統(tǒng)則不需要接著你將會在項目根目錄的.husky目錄中看到名為pre-commit的文件，里面包含了 git commit前要執(zhí)行的腳本?，F(xiàn)在，當你執(zhí)行 git commit 的時候，會首先執(zhí)行 npm run lint腳本，通過 Lint 檢查后才會正式提交代碼記錄。但是會出現(xiàn)這樣一種情況，就是我只修改了一個文件，這個檢查還是全量檢查，所以這個時候需要另外一個工具了。lint-staged就是用來解決上述全量掃描問題的，可以實現(xiàn)只對存入暫存區(qū)的文件進行 Lint 檢查，大大提高了提交代碼的效率。
yarn add -D lint-staged
然后在 package.json中添加如下的配置:
"lint-staged": {
"**/*.{js,jsx,tsx,ts}": [
"npm run lint:script",
"git add ."
],
"**/*.scss": [
"npm run lint:style",
"git add ."
]
}接下來我們需要在 Husky 中應(yīng)用lint-stage，回到.husky/pre-commit腳本中，將原來的npm run lint換成如下腳本:
npx --no -- lint-staged
這樣，我們便實現(xiàn)了提交代碼時的增量 Lint 檢查。
安裝commitlint
不知道你有沒有遇到過，團隊合作的時候，你的同事在提交代碼的時候，提交信息只有提交二字??！根本不懂他改了什么功能或者是新增了什么需求，或者是改了什么bug！這時候我們就要規(guī)范起提交信息來！
yarn add commitlint @commitlint/cli @commitlint/config-conventional -D
接下來新建.commitlintrc.js：
module.exports = { extends: ["@commitlint/config-conventional"] };這個插件提交的規(guī)范主要由兩部分組成，分別為<type>和subject。常用的 type 值包括如下:
feat: 添加新功能。fix: 修復(fù) Bug。chore: 一些不影響功能的更改。docs: 專指文檔的修改。perf: 性能方面的優(yōu)化。refactor: 代碼重構(gòu)。test: 添加一些測試代碼等等。
接下來我們將commitlint的功能集成到 Husky 的鉤子當中，在終端執(zhí)行如下命令即可:
npx husky add .husky/commit-msg "npx --no-install commitlint -e $HUSKY_GIT_PARAMS"
然后就可以完成提交信息的規(guī)范了，當提交的信息不符合規(guī)范時，會對提交操作的終止，并提示錯誤，至此我們就完成了這次的從零搭建項目了。
總結(jié)
這次的搭建過程中并沒有安裝css處理插件，但是在vite中安裝諸如sass、less都是比較簡單的，就舉例子sass直接運行yarn add sass即可（本文其實很多插件都是以sass為模板安裝的），那么這次的坑就踩到這里了，期待下次的踩坑之旅。 倉庫地址
參考：
從 0 開始手把手帶你搭建一套規(guī)范的 Vue3.x 項目工程環(huán)境
到此這篇關(guān)于從零搭建一個vite+vue3+ts規(guī)范基礎(chǔ)項目的文章就介紹到這了,更多相關(guān)vite+vue3+ts項目搭建內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
很多朋友不明白在使用vue for時為什么要key，key的作用有哪些,在文中給大家詳細介紹，需要的朋友可以參考下2019-07-07
實現(xiàn)暗黑主題的方式有很多種,也有很多成型的框架可以直接使用,下面這篇文章主要給大家介紹了關(guān)于基于vue3&element-plus的暗黑模式的相關(guān)資料,需要的朋友可以參考下2022-12-12
詳解如何使用router-link對象方式傳遞參數(shù)？
這篇文章主要介紹了如何使用router-link對象方式傳遞參數(shù)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
如果我們在每個組件中去重復(fù)定義這些屬性和方法會使得項目出現(xiàn)代碼冗余并提高了維護難度，針對這種情況官方提供了Mixins特性，這時使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧2023-02-02
vue中this.$refs.name.offsetHeight獲取不到值問題
這篇文章主要介紹了vue中this.$refs.name.offsetHeight獲取不到值問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
在Vue中我們可以使用ref屬性來獲取子組件的實例對象,這個功能非常方便,這篇文章主要給大家介紹了關(guān)于Vue獲取子組件實例對象ref屬性的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue components 動態(tài)組件，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
這篇文章主要介紹了vue install 注冊全局組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
vue路由事件beforeRouteLeave及組件內(nèi)定時器的清除方法
今天小編就為大家分享一篇vue路由事件beforeRouteLeave及組件內(nèi)定時器的清除方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了前端漸進式框架VUE的相關(guān)資料，文中講解的非常細致，幫助大家開始學(xué)習(xí)VUE，感興趣的朋友可以了解下2020-07-07