從零搭建一個(gè)vite+vue3+ts規(guī)范基礎(chǔ)項(xiàng)目(搭建過(guò)程問(wèn)題小結(jié))

更新時(shí)間：2022年05月27日 10:37:45 作者：RadiomM

這篇文章主要介紹了從零搭建一個(gè)vite+vue3+ts規(guī)范基礎(chǔ)項(xiàng)目,本項(xiàng)目已vite開(kāi)始，所以按照vite官方的命令開(kāi)始，對(duì)vite+vue3+ts項(xiàng)目搭建過(guò)程感興趣的朋友一起看看吧

項(xiàng)目初始化

本項(xiàng)目已vite開(kāi)始，所以按照vite官方的命令開(kāi)始。這里使用的命令行的方式來(lái)搭建基礎(chǔ)項(xiàng)目：

yarn create vite my-vue-app --template vue

執(zhí)行完之后的項(xiàng)目結(jié)構(gòu)是這樣的：

接下來(lái)就開(kāi)始著手安裝東西了(腥風(fēng)血雨要開(kāi)始了！)。

安裝router和pinia

安裝這兩個(gè)的過(guò)程還是比較簡(jiǎn)單的，基本是可以按照官方文檔就可以做完，接下來(lái)執(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

這時(shí)候需要在main.ts文件中引入

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

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

這時(shí)候你執(zhí)行代碼的時(shí)候，會(huì)發(fā)現(xiàn)控制臺(tái)報(bào)錯(cuò)，如下：

這是因?yàn)関ite不能識(shí)別@，這其實(shí)跟webpack的配置是一樣的，重定向一下就可以了。打開(kāi)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'),
+     },
+   ],
+  },
})

這時(shí)候還是不行的，因?yàn)槭遣荒茏R(shí)別到path這個(gè)東西的，需要安裝@types/node

yarn add @types/node -D

同時(shí)需要在tsconfig.node.json中添加compilerOptions.allowSyntheticDefaultImports: true,即如下：

"compilerOptions":{
+  allowSyntheticDefaultImports:true
}

這時(shí)候就可以解決之前的報(bào)錯(cuò)了。接下來(lái)就是pinia的安裝：

yarn add pinia

pinia可以說(shuō)是現(xiàn)在vuex的潮流，必須要嘗嘗鮮，新增store同時(shí)在文件新增index.ts文件

import { defineStore }from 'pinia'
const useStore = defineStore('main',{
    state:()=>{
        return {
            counter: 0,
            name:'RadiomM'
        }
    },
    actions:{
        reset(){
            this.$reset()
        }
    }
})
export default useStore

本人粗略的使用了一下里面的語(yǔ)法，非常的好用，這里只展示最簡(jiǎn)單的示例。在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可以說(shuō)一個(gè)比較麻煩的一件事，我是翻閱了不少文章，參考了別人文章的配置，但是途中還是踩了不少坑，有插件也只知道安裝，并不知道為了解決什么問(wèn)題而安裝，所以這次我的展示會(huì)比較的長(zhǎng)，目的是為了介紹每個(gè)插件的用途。開(kāi)始！運(yùn)行一下命令：

npx eslint --init

按照下面步驟選擇，可以完成基本的eslint配置：

選擇ESlint用途

什么模塊引入方式

什么框架使用eslint

是否使用typescript

運(yùn)用環(huán)境選擇

選擇流行規(guī)則

選擇Airbnb規(guī)則

用什么類(lèi)型文件做載體

是否開(kāi)始安裝

用什么工具安裝

完成上面步驟后，可以看到項(xiàng)目里新增一個(gè)eslintrc.js文件，但是這僅僅是剛開(kāi)始，接下來(lái)看各種坑吧。

eslint的vue規(guī)則需要切換

如下報(bào)錯(cuò)，在app.vue可以看到，這里提示需要一個(gè)根元素，實(shí)際上vue3已經(jīng)不需要寫(xiě)一個(gè)根元素了。

這時(shí)候需要修改.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語(yǔ)法規(guī)范
    'airbnb-base',
  ],
+ parser: 'vue-eslint-parser' // 這個(gè)插件其實(shí)已經(jīng)安裝了，用來(lái)解析template語(yǔ)法
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: [
    'vue',
    '@typescript-eslint',
  ],
  rules: {
  },
};

這時(shí)候，你去看其他文件的時(shí)候會(huì)有linebreak-style的錯(cuò)誤，這是因?yàn)閑slint默認(rèn)是unit的也就是lr行尾，現(xiàn)在可以直接在.eslintrc.js文件中添加新規(guī)則：

 'linebreak-style':['error','windows']

注意，如果加了之后沒(méi)有效果，需要重啟vscode才能有效果，實(shí)際上很多新加的東西都需要重啟才能有效果。這時(shí)候整個(gè)項(xiàng)目就不存在報(bào)錯(cuò)，接著進(jìn)行下一步。

安裝prettier

單純安裝eslint只會(huì)提示你代碼的格式錯(cuò)誤，并不會(huì)幫你自動(dòng)修改，這時(shí)候就需要這個(gè)prettier來(lái)實(shí)現(xiàn)這個(gè)功能。執(zhí)行下面的命令：

