uniapp+vue3+vite+ts+pinia 小程序框架搭建uniapp+vue3+vite+ts+pinia 小

创建项目

通过 HBuilderX 创建

安装HBuilderX：官方IDE下载地址
参考：通过 HBuilderX 可视化界面

通过 vue-cli 命令创建

全局安装 vue-cli

npm install -g @vue/cli

使用Vue3/Vite版

创建以 typescript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板）

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

💡 Tips：

Vue3/Vite版要求 node 版本^14.18.0 || >=16.0.0
如果使用 HBuilderX（3.6.7以下版本）运行 Vue3/Vite 创建的最新的 cli 工程，需要在 HBuilderX 运行配置最底部设置 node路径为自己本机高版本 node 路径（注意需要重启 HBuilderX 才可以生效）
HBuilderX Mac 版本菜单栏左上角 HBuilderX->偏好设置->运行配置->node路径
HBuilderX Windows 版本菜单栏工具->设置->运行配置->node路径

使用vscode开发

安装插件

vue3 官方插件 Volar 进行语言支持

Eslint + Prettier 代码规范约束

uniapp 代码提示

一键创建页面、组件、分包

项目初始化

安装pinia

在终端中输入：

npm install pinia

接下来在 main.ts 中引入一下：

// main.ts
import { createSSRApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

export function createApp () {
  const app = createSSRApp(App).use(createPinia())
  return {
    app
  }
}

Eslint代码检查

安装Eslint 依赖

在终端中输入：

npm i @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-vue vue-eslint-parser -D

安装完依赖后，我们在根目录下新建 .eslintrc.js 文件，内容如下：

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
    sourceType: 'module',
    jsxPragma: 'React',
    ecmaFeatures: {
      jsx: true,
      tsx: true
    }
  },
  plugins: ['@typescript-eslint', 'prettier', 'import'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-recommended',
    'prettier'
  ],
  overrides: [
    {
      files: ['*.ts', '*.tsx', '*.vue'],
      rules: {
        'no-undef': 'off'
      }
    }
  ],
  rules: {
    'no-unused-vars': ['error', { varsIgnorePattern: '.*', args: 'none' }],
    '@typescript-eslint/no-unused-vars': 'off',
    'vue/component-name-in-template-casing': [
      'error',
      'kebab-case',
      {
        registeredComponentsOnly: false,
        ignores: []
      }
    ],
    'vue/prop-name-casing': ['error', 'camelCase'],
    'vue/require-v-for-key': 'error',
    'vue/no-use-v-if-with-v-for': [
      'error',
      {
        allowUsingIterationVar: false
      }
    ],
    'vue/v-bind-style': ['error', 'shorthand'],
    'vue/v-on-style': ['error', 'shorthand'],
    'no-useless-escape': 0
  }
}

在根目录创建ESLint忽略文件配置 .eslintignore ，来指定我们不需要进行检查的目录或文件

node_modules
dist
*.md
*.woff
*.ttf
.vscode
.idea

在根目录创建 .prettierrc 文件

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false,
  "endOfLine": "auto"
}

在根目录创建 .prettierignore 文件

**/*.svg
**/*.ico
package.json
package-lock.json
/dist
.DS_Store
.eslintignore
*.png
.editorconfig
.gitignore
.prettierignore
.eslintcache
*.lock
yarn-error.log
**/node_modules/**

路径别名设置

修改 vite.config.ts ，这里我们先设置两个别名，一个是针对 src 下代码文件，一个是针对图片静态文件，内容如下：

// vite.config.ts
import path from 'path'
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [uni()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@img': path.resolve(__dirname, 'src/static/images'),
    },
  },
})

接着我们在 .vue 文件的 template 中可以这么写：

<image class="logo" src="@img/logo.jpg" />

自动导入

自动导入vue方法

vue3 script setup 写法中，组件间通信有 defineProps 跟 defineEmits 这种编译器宏方法，无需导入就可以直接使用。而对于vue当中导出的代码，我们还是需要手动显示引入，如下：

import { computed, ref } from 'vue'
const count = ref(0)

那有没有办法像 defineProps 等编译器宏方法一样，无需手动导入就可以直接使用呢？对此，我们可以使用unplugin-auto-import npm包实现。

安装依赖包，在终端中输入：

npm i -D unplugin-auto-import

在 vite.config.ts 中引入

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    uni(),
    AutoImport({
      include: [
        /.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /.vue$/,
        /.vue?vue/, // .vue
        /.md$/ // .md
      ],
      dts: 'src/auto-imports.d.ts', // 安装好依赖后，重新运行编译即可自动在根目录下生成此声明文件
      imports: ['vue', 'uni-app', 'pinia'],
      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')
      }
    }),
  ]
})

接着我们需要在 tsconfig.ts 文件 include 属性中引入声明文件，否则直接使用ts会报错。

"include": [
  "src/**/*.ts",
  "src/**/*.d.ts",
  "src/**/*.tsx",
  "src/**/*.vue",
  "auto-imports.d.ts"
]

接着我们就可以直接在代码中无需导入直接使用vue中方法了：

// import { computed, ref } from 'vue' 这行代码不用写了
const count = ref(0)

运行、发布项目

对应的命令在 package.json 中，可以自行查看。

npm run dev:%PLATFORM%
npm run build:%PLATFORM%

在微信开发者工具导入打包出来的文件夹

然后，就可以愉快的写代码了。

💡 Tips：

VSCode跟Hbuilder x 不同的是，VSCode不会自动在微信开发者工具导入项目并打开，我们需要手动导入项目，只需要导入一次就行了，以后直接打开微信开发者工具就行了。
需要注意的是，需要在 manifest.json 配置微信小程序appid，不然微信开发者工具会报错。