【2023】uniapp+vue3+ts超实用模板

构建超实用的 uniapp+vue3+ts 模板，从此编码体验和用户体验爽得飞起。

0、前置说明

本模板基于cli生成，全程时候用VSCode编码，增加类型提示，开发体验很好。

使用了图片压缩，再也不用先去外面压缩图片再重新上传了。使用了 unocss + unoIcons，再也不用从外面找图片/图标再引入了。使用了 svg-loadersvg 随便使用。开发环境： node >=18，pnpm >=8.10.2 。

生成项目：npx degit dcloudio/uni-preset-vue#vite-ts vue3-uniapp-template

1、引入 prerttier + eslint + stylelint1-1 .editorconfig file

# .editorconfig 文件root = true[*] # 表示所有文件适用charset = utf-8 # 设置文件字符集为 utf-8indent_style = space # 缩进风格（tab | space）indent_size = 2 # 缩进大小end_of_line = lf # 控制换行类型(lf | cr | crlf)trim_trailing_whitespace = true # 去除行首的任意空白字符insert_final_newline = true # 始终在文件末尾插入一个新行[*.md] # 表示仅 md 文件适用以下规则max_line_length = off # 关闭最大行长度限制trim_trailing_whitespace = false # 关闭末尾空格修剪

1-2 .prettierrc.cjs file

// .prettierrc.cjs 文件// @see  = {  singleQuote: true,  printWidth: 100,  tabWidth: 2,  useTabs: false,  semi: false,  trailingComma: 'all',  endOfLine: 'auto',}

1-3 .eslintrc.cjs file

// .eslintrc.cjs 文件module.exports = {  env: {    browser: true,    es2021: true,    node: true,  },  extends: [    'eslint:recommended',    'plugin:@typescript-eslint/recommended',    'plugin:vue/vue3-essential',    // eslint-plugin-import 插件， @see     'plugin:import/recommended',    // eslint-config-airbnb-base 插件， tips: 本插件也可以替换成 eslint-config-standard    'airbnb-base',    // 1. 接入 prettier 的规则    'prettier',    'plugin:prettier/recommended',    'vue-global-api',  ],  overrides: [    {      env: {        node: true,      },      files: ['.eslintrc.{js,cjs}'],      parserOptions: {        sourceType: 'script',      },    },  ],  parserOptions: {    ecmaVersion: 'latest',    parser: '@typescript-eslint/parser',    sourceType: 'module',  },  plugins: [    '@typescript-eslint',    'vue',    // 2. 加入 prettier 的 eslint 插件    'prettier',    // eslint-import-resolver-typescript 插件，@see     'import',  ],  rules: {    // 3. 注意要加上这一句，开启 prettier 自动修复的功能    'prettier/prettier': 'error',    // turn on errors for missing imports    'import/no-unresolved': 'off',    // 对后缀的检测，否则 import 一个ts文件也会报错，需要手动添加'.ts', 增加了下面的配置后就不用了    'import/extensions': [      'error',      'ignorePackages',      { js: 'never', jsx: 'never', ts: 'never', tsx: 'never' },    ],    // 只允许1个默认导出，关闭，否则不能随意export xxx    'import/prefer-default-export': ['off'],    'no-console': ['off'],    // 'no-unused-vars': ['off'],    // '@typescript-eslint/no-unused-vars': ['off'],    // 解决vite.config.ts报错问题    'import/no-extraneous-dependencies': 'off',    'no-plusplus': 'off',    'no-shadow': 'off',  },  // eslint-import-resolver-typescript 插件，@see   settings: {    'import/parsers': {      '@typescript-eslint/parser': ['.ts', '.tsx'],    },    'import/resolver': {      typescript: {},    },  },}

并安装相关的依赖包：

pnpm add -D eslint eslint-config-airbnb-base eslint-config-prettier eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser vue-global-api 

1-4 .stylelintrc.cjs file

// .stylelintrc.cjs 文件module.exports = {  root: true,  extends: [    'stylelint-config-standard',    'stylelint-config-standard-scss', // tips: 本插件也可以替换成 stylelint-config-recommended-scss    'stylelint-config-recommended-vue/scss',    'stylelint-config-html/vue',    'stylelint-config-recess-order',  ],  overrides: [    // 扫描 .vue/html 文件中的<style>标签内的样式    {      files: ['**/*.{vue,html}'],      customSyntax: 'postcss-html',    },    {      files: ['**/*.{css,scss}'],      customSyntax: 'postcss-scss',    },  ],  // 自定义规则  rules: {    // 允许 global 、export 、v-deep等伪类    'selector-pseudo-class-no-unknown': [      true,      {        ignorePseudoClasses: ['global', 'export', 'v-deep', 'deep'],      },    ],    'unit-no-unknown': [      true,      {        ignoreUnits: ['rpx'],      },    ],  },}

并安装相关的依赖包：

pnpm add -D stylelint stylelint-config-html stylelint-config-recess-order stylelint-config-recommended-vue stylelint-config-standard stylelint-config-standard-scss postcss postcss-html postcss-scss sass

2、引入husky+lint-staged+commitlint