yarn add eslint-plugin-prettier eslint-config-prettier prettier -D

這時(shí)候需要重新修改.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這個(gè)插件主要禁用掉了一些不必要的以及和 Prettier 相沖突的 ESLint 規(guī)則。
eslint-config-prettier不符合prettier規(guī)則的時(shí)候會(huì)報(bào)一個(gè)錯(cuò)誤，同時(shí)可以用eslint --fix命令修復(fù)。
同時(shí)需要新增.prettierrc.js文件，寫(xiě)入下面東西：

module.exports = {
  printWidth: 80, // 每行代碼長(zhǎng)度（默認(rèn)80）
  tabWidth: 2, // 每個(gè)tab相當(dāng)于多少個(gè)空格（默認(rèn)2）
  useTabs: false, // 是否使用tab進(jìn)行縮進(jìn)（默認(rèn)false）
  singleQuote: true, // 使用單引號(hào)（默認(rèn)false）
  semi: false, // 聲明結(jié)尾使用分號(hào)(默認(rèn)true)
  trailingComma: 'es5', // 多行使用拖尾逗號(hào)（默認(rèn)none）
  bracketSpacing: true, // 對(duì)象字面量的大括號(hào)間使用空格（默認(rèn)true）
  bracketSameLine: false,
  arrowParens: 'avoid', // 只有一個(gè)參數(shù)的箭頭函數(shù)的參數(shù)是否帶圓括號(hào)（默認(rèn)avoid）
  endOfLine: 'crlf', // 添加這個(gè)屬性時(shí)，可以將eslint中的linebreak-style刪除。
}

接著我們可以再package.json中新增一個(gè)命令：

"scripts":{
    "lint:script": "eslint --ext .js,.jsx,.ts,.tsx --fix --quiet ./",
}

然后可以運(yùn)行一下命令，感受一下雙巨頭的加持(啥代碼的都沒(méi)有，一點(diǎn)感受都沒(méi)有)：

yarn lint:script

當(dāng)然這樣也只能是在運(yùn)行命令的時(shí)候才能修復(fù)，我們想要的是保存代碼的時(shí)候就可以實(shí)現(xiàn)代碼自動(dòng)格式化，這時(shí)候需要在vscode的setttings.json文件中添加下面內(nèi)容：

    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true,
         },
    },

同時(shí)你的vscode需要安裝兩個(gè)插件，如下：

這時(shí)候在你保存的時(shí)候，就可以代碼格式化了。當(dāng)然，我們也可以在運(yùn)行項(xiàng)目的時(shí)候就讓這些錯(cuò)誤格式報(bào)錯(cuò)。安裝插件

yarn add vite-plugin-eslint -D

然后在vite.config.ts文件中添加：

import viteEslint from 'vite-plugin-eslint';
// 具體配置 
{ 
    plugins: [ 
    // 省略其它插件 
    viteEslint(), 
    ]
}

現(xiàn)在你可以試著重新啟動(dòng)項(xiàng)目， ESLint 的錯(cuò)誤已經(jīng)能夠及時(shí)顯示到命令行窗口中了。

----------------------------------------補(bǔ)充----------------------------------------- 在你運(yùn)行yarn lint:script命令的時(shí)候，會(huì)出現(xiàn)下面的錯(cuò)誤：

這里需要一個(gè)個(gè)問(wèn)題慢慢解決，首先是import/extensions問(wèn)題，主要是airbnb規(guī)范中的配置是跟我們vue項(xiàng)目不一樣的，所以在eslint規(guī)則中需要加入下面：

 'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],

而解決依賴位置報(bào)錯(cuò)問(wèn)題import/no-extraneous-dependencies，其實(shí)他這個(gè)報(bào)錯(cuò)是錯(cuò)誤的，但是同樣解決，同樣是新增規(guī)則：

 'import/no-extraneous-dependencies': ['error', { devDependencies: true }],

接下來(lái)是比較麻煩的import/no-unresolved，這個(gè)參考的國(guó)外友人的配置解決的。
首先需要安裝插件：

yarn add -D eslint-import-resolver-typescript

接下來(lái)需要在.eslintrc.js文件中添加如下(和rules同級(jí))：

  settings: {
    'import/resolver': {
      typescript: {}, // this loads <rootdir>/tsconfig.json to eslint
    },
  },

關(guān)于這個(gè)配置其實(shí)還有js版本的解決辦法，可以參考這個(gè)網(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

這個(gè)就是樣式的格式化插件，不廢話直接安裝：

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文件，寫(xiě)入以下內(nèi)容：

module.exports = {
    // 注冊(cè) 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: {
      // 開(kāi)啟 Prettier 自動(dòng)格式化功能
      'prettier/prettier': true,
      // "no-empty-source": null  // style不能是空
    }
  };

再次同樣的，需要在settings.json文件中添加配置，目標(biāo)同樣是為了保存文件自動(dòng)格式化。

    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true,
+           "source.fixAll.stylelint": true  
         },
    },
+    "stylelint.validate": ["css", "less", "scss","vue"],

這時(shí)候可以在package.json文件添加命令：

script: {
  "lint:style": "stylelint --fix \"src/**/*.{css,scss}\""
}

其實(shí)跟上面的eslint的命令差不多。當(dāng)然，同樣有運(yùn)行時(shí)報(bào)錯(cuò)的插件，如下：

yarn add @amatlash/vite-plugin-stylelint -D

然后在 Vite 配置文件中添加如下的內(nèi)容:

import viteStylelint from '@amatlash/vite-plugin-stylelint'; 

{ plugins: 
    [ 
    // 省略其它插件 
    viteStylelint({ 
    // 對(duì)某些文件排除檢查 
    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({
      // 對(duì)某些文件排除檢查
      exclude: /node_modules/,
    }),
  ],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve(__dirname, 'src'),
      },
    ],
  },
})

同樣的，可以在vscode中安裝下面的插件。

安裝husky

安裝這個(gè)主要是為了卡點(diǎn)，在提交信息的時(shí)候，會(huì)校驗(yàn)代碼格式，保證線上代碼規(guī)范統(tǒng)一，執(zhí)行下面命令：

yarn add husky -D

緊接著初始化huskynpx husky install,并將husky作為項(xiàng)目啟動(dòng)前腳步，如下：

{ 
    "scripts": { 
        // 會(huì)在安裝 npm 依賴后自動(dòng)執(zhí)行 
        "postinstall": "husky install" 
    } 
}

添加 Husky 鉤子，在終端執(zhí)行如下命令:

npx husky add .husky/pre-commit "npm-run-lint"

注意window系統(tǒng)下雙引號(hào)內(nèi)容需要連接符，mac系統(tǒng)則不需要接著你將會(huì)在項(xiàng)目根目錄的.husky目錄中看到名為pre-commit的文件，里面包含了 git commit前要執(zhí)行的腳本?，F(xiàn)在，當(dāng)你執(zhí)行 git commit 的時(shí)候，會(huì)首先執(zhí)行 npm run lint腳本，通過(guò) Lint 檢查后才會(huì)正式提交代碼記錄。但是會(huì)出現(xiàn)這樣一種情況，就是我只修改了一個(gè)文件，這個(gè)檢查還是全量檢查，所以這個(gè)時(shí)候需要另外一個(gè)工具了。
lint-staged就是用來(lái)解決上述全量掃描問(wèn)題的，可以實(shí)現(xiàn)只對(duì)存入暫存區(qū)的文件進(jìn)行 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 ."
    ]
  }

接下來(lái)我們需要在 Husky 中應(yīng)用lint-stage，回到.husky/pre-commit腳本中，將原來(lái)的npm run lint換成如下腳本:

npx --no -- lint-staged

這樣，我們便實(shí)現(xiàn)了提交代碼時(shí)的增量 Lint 檢查。

安裝commitlint

不知道你有沒(méi)有遇到過(guò)，團(tuán)隊(duì)合作的時(shí)候，你的同事在提交代碼的時(shí)候，提交信息只有提交二字！！根本不懂他改了什么功能或者是新增了什么需求，或者是改了什么bug！這時(shí)候我們就要規(guī)范起提交信息來(lái)！

yarn add commitlint @commitlint/cli @commitlint/config-conventional -D

接下來(lái)新建.commitlintrc.js：

module.exports = { extends: ["@commitlint/config-conventional"] };

這個(gè)插件提交的規(guī)范主要由兩部分組成，分別為<type>和subject。常用的 type 值包括如下:

feat: 添加新功能。
fix: 修復(fù) Bug。
chore: 一些不影響功能的更改。
docs: 專指文檔的修改。
perf: 性能方面的優(yōu)化。
refactor: 代碼重構(gòu)。
test: 添加一些測(cè)試代碼等等。

接下來(lái)我們將commitlint的功能集成到 Husky 的鉤子當(dāng)中，在終端執(zhí)行如下命令即可:

npx husky add .husky/commit-msg "npx --no-install commitlint -e $HUSKY_GIT_PARAMS"

然后就可以完成提交信息的規(guī)范了，當(dāng)提交的信息不符合規(guī)范時(shí)，會(huì)對(duì)提交操作的終止，并提示錯(cuò)誤，至此我們就完成了這次的從零搭建項(xiàng)目了。

總結(jié)

這次的搭建過(guò)程中并沒(méi)有安裝css處理插件，但是在vite中安裝諸如sass、less都是比較簡(jiǎn)單的，就舉例子sass直接運(yùn)行yarn add sass即可（本文其實(shí)很多插件都是以sass為模板安裝的），那么這次的坑就踩到這里了，期待下次的踩坑之旅。倉(cāng)庫(kù)地址

參考：

《深入淺出vite》

從 0 開(kāi)始手把手帶你搭建一套規(guī)范的 Vue3.x 項(xiàng)目工程環(huán)境

到此這篇關(guān)于從零搭建一個(gè)vite+vue3+ts規(guī)范基礎(chǔ)項(xiàng)目的文章就介紹到這了,更多相關(guān)vite+vue3+ts項(xiàng)目搭建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: