本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

因为新项目的原因，需要使用 uniapp 开发一个微信小程序，借此机会想记录一下整个项目的搭建过程，整体项目的源码放在GitHub

• 源码地址：github.com/DimplesY/un…

基础项目搭建

因为项目使用的 vue3 版本的 uniapp，为了开发方便，直接使用官方提供的 cli 模版

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

然后进行项目依赖的安装，就获得了一个最基本 uniapp 项目

配置插件

安装插件

这里我使用的是一些自己平时开发过程当中用到的插件

• 整合 unocss 作为css框架

• 整合 unplugin-auto-import 自动导入API

• 整合 vite-plugin-vue-setup-extend

• 整合 unocss-preset-weapp 做类名转换

整合插件

按照自己平时写代码的风格，在项目根目录下新建一个 vite目录，将各个插件的配置分别编写到各自的文件当中，目录结构如下：

首先我们需要安装一下各个插件的依赖

npm i -D unplugin-auto-import vite-plugin-vue-setup-extend unocss unplugin-transform-we-class unocss-preset-weapp unplugin-unocss-attributify-wechat

各个文件中的代码如下所示:

// index.ts

import uni from '@dcloudio/vite-plugin-uni'
import { defaultAttributes, defaultIgnoreNonValuedAttributes, presetAttributifyWechat } from 'unplugin-unocss-attributify-wechat/vite'
import createUnoCSS from './unocss'
import createAutoImport from './auto-import'
import createSetupExtend from './setup-extend'
import createTransformWeClass from './transform-class'

export default function createVitePlugins() {
  const vitePlugins = [uni()]
  vitePlugins.push(
    presetAttributifyWechat({
      attributes: [...defaultAttributes],
      ignoreNonValuedAttributes: [...defaultIgnoreNonValuedAttributes],
    }),
  )
  process.env.UNI_COMPILER !== 'nvue' && vitePlugins.push(createUnoCSS())
  vitePlugins.push(createTransformWeClass())
  vitePlugins.push(createAutoImport())
  vitePlugins.push(createSetupExtend())
  return vitePlugins
}

// auto-import.ts

import type { Options } from 'unplugin-auto-import/types'
import autoImport from 'unplugin-auto-import/vite'

export default function createAutoImport(options?: Options | undefined) {
  return autoImport({
    imports: ['uni-app', 'vue', 'pinia'],
    dts: 'src/types/auto-imports.d.ts',
    eslintrc: {
      enabled: true, // Default `false`
      filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
      globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
    },
    ...options,
  })
}

// setup-extend.ts

import type { ExtendOptions } from 'vite-plugin-vue-setup-extend';
import setupExtend from 'vite-plugin-vue-setup-extend'

export default function createSetupExtend(options?: ExtendOptions | undefined) {
  return [setupExtend(options)]
}

// transform-class.ts

import type { Options } from 'unplugin-transform-we-class/types'
import transformWeClass from 'unplugin-transform-we-class/vite'

export default function createTransformWeClass(options?: Options) {
  return transformWeClass(options)
}

// unocss.ts

import type { VitePluginConfig } from 'unocss/vite'
import UnoCSS from 'unocss/vite'

export default function createUnoCSS(configOrPath?: string | VitePluginConfig<{}> | undefined) {
  return UnoCSS(configOrPath)
}

使用 eslint + prttier 约束代码风格

这里 eslint 我直接使用 @antfu/eslint-config，如果你有自己习惯的 eslint 配置可以自己进行配置，同时 prettier 与 eslint 整合的时候需要用到 eslint-config-prettier 和 eslint-plugin-prettier，这里我们直接通过如下命令进行安装：

npm i eslint @antfu/eslint-config eslint-config-prettier eslint-plugin-prettier -D

然后在项目根目录下面建立 .eslintrc 文件，配置如下，可以通过 eslint 官网查看到更多自定义的配置：

{
  "root": true,
  "extends": ["@antfu", "prettier", ".eslintrc-auto-import.json"]
}

建立 .prettierrc，配置如下，具体配置看个人习惯，可以通过 prettier 官网查看到更多的配置

{
  "arrowParens": "always",
  "bracketSameLine": true,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": false,
  "printWidth": 150,
  "proseWrap": "never",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "useTabs": false,
  "vueIndentScriptAndStyle": false,
  "singleAttributePerLine": false
}

最后，在整个项目当中，我使用的 unocss.config.ts 配置如下:

import presetWeapp from 'unocss-preset-weapp'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    // @see https://github.com/MellowCo/unocss-preset-weapp
    presetWeapp({
    }),
  ],
})