2-1 先安装依赖：

pnpm i -D husky lint-staged commitlint @commitlint/cli @commitlint/config-conventional

2-2 再执行：npx husky install，并且在 package.json的scripts里面增加 "prepare": "husky install",（其他人安装后会自动执行） 根目录会生成 .hushy 文件夹。

package.josn 增加如下属性：

"lint-staged": {  "**/*.{html,vue,ts,cjs,json,md}": [    "prettier --write"  ],  "**/*.{vue,js,ts,jsx,tsx}": [    "eslint --fix"  ],  "**/*.{vue,css,scss,html}": [    "stylelint --fix"  ]},

2-3 根目录新增 commitlint.config.cjs，写内容如下：

// commitlint.config.cjsmodule.exports = {  extends: ['@commitlint/config-conventional'],}

2-4 husky通过一下命令增加个文件:

npx husky add .husky/pre-commit "npx --no-install -- lint-staged"npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

以后提交到暂存区的文件会自动格式化并修复，很好用，同时提交规范也有限制。

3、vite.config.ts 优化

修改index.html(可选)，在html标签增加：build-date="%BUILD_DATE%"，以后构建完就能看到构建时间了。 修改vite.config.ts，把内容改为如下：

import path from 'node:path'import { defineConfig, loadEnv } from 'vite'import uni from '@dcloudio/vite-plugin-uni'import dayjs from 'dayjs'import vue from '@vitejs/plugin-vue'import svgLoader from 'vite-svg-loader'import { visualizer } from 'rollup-plugin-visualizer'import ViteRestart from 'vite-plugin-restart'import Components from 'unplugin-vue-components/vite'// ElementPlusResolver,// AntDesignVueResolver,// VantResolver,// HeadlessUiResolver,// ElementUiResolverimport {} from 'unplugin-vue-components/resolvers'import AutoImport from 'unplugin-auto-import/vite'import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'import viteCompression from 'vite-plugin-compression'import viteImagemin from 'vite-plugin-imagemin'import vueSetupExtend from 'vite-plugin-vue-setup-extend'import UnoCSS from 'unocss/vite'import autoprefixer from 'autoprefixer'const htmlPlugin = () => {  return {    name: 'html-transform',    transformIndexHtml(html) {      return html.replace('%BUILD_DATE%', dayjs().format('YYYY-MM-DD HH:mm:ss'))    },  }}//  default ({ mode }) => {  // mode: 区分生产环境还是开发环境  // process.cwd(): 获取当前文件的目录跟地址  // loadEnv(): 返回当前环境env文件中额外定义的变量  const env = loadEnv(mode, path.resolve(process.cwd(), 'env'))  console.log(env)  return defineConfig({    plugins: [      uni(),      UnoCSS(),      htmlPlugin(),      svgLoader(),      // 打包分析插件      visualizer(),      ViteRestart({        // 通过这个插件，在修改vite.config.js文件则不需要重新运行也生效配置        restart: ['vite.config.js'],      }),      vueSetupExtend(),      // 原先引用组件的时候需要在目标文件里面import相关组件，现在就可以直接使用无需在目标文件import了      Components({        dirs: ['src/components'], // 目标文件夹        extensions: ['vue'], // 文件类型        dts: 'src/components.d.ts', // 输出文件，里面都是一些import的组件键值对        // ui库解析器，也可以自定义，需要安装相关UI库        resolvers: [          // VantResolver(),          // ElementPlusResolver(),          // AntDesignVueResolver(),          // HeadlessUiResolver(),          // ElementUiResolver()        ],      }),      AutoImport({        imports: ['vue'],        dts: 'src/auto-import.d.ts',      }),      createSvgIconsPlugin({        // 指定要缓存的文件夹        iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],        // 指定symbolId格式        symbolId: 'icon-[dir]-[name]',      }),      viteCompression(), // 会多出一些.gz文件，如xxx.js.gz，这里默认是不会删除xxx.js文件的，如果想删除也可以增加配置      // 这个图片压缩插件比较耗时，希望仅在生产环境使用      viteImagemin({        gifsicle: {          // gif图片压缩          optimizationLevel: 3, // 选择1到3之间的优化级别          interlaced: false, // 隔行扫描gif进行渐进式渲染          // colors: 2 // 将每个输出GIF中不同颜色的数量减少到num或更少。数字必须介于2和256之间。        },        optipng: {          // png          optimizationLevel: 7, // 选择0到7之间的优化级别        },        mozjpeg: {          // jpeg          quality: 20, // 压缩质量，范围从0(最差)到100(最佳)。        },        pngquant: {          // png          quality: [0.8, 0.9], // Min和max是介于0(最差)到1(最佳)之间的数字，类似于JPEG。达到或超过最高质量所需的最少量的颜色。如果转换导致质量低于最低质量，图像将不会被保存。          speed: 4, // 压缩速度，1(强力)到11(最快)        },        svgo: {          // svg压缩          plugins: [            {              name: 'removeViewBox',            },            {              name: 'removeEmptyAttrs',              active: false,            },          ],        },      }),    ],    css: {      postcss: {        plugins: [          autoprefixer({            // 指定目标浏览器            overrideBrowserslist: ['> 1%', 'last 2 versions'],          }),        ],      },    },    resolve: {      alias: {        '@': path.join(process.cwd(), './src'),      },    },    server: {      host: '0.0.0.0',      hmr: true,      port: 7001,      // 自定义代理规则      proxy: {        // 选项写法        '/api': {          target: ';,          changeOrigin: true,          rewrite: (path) => path.replace(/^\/api/, ''),        },      },    },  })}

安装相关依赖：

pnpm i -S dayjspnpm i -D vite-svg-loader rollup-plugin-visualizer vite-plugin-restart unplugin-vue-components unplugin-auto-import vite-plugin-svg-icons vite-plugin-compression vite-plugin-imagemin vite-plugin-vue-setup-extend unocss autoprefixer

新增 uno.config.ts，写入如下内容：

// uno.config.tsimport {  defineConfig,  presetAttributify,  presetUno,  presetIcons,  transformerDirectives,  transformerVariantGroup,} from 'unocss'export default defineConfig({  presets: [    presetUno(),    // 支持css class属性化，eg: `<button bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600" text="sm white">attributify Button</button>`    presetAttributify(),    // 支持图标，需要搭配图标库，eg: @iconify-json/carbon, 使用 `<button class="i-carbon-sun dark:i-carbon-moon" />`    presetIcons({      scale: 1.2,      warn: true,      extraProperties: {        display: 'inline-block',        'vertical-align': 'middle',      },    }),  ],  transformers: [    transformerDirectives(),    // 支持css class组合，eg: `<div class="hover:(bg-gray-400 font-medium) font-(light mono)">测试 unocss</div>`    transformerVariantGroup(),  ],})

在main.ts增加如下2行：

import 'virtual:svg-icons-register'import 'virtual:uno.css'

4、VSCode插件推荐及uniapp类型提示

4-1 VSCode插件推荐如下几个

Vue Language Features (Volar) 插件: vue.volarTypeScript Vue Plugin (Volar)插件: vue.vscode-typescript-vue-pluginuni-create-view插件: mrmaoddxxaa.create-uniapp-viewuni-app-schemas插件: uni-helper.uni-app-schemas-vscodeuni-helper插件: uni-helper.uni-helper-vscodeuniapp小程序扩展：evils.uniapp-vscodeSCSS IntelliSense插件: mrmlnc.vscode-scssUnoCss插件: antfu.unocss

4-2 uniapp 类型提示依赖包

pnpm i -D @types/wechat-miniprogram @uni-helper/uni-app-types

并把 tsconfig.json 修改如下：

{  "compilerOptions": {    "sourceMap": true,    "baseUrl": ".",    "paths": {      "@/*": ["./src/*"]    },    "lib": ["esnext", "dom"],-    "types": ["@dcloudio/types"]+    "types": ["@dcloudio/types", "@types/wechat-miniprogram", "@uni-helper/uni-app-types"]  },+  "vueCompilerOptions": {+    "nativeTags": ["block", "template", "component", "slot"]+  },  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],  "references": [{ "path": "./tsconfig.node.json" }]}

现在写代码 uni.xxx 就会有提示了，但是 uni 本身会报eslint错误，提示(no-undef),这个只需要在.eslintrc.cjs里面增加配置就行：

{    // ... 原本的配置+    globals: {+      uni: true,+    },}

这里只要加 uni，不需要加 wx等其他API，因为我们会用 uni.xxx代替wx.xxx 提高兼容性，以后多端不用改代码，如果有兼容性问题，可以使用条件编译。

5、pinia + pinia-plugin-persistedstate 插件

首先安装依赖包：

pinia i -S pinia pinia-plugin-persistedstate

然后写入文件

// src/store/useCountStore.tsimport { defineStore } from 'pinia'import { ref } from 'vue'export const useCountStore = defineStore(  'count',  () => {    const count = ref(0)    const increment = () => {      count.value++    }    return {      count,      increment,    }  },  {    persist: true,  },)

注意下面这个文件对持久化的处理，否则非h5环境不能正确持久化。

// src/store/index.tsimport { createPinia } from 'pinia'import { createPersistedState } from 'pinia-plugin-persistedstate' // 数据持久化const store = createPinia()store.use(  createPersistedState({    storage: {      getItem: uni.getStorageSync,      setItem: uni.setStorageSync,    },  }),)export default store

// src.main.tsimport { createSSRApp } from 'vue'import App from './App.vue'+ import store from './store'import 'virtual:svg-icons-register'import 'virtual:uno.css'export function createApp() {  const app = createSSRApp(App)+ app.use(store)  return {    app,  }}

使用如下（/src/pages/index/index.vue）：

// scriptimport { useCountStore } from '@/store/count'const countStore = useCountStore()

<!-- template --><view class="flex text-red-500">  Demo Count: {{ countStore.count }}  <button @click="countStore.increment">新增</button></view>

可以在小程序看到存储的值，如下图所示。

【2023】uniapp+vue3+ts超实用模板

原文链接：