Vite+Vue3+TS 初始化項目

項目初始化

項目介紹： 本項目使用vite2.7.0和vue3.2.23 和 Typescript4.4.4（2021年12月初）最新的版本來實現(xiàn)后臺管理項目梆惯。并會使用element-plus做UI庫，axios做數(shù)據(jù)交互吗垮，vuex做狀態(tài)管理垛吗，vue-router做路由管理, ESlint+Prettier做代碼校驗和格式化， Echarts做頁面圖表可視化烁登， less來做css預(yù)編譯怯屉。

初始化源碼地址github

1. 準(zhǔn)備工作

node -v # 14.17.5 要求要 node 12版本以上
npm -v
yarn -v # 1.22.17 當(dāng)前最新版

本項目使用 **vscode**作為主編譯器[vscode使用](http://www.reibang.com/p/8e127a3aba55)

2. 初始化

  1. 參考vite的文檔create-vite來做init: vite文檔地址 
yarn create vite my-demo-app --template vue-ts # 直接初始化vite+vue+ts
cd my-demo-app
yarn
yarn dev # 能看到localhost:3000的默認歡迎頁面則初始化成功

此時的vite.config.js和tsconfig.js文件均已初始化默認選項。

vite.config.js的常用配置

tsconfig.json的常用配置

啟動項目不能通過本地ip地址訪問：解決辦法

  1. 引用UI庫:element-plus

    yarn add element-plus

    使用方法更多方式參考：更多用法

    // 這里僅展示完整引入
// 修改 main.ts文件
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
createApp(App).use(ElementPlus, { size: 'small', zIndex: 100 }).mount('#app')

    <el-button type="primary"> 按鈕 </el-button> /*如果頁面上能看到藍色的按鈕饵沧，就說明引用成功了*/

    使用方式幾乎和element-ui保持一致

  2. 使用 Less來做css預(yù)編譯

yarn add less less-loader -D

然后再組件中使用less測試是否成功

<style scoped lang="less">
.text {
  color: red;
}
</style>
  1. 修改一些默認目錄結(jié)構(gòu)锨络，這個也可以后面什么時候用到什么時候再定義。

3. 使用 ESlint + Prettier 做代碼校驗和格式化

    哪里不能用校驗參考禁用[校驗方法](http://www.reibang.com/p/bb590f8e1c98)
  1. 引入eslint
yarn add eslint -D
yarn add @typescript-eslint/eslint-plugin -D
yarn add @typescript-eslint/parser -D
yarn add eslint-config-alloy -D
yarn add eslint-config-prettier -D
yarn add eslint-plugin-prettier -D
yarn add eslint-plugin-vue -D
yarn add vue-eslint-parser -D
yarn add vite-plugin-eslint -D

  1. 配置eslint狼牺， 在根目錄創(chuàng)建.eslintrc.js文件羡儿，并寫入以下內(nèi)容：

     module.exports = {
   root: true,
   globals: {
     defineEmits: 'readonly',
     defineProps: 'readonly',
     ElMessage: 'readonly',
     ElMessageBox: 'readonly'
   },
   extends: ['plugin:@typescript-eslint/recommended', 'plugin:vue/vue3-recommended', 'airbnb-base'],
   parserOptions: {
     parser: '@typescript-eslint/parser',
     ecmaVersion: 2020
   },
   rules: {
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 禁用 debugger
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 禁用 console
     'no-bitwise': 'off', // 禁用按位運算符
     'no-tabs': 'off', // 禁用 tab
     'array-element-newline': ['error', 'consistent'], // 強制數(shù)組元素間出現(xiàn)換行
     indent: ['error', 2, { MemberExpression: 0, SwitchCase: 1, ignoredNodes: ['TemplateLiteral'] }], // 強制使用一致的縮進
     quotes: ['error', 'single'], // 強制使用一致的反勾號、雙引號或單引號
     'comma-dangle': ['error', 'always-multiline'], // 要求或禁止末尾逗號
     'object-curly-spacing': ['error', 'always'], // 強制在大括號中使用一致的空格
     'max-len': ['error', 120], // 強制一行的最大長度
     'no-new': 'off', // 禁止使用 new 以避免產(chǎn)生副作用
     'linebreak-style': 'off', // 強制使用一致的換行風(fēng)格
     'import/extensions': 'off', // 確保在導(dǎo)入路徑中統(tǒng)一使用文件擴展名
     'eol-last': 'off', // 要求或禁止文件末尾存在空行
     'no-shadow': 'off', // 禁止變量聲明與外層作用域的變量同名
     'no-unused-vars': 'warn', // 禁止出現(xiàn)未使用過的變量
     'import/no-cycle': 'off', // 禁止一個模塊導(dǎo)入一個有依賴路徑的模塊回到自己身上
     'arrow-parens': 'off', // 要求箭頭函數(shù)的參數(shù)使用圓括號
     semi: ['error', 'never'], // 要求或禁止使用分號代替 ASI
     eqeqeq: 'on', // 要求使用 === 和 !==
     'no-param-reassign': 'off', // 禁止對 function 的參數(shù)進行重新賦值
     'import/prefer-default-export': 'off', // 如果模塊只輸入一個名字是钥，則傾向于默認輸出
     'no-use-before-define': 'on', // 禁止在變量定義之前使用它們掠归，則傾向于默認輸出
     'no-continue': 'off', // 禁用 continue 語句
     'prefer-destructuring': 'off', // 優(yōu)先使用數(shù)組和對象解構(gòu)
     'no-plusplus': 'off', // 禁用一元操作符 ++ 和 --
     'prefer-const': 'warn', // 要求使用 const 聲明那些聲明后不再被修改的變量
     'global-require': 'off', // 要求 require() 出現(xiàn)在頂層模塊作用域中
     'no-prototype-builtins': 'off', // 禁止直接調(diào)用 Object.prototypes 的內(nèi)置屬性
     'consistent-return': 'off', // 要求 return 語句要么總是指定返回的值缅叠，要么不指定
     'one-var-declaration-per-line': 'off', // 要求或禁止在變量聲明周圍換行
     'one-var': 'off', // 強制函數(shù)中的變量要么一起聲明要么分開聲明
     'import/named': 'off', // 確保命名導(dǎo)入與遠程文件中的命名導(dǎo)出相對應(yīng)
     'object-curly-newline': 'off', // 強制大括號內(nèi)換行符的一致性
     'default-case': 'off', // 要求 switch 語句中有 default 分支
     'no-trailing-spaces': 'on', // 禁用行尾空格
     'func-names': 'off', // 要求或禁止使用命名的 function 表達式
     radix: 'off', // 強制在 parseInt() 使用基數(shù)參數(shù)
     'no-unused-expressions': 'off', // 禁止出現(xiàn)未使用過的表達式
     'no-underscore-dangle': 'off', // 禁止標(biāo)識符中有懸空下劃線
     'no-nested-ternary': 'off', // 禁用嵌套的三元表達式
     'no-restricted-syntax': 'off', // 禁用特定的語法
     'no-await-in-loop': 'off', // 禁止在循環(huán)中出現(xiàn) await
     'import/no-extraneous-dependencies': 'off', // 禁止使用外部包
     'import/no-unresolved': 'off', // 確保導(dǎo)入指向一個可以解析的文件/模塊
     'template-curly-spacing': ['error', 'always'], // 要求或禁止模板字符串中的嵌入表達式周圍空格的使用
     '@typescript-eslint/no-var-requires': 'on', // 除import語句外，禁止使用require語句
     '@typescript-eslint/no-empty-function': 'off', // 不允許空函數(shù)
     '@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 類型
     'guard-for-in': 'off', // 要求 for-in 循環(huán)中有一個 if 語句
     'class-methods-use-this': 'off', // 強制類方法使用 this
     'vue/html-indent': ['error', 2], // 在<template>中強制一致縮進
     'vue/html-self-closing': 'off', // 執(zhí)行自閉合的風(fēng)格
     'vue/max-attributes-per-line': [
       // 強制每行屬性的最大數(shù)量
       'warn',
       {
         singleline: {
           max: 5,
           allowFirstLine: true
         },
         multiline: {
           max: 1,
           allowFirstLine: false
         }
       }
     ],
     'vue/singleline-html-element-content-newline': 'off' // 要求單行元素的內(nèi)容前后有一個換行符
   }
 }

  2. 配置 .eslintignore文件

    /build/
/config/
/dist/
/*.js
/*.zip
/*.rar
/node_modules/
/test/unit/coverage/

  3. 引入Prettier來自動格式化代碼

    yarn add prettier -D

  4. 配置 Prettier虏冻， 在根目錄下創(chuàng)建 prettier.config.js文件肤粱，并寫入以下內(nèi)容：

    // prettier.config.js or .prettierrc.js
module.exports = {
  // 一行最多 100 字符
  printWidth: 100,
  // 使用 2 個空格縮進
  tabWidth: 2,
  // 不使用縮進符，而使用空格
  useTabs: false,
  // 行尾需要有分號
  semi: false,
  // 使用單引號
  singleQuote: true,
  // 對象的 key 僅在必要時用引號
  quoteProps: 'as-needed',
  // jsx 不使用單引號厨相，而使用雙引號
  jsxSingleQuote: false,
  // 末尾不需要逗號
  trailingComma: 'none',
  // 大括號內(nèi)的首尾需要空格
  bracketSpacing: true,
  // jsx 標(biāo)簽的反尖括號需要換行
  jsxBracketSameLine: false,
  // 箭頭函數(shù)领曼，只有一個參數(shù)的時候，也需要括號
  arrowParens: 'always',
  // 每個文件格式化的范圍是文件的全部內(nèi)容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要寫文件開頭的 @prettier
  requirePragma: false,
  // 不需要自動在文件開頭插入 @prettier
  insertPragma: false,
  // 使用默認的折行標(biāo)準(zhǔn)
  proseWrap: 'preserve',
  // 根據(jù)顯示樣式?jīng)Q定 html 要不要折行
  htmlWhitespaceSensitivity: 'css',
  // 換行符使用 lf
  endOfLine: 'lf'
}

  5. 對應(yīng)的vscode編譯器也要安裝 ESLint 和 Prettier 擴展

  6. 編輯 vscode 編輯器的settings.json文件蛮穿。 ctrl+shift+p打開命令： Open Workspace Settings(JSON)選項庶骄，就會在根目錄出現(xiàn)一個.vscode的文件夾，修改里面的 settings.json文件如下：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2
}

此時可以代碼自動格式化啦践磅！

初始化源碼地址[github](Lzq811/vite-vue-ts-eslint at vite2+vue3+ts4+eslint項目初始化 (github.com))

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末单刁，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子音诈，更是在濱河造成了極大的恐慌幻碱，老刑警劉巖绎狭，帶你破解...
    沈念sama閱讀 206,214評論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件细溅，死亡現(xiàn)場離奇詭異，居然都是意外死亡儡嘶，警方通過查閱死者的電腦和手機喇聊，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來蹦狂，“玉大人誓篱，你說我怎么就攤上這事】ǎ” “怎么了窜骄？”我有些...
    開封第一講書人閱讀 152,543評論 0贊 341
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長摆屯。 經(jīng)常有香客問我邻遏，道長，這世上最難降的妖魔是什么虐骑？ 我笑而不...
    開封第一講書人閱讀 55,221評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任准验，我火速辦了婚禮，結(jié)果婚禮上廷没，老公的妹妹穿的比我還像新娘糊饱。我一直安慰自己，他們只是感情好颠黎，可當(dāng)我...
    茶點故事閱讀 64,224評論 5贊 371
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布另锋。 她就那樣靜靜地躺著滞项，像睡著了一般。 火紅的嫁衣襯著肌膚如雪砰蠢。 梳的紋絲不亂的頭發(fā)上蓖扑，一...
    開封第一講書人閱讀 49,007評論 1贊 284
  • 城市分裂傳說
    那天，我揣著相機與錄音台舱，去河邊找鬼律杠。 笑死，一個胖子當(dāng)著我的面吹牛竞惋，可吹牛的內(nèi)容都是我干的柜去。 我是一名探鬼主播，決...
    沈念sama閱讀 38,313評論 3贊 399
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼拆宛，長吁一口氣：“原來是場噩夢啊……” “哼嗓奢！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起浑厚，我...
    開封第一講書人閱讀 36,956評論 0贊 259
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤股耽，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后钳幅，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體物蝙，經(jīng)...
    沈念sama閱讀 43,441評論 1贊 300
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,925評論 2贊 323
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年敢艰，在試婚紗的時候發(fā)現(xiàn)自己被綠了诬乞。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,018評論 1贊 333
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡钠导，死狀恐怖震嫉，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情牡属，我是刑警寧澤票堵，帶...
    沈念sama閱讀 33,685評論 4贊 322
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站逮栅，受9級特大地震影響悴势，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜证芭，卻給世界環(huán)境...
    茶點故事閱讀 39,234評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一瞳浦、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧废士，春花似錦叫潦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評論 0贊 19
  • 一樁弒父案矗蕊，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽短蜕。三九已至，卻和暖如春傻咖，著一層夾襖步出監(jiān)牢的瞬間朋魔，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評論 1贊 261
  • 情欲美人皮
    我被黑心中介騙來泰國打工卿操， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留警检，地道東北人。 一個月前我還...
    沈念sama閱讀 45,467評論 2贊 352
  • 代替公主和親
    正文 我出身青樓害淤，卻偏偏與公主長得像扇雕，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子窥摄，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,762評論 2贊 345