vscode+vite+ts助你高效开发uni-app项目

前言

最近在基于uni-app开发小程序，由于公司使用的是 HBuilder创建的项目，每次都需要打开HBuilderX当运行工具，开发体验真是难受至极。打算使用vscode + vite + ts创建一套模版，脱离 HBuilder

为什么不喜欢HBuilderX呢？

点击查看 github

cli创建uni-app 项目

1、 创建 Vue3/Vite 工程

# npx degit https://github.com/dcloudio/uni-preset-vue.git#分支名称 自定义项目名称

# 创建以 javascript 开发的工程  

npx degit dcloudio/uni-preset-vue#vite uni-starter

# 创建以 typescript 开发的工程  

npx degit dcloudio/uni-preset-vue#vite-ts uni-starter

• 
  
• degit 可以帮助你从任意 git 仓库中克隆纯净的项目，忽略整个仓库的 git 历史记录。
  
• 可以使用 npm install -g degit 命令全局安装
  

2、进入工程目录

cd uni-starter

3、更新 uni-app依赖版本

npx @dcloudio/uvm@latest

4、安装依赖

推荐一个好用的包管理器 antfu/ni

ni 或 pnpm install 或 bun install

5、运行

# 运行到 h5   

npm run dev:h5  
# 运行到 app   

npm run dev:app  
# 运行到 微信小程序  

npm run dev:mp-weixin  

6、打包

# 打包到 h5   

npm run build:h5  
# 打包到 app   

npm run build:app  
# 打包到 微信小程序  

npm run build:mp-weixin  

dcloudio 官方更多模版地址

自动引入

使用了自动引入就无需写下面的 import {xx} from @dcloudio/uni-app/vue。

如果不喜欢此方式可忽略

每个页面使用vue api或者uniapp api都需要引入，个人感觉有些麻烦

import { shallowRef,computed,watch } from 'vue';
import { onLoad,onShow } from "@dcloudio/uni-app";

1、 下载自动引入插件 pnpm add unplugin-auto-import -D

2、vite.config.ts 配置如下:

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
// 引入自动导入插件
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
uni(),
// 配置自动导入 vue相关函数, uni-app相关函数。ref, reactive，onLoad等
AutoImport({
imports: ['vue','uni-app'],
dts: './typings/auto-imports.d.ts',

    }),

  ],

});

3、tsconfig.json include新增如下类型文件配置

"include": [
"src/**/*.ts", 
"src/**/*.d.ts", 
"src/**/*.tsx", 
"src/**/*.vue",
// unplugin-auto-import/vite自动引入的类型声明文件
"typings/**/*.d.ts",
"typings/**/*.ts"

]

注意： Option 'importsNotUsedAsValues' is deprecated and will stop functioning in TypeScript 5.5. Specify compilerOption '"ignoreDeprecations": "5.0"' to silence this error. Use 'verbatimModuleSyntax' instead

翻译一下: 选项“importsNotUsedAsValues”已弃用，并将停止在TypeScript 5.5中运行。指定compilerOption“”ignoreDeprecations“：”5.0“”以消除此错误。 请改用“verbatimModuleSyntax”。

如果出现此警告⚠️可添加如下配置

eslint自动格式化

为了使用方便，这里直接使用 antfu大佬的插件了，有需要的配置自行再添加到rules里面。

注意： 这个插件可能更适合web端，antfu基本是不写小程序的，如果有特殊需要或者想更适合小程序版本格式化可以自行配置或者网上找一些格式化方案，这类文章还是比较多的。

使用 eslint + @antfu/eslint-config点击查看使用

1、 安装插件

pnpm add -D eslint @antfu/eslint-config

2、新建.eslintrc.cjs

module.exports = {
root: true,
env: {
browser: true,
node: true,
es6: true,

  },
// https://github.com/antfu/eslint-config
extends: '@antfu',
rules: {
// your custom rules...
'vue/html-self-closing': ['error', {
html: { normal: 'never', void: 'always' },

    }],
'no-console': 'off', // 禁用对 console 的报错检查
// "@typescript-eslint/quotes": ["error", "double"], // 强制使用双引号
'@typescript-eslint/semi': ['error', 'always'], // 强制使用行位分号

  },

};

3、新建.vscode/settings.json

{
// 禁用 prettier，使用 eslint 的代码格式化
"prettier.enable": false,
// 保存时自动格式化
"editor.formatOnSave": false,
// 保存时自动修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.organizeImports": false
},
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"html",
"markdown",
"json",
"jsonc",
"yaml"
]
}

4、此时打开App.vue 查看已经检查出规范了，只要保存就会自动格式化

5、提交代码时自动对暂存区代码进行格式化操作

pnpm add -D lint-staged simple-git-hooks

// package.json

"scripts": {
+ "prepare": "pnpx simple-git-hooks",

}
+"simple-git-hooks": {
+  "pre-commit": "pnpm lint-staged"
+},
+"lint-staged": {
+  "*": "eslint --fix"
+}

"prepare": "pnpx simple-git-hooks": 在执行npm install命令之后执行的脚本，用于初始化simple-git-hooks配置

editorConfig 规范

项目根目录添加.editorConfig文件，统一不同编辑器的编码风格和规范。

vscode需要安装插件EditorConfig for VS Code获取支持

# @see: http://editorconfig.org


root = true


[*] # 表示所有文件适用

charset = utf-8 # 设置文件字符编码为 utf-8

indent_style = space # 缩进风格为 空格(tab | space)

indent_size = 2 # 缩进大小为 2

end_of_line = lf # 换行符为 lf (crlf | lf | cr)

insert_final_newline = true # 在文件末尾插入一个新行

trim_trailing_whitespace = true # 去除行尾空格


[*.md] # 表示所有 .md 文件适用

insert_final_newline = false # 在文件末尾不插入一个新行

trim_trailing_whitespace = false # 不去除行尾空格

安装组件库

成套的全端兼容ui库包括：

• 
  
• uni-ui：官方组件库，兼容性好、组件封装性好、功能强大，而且还有大佬编写的ts类型。目前正在使用的组件库
  
• uview-plus：uview-plus3.0是基于uView2.x修改的vue3版本。
  
• uViewUI：组件丰富、文档清晰，支持nvue
  
• colorUI css库：颜值很高，css库而非组件
  
• 图鸟UI：高颜值UI库
  
• 图鸟UI vue3版：高颜值UI库，vue3+ts版组件，值得尝试
  
• first UI：分开源版和商业版，虽然组件很全、功能强大，但是大多数组件都是需要购买的商业版才能用
  

1、安装组件

pnpm add @dcloudio/uni-ui -S

pnpm add sass -D

2、配置easycom自动引入组件

// pages.json
{
"easycom": {
"autoscan": true,
"custom": {
// uni-ui 规则如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},
// 其他内容

    pages:[
// ...
]
}

3、安装uni-uits类型库

pnpm add -D @uni-helper/uni-ui-types

具体使用方法请查看：uni-ui-types

后续

模版更多内置功能(如网络请求、登录、授权、上传、下载、分享)等更新中...

参考链接：

• 
  
• uni-app 项目支持 vue 3.0 介绍，及升级指南
  
• 当 uni-app 遇见 vscode
  
• 关于uni-app的ui库、ui框架、ui组件