uniapp+vue3+vite+typescript架構搭建小程序

本文記錄通過cli腳手架搭建uniapp+vue3+vite+typescript項目過程。

背景

因為在開發uniapp項目時需要啟動HbuilderX來運行項目,但很多時候是習慣使用vscode去開發的,然后再在小程序IDE上打開查看效果,一個項目需要開3個軟件是很麻煩的一件事,所以看看能不能去掉HbuilderX這一環節,一看還真可以,uniapp官網已經寫出了使用cli創建項目的方法,我搭建了運行了一下沒有問題,這里去記錄一下搭建與完善過程。

創建項目

在uniapp文檔中有明確說明有創建命令:傳送門。我這里創建的是vite+ts的,我就直接貼代碼了

vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project

如果碰到以下報錯,需要去直接下載模板

[圖片上傳失敗...(image-50ab5d-1680707519977)]

可以去uni-preset-vue的vite分支下直接下載zip包,解壓后粘貼到自己的項目中。

完成后目錄結構是這樣

[圖片上傳失敗...(image-c44f18-1680707519977)]

查看package.json中的script命令,運行命令啟動小程序,這里我用微信小程序為例

pnpm run dev:mp-weixin

啟動起來后打開微信小程序IDE,選擇導入,然后選擇dist目錄下dev文件夾下的mp-weixin導入,這里運行不同的環境和不同的小程序平臺,打的包是不同的,所以注意區分。

項目打開后初始就是這樣,并且支持熱更新,還是很方便的。

[圖片上傳失敗...(image-df148a-1680707519977)]

配置eslint

接下來就要配置代碼檢查的東西了,

首先安裝eslint

pnpm add eslint -D

初始化eslint

pnpm eslint --init

我的選擇如下

[圖片上傳失敗...(image-71753e-1680707519977)]

安裝好后進入.eslintrc.js文件,在env中添加node:true解決報錯

在package.json中添加lint命令

"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"

接下來運行pnpm run lint發現代碼有錯誤我們一一解決。

  1. .vue文件解析錯誤,代碼錯誤如下

[圖片上傳失敗...(image-42a23b-1680707519977)]

解決方法

"parser": "vue-eslint-parser",
"parserOptions": {
    "ecmaVersion": "latest",
    "parser": "@typescript-eslint/parser",
    "sourceType": "module"
},

原因可以看這篇文章:

vue3+ts+vite項目中使用eslint+prettier+stylelint+husky指南 - 掘金

  1. vue文件命名不規范

[圖片上傳失敗...(image-e0325f-1680707519977)]

解決方法:在eslint中配置相應規則

 "rules": {
    'vue/multi-word-component-names':"off",
}

配置.eslintignore文件

**/node_modules/*
**/build/*
**/dist/*

配置prettier

添加prettier

pnpm add prettier -D

在根目錄新建.prettierrc.js

module.exports = {
  // 一行的字符數,如果超過會進行換行,默認為80
  printWidth: 100,
  // 一個tab代表幾個空格數,默認為2
  tabWidth: 2,
  // 是否使用tab進行縮進,默認為false,表示用空格進行縮減
  useTabs: false,
  // 字符串是否使用單引號,默認為false,使用雙引號
  singleQuote: false,
  // 行位是否使用分號,默認為true
  semi: false,
  // 是否使用尾逗號,有三個可選值"<none|es5|all>"
  trailingComma: 'none',
  // 對象大括號直接是否有空格,默認為true,效果:{ foo: bar }
  bracketSpacing: true
}

在package.json中配置format命令

"format": "prettier --write . && pnpm lint --fix"

解決eslint 與 prettier沖突問題

安裝eslint-config-prettier + eslint-plugin-prettier。

pnpm add eslint-config-prettier eslint-plugin-prettier -D

配置eslint

 extends: [
  "eslint:recommended",
  "plugin:vue/vue3-essential",
  "plugin:@typescript-eslint/recommended",
  //新增
  "plugin:prettier/recommended"
],

配置.prettierignore

dist
node_modules

配置husky

安裝

pnpm add husky -D

在package.json中配置命令

"postinstall": "husky install",

運行pnpm postinstall 后就會出現一個..husky目錄

再運行pnpm husky add .husky/pre-commit 命令添加一個pre-commit文件

pnpm husky add .husky/pre-commit 

里面寫入

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

pnpm format

這樣在執行git commit 的時候就會現執行pnpm format 如果報錯則不會提交。

最后

如果有其他的調整,我也會第一時間更新這篇文章,希望可以幫助到大家,這個demo的代碼我已上傳到github,有興趣的小伙伴可以查看傳送門。=

參考

搭建中參考了兩篇很不錯的文章,感謝大佬們的文章給了我很大的啟發。

實戰--為vite-vue3-ts項目添加 eslint + prettier + lint-staged 項目規范

vue3+ts+vite項目中使用eslint+prettier+stylelint+husky指南

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容