vite搭建uniapp vue3项目

介绍

关于 vite 创建 vue3 项目的步骤，请参考我之前的文章，本篇介绍使用 vite 创建 uniapp 项目。

主要特征：

• vue3
• pinia
• typescript
• eslint
• prettier
• husky

创建 uniapp vue3 项目基础模版

进入 uniapp 官网，选择快速上手模块，创建 uniapp 使用 vue3/vite 版 官网指南。

创建命令

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

或者下载gitee源码。

pinia

安装依赖

npm install pinia@2.0.33

修改根目录下 main.ts 文件，最后内容如下

import { createSSRApp } from 'vue';
import * as Pinia from 'pinia';
import App from './App.vue';
export function createApp() {
  const app = createSSRApp(App);
  app.use(Pinia.createPinia());
  return {
    app,
    Pinia // 此处必须将 Pinia 返回
  };
}

eslint 和 prettier

安装依赖

npm i @vue/eslint-config-typescript @vue/eslint-config-prettier @rushstack/eslint-patch eslint prettier -D

在项目根目录下面创建 .eslintrc.cjs 文件

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  root: true,
  "extends": [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/eslint-config-typescript",
    "@vue/eslint-config-prettier/skip-formatting"
  ],
  parserOptions: {
    ecmaVersion: "latest"
  },
  rules: {
    "vue/multi-word-component-names": "off"
  }
}

在项目根目录下面创建 .eslintignore 文件

/dist/**

# 忽略 node_modules 目录及其子目录
/node_modules/**

在项目根目录下面创建 .prettierrc.json 文件

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": true,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
}

在 package.json 新增两个 scripts 命令：

{
  "scripts": {
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .eslintignore",
    "format": "prettier --write src/"
  }
}

现在我们可以运行命令 npm run lint 检查 eslnt, 运行 npm run format 使用 prettier 规则格式化代码。

husky

husky官网地址

安装依赖

npm install husky --save-dev

启用 Git hooks

npx husky install

安装之后自动启用 Git 钩子

npm pkg set scripts.prepare="husky install"

运行命令之后，你的项目根目录下的 package.json 文件里 scripts 会新增一条记录

{
  "scripts": {
    "prepare": "husky install" 
  }
}

我们先在 scritps 里新增一条命令：

{
  "scripts": {
    "check-files": "run-s type-check lint format" 
  }
}

这个命令的意思是：依次执行npm-script: type-check -> lint -> format 。

为了使用 run-s 命令，我们需要先安装 npm-run-all

npm i npm-run-all -D

运行命令创建一个 pre-commit 钩子并添加一个 npm-script。

npx husky add .husky/pre-commit "npm run check-files"

试着 commit 一个 git add,在 git commit 之前会先执行 "npm run check-files"，如果报错，则会终止提交。

自动引入

安装依赖

npm i unplugin-auto-import unplugin-vue-components -D

配置 vite.config.ts

import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';

// ...

export default defineConfig({
    plugins: [
        
        AutoImport({
            dts: 'auto-imports.d.ts',
            include: [
                /.[tj]sx?$/, // ts, .tsx, .js, .jsx
                /.vue$/,
                /.vue?vue/, // .vue
                /.md$/ // .md
            ],
            imports: ['vue','pinia'] // 自动导入vue、vue-router、pinia 内的部分api
        }),
        // 注意：需要放在 uni() 之前
        Components({
            // 自动加载组件的目录配置,默认的为 'src/components'
            dirs: ['src/components'],
            extensions: ['vue'], // 组件的有效文件扩展名
            // 自定义组件的解析器
            // 生成`components.d.ts`文件，全局组件的ts的全局声明,
            // 也接受自定义文件名的路径
            // 如果安装了typescript包default: true
            // dts: 'components.d.ts'
        }),
        uni(),
    ],
});

修改tsconfig.json 文件, include 新增一项 "auto-imports.d.ts"。

现在可以自动引入 vue、pinia 的部分 api，自动加载 src/components 的 组件。

关于其他配置问题，请参考以往文章 vite 创建 vue3 项目。