uniapp(vue3+ts+vite+pinia) 项目架构搭建
最近看uniapp+vue3的社区挺活跃的,所以打算将的版本升级为uniapp+vue3。
·
前言
- 最近看uniapp+vue3的社区挺活跃的,所以打算将uniapp+vue2的版本升级为uniapp+vue3。
1、 创建项目
- 使用uniapp官方提供的脚手架创建一个项目
// 创建以 ts + vite 开发的工程
npx degit dcloudio/uni-preset-vue#vite-ts project-name
快速开始
// 安装依赖
yarn install | npm install | pnpm install
// 本地运行
yarn run dev:*
// 例如运行微信小程序
yarn dev:mp-weixin
// 打包
yarn run build:*
2、eslint 配置
- 安装eslint, 选用vue 官方推荐airbnb规则
yarn install lint-staged eslint-plugin-vue eslint-plugin-import eslint babel-eslint @vue/eslint-config-airbnb -D
3、husky 配置
- husky可以让我们使用Git的时候配置钩子,我们可以在git提交时做commit信息检查,eslint检查等等。
npx husky-init && npm install # npm
npx husky-init && yarn # Yarn 1
yarn dlx husky-init --yarn2 && yarn # Yarn 2
- 安装成功后,husky给我们一个创建了一个pre-commit的钩子的例子。在根目录的.husky文件夹中。
如图:
4、commitlint 配置
- commitlint帮助我们检查git commit的信息是否符合团队的规范。这对多人协作的时候是非常必要的。
pnpm install @commitlint/cli @commitlint/config-conventional -D
- 在根目录创建commitlint.config.js配置文件
module.exports = {
extends: ['@commitlint/config-conventional'],
};
将commitlint加到husky的钩子中
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
5、配置自动导入
pnpm install unplugin-auto-import
- 项目跟目录创建
types
目录,然后配置vite.config.ts
import { defineConfig } from "vite"
import uni from "@dcloudio/vite-plugin-uni"
// 加上下面这一行
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
uni(),
// 加上下面的配置
AutoImport({
include: [
/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
/\.vue$/,
/\.vue\?vue/, // .vue
],
imports: [
'vue',
'uni-app',
],
dts: 'typings/auto-imports.d.ts',
})
]
})
- 在
tsconfig.json
中添加如下配置:
{
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
// 加上下面两项
"typings/**/*.ts",
"typings/**/*.d.ts"
],
}
```
更多推荐
已为社区贡献2条内容
所有评论(0)