uniapp(vue3+ts+vite+pinia) 项目架构搭建

​

前言

• 最近看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"
  ],
}
​```