vue+vite+setup+开发小程序框架，uni-app性能再次提升

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

vue+vite+setup+开发小程序框架，uni-app性能再次提升

如今，小程序已经成为日常生活中不可或缺的应用之一。 掌握小程序开发几乎是前端的必备技能。 由于原生小程序的语法开发体验较差，且缺乏生态插件，因此诞生了很多第三方框架，如taro、wepy、mpvue等，并且随着时间的推移，taro框架已经变得像 vue 和 React 一样。 和主流前端框架一样，被大多数小程序开发采用。

对于使用Vue技术栈的同学来说，想必都知道Vue3已经是如火如荼的进行了。 主流Vue生态正在“抢着”升级到Vue3版本。 作为一款采用 Vue 语法开发小程序框架，它已经赶上了这一趋势vue+vite+setup+开发小程序框架，uni-app性能再次提升，推出了 vue3 + vite + setup +开发小程序版本，无论是开发体验还是性能都带来了质的飞跃。 （详情请参见官方社区文章《Vue3与Vite双向支持，uni-app性能再次提升》）

“新事物的诞生往往意味着新的开始。” 在未来vue3+vite+setup+的趋势下，意味着我们需要迭代之前vue2版本学到的经验和知识，甚至推翻它。

接下来我们将从初始化代码项目开始，一步步带大家搭建并初始化一个基于+vue3+vite+setup+的小程序项目。 在此过程中，会引导你思考如何封装、优化相关API方法等。比如微信官方API的路由跳转写法如下：

wx.navigateTo({
  url: '/pages/index/test?id=1',
})

这种写法在写demo的时候还好，但是在实际项目中涉及到很多页面跳转，每次跳转都要写那么长一段代码。 这种体验是非常差的。 在路由封装模块章节中，封装的形式是这样写的：

router.navigate('index', {id: 1})

这样一比较，是不是顿时清爽了许多呢？

您需要准备的前置知识请确保您已经了解了微信小程序的基础知识、常用API和基础知识，了解了vue3的基础知识，掌握了vue的setup编写、项目初始化、全局安装的基础知识-cli

npm install -g @vue/cli@4

初始化代码

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

（如果命令行创建失败，请直接访问gitee下载模板）

安装插件

要使用setup语法，需要配合volar插件使用，并在插件中搜索volar：

然后选择Vue Volar Pack插件（这个插件包含了vue3项目中常用的各种插件）。 至此，我们的准备工作就完成了！

代码基础设施设置

初始化项目的代码还是很粗糙。 这个时候我们不能急于立即编写业务代码。 相反，我们必须先完成“基础设施”工作。 只有基础设施搭建好了，才能方便后续项目代码的开发和维护。 这些基础设施任务包括建立统一的代码风格规范、路径别名、风格管理等，然后开始逐步实施。

设置统一的代码风格

俗话说“没有规矩就没有规矩”。 一个好的项目代码必须有一定的代码规范约束。 目前主流的方案是使用+进行设置。

安装依赖项

在终端中输入：

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

安装依赖项后vue开发微信小程序，我们在根目录中创建一个新的 ..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-restricted-syntax': ['error', 'LabeledStatement', 'WithStatement'],
    camelcase: ['error', { properties: 'never' }],
    'no-var': 'error',
    'no-empty': ['error', { allowEmptyCatch: true }],
    'no-void': 'error',
    'prefer-const': [
      'warn',
      { destructuring: 'all', ignoreReadBeforeAssign: true },
    ],
    'prefer-template': 'error',
    'object-shorthand': [
      'error',
      'always',
      { ignoreConstructors: false, avoidQuotes: true },
    ],
    'block-scoped-var': 'error',
    'no-constant-condition': ['error', { checkLoops: false }],
    'no-redeclare': 'off',
    '@typescript-eslint/no-redeclare': 'error',
    '@typescript-eslint/ban-ts-comment': 'off',
    '@typescript-eslint/ban-types': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-unused-vars': [
      'error',
      {
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_',
      },
    ],
    'no-unused-vars': [
      'error',
      {
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_',
      },
    ],
    // vue
    'vue/no-v-html': 'off',
    'vue/require-default-prop': 'off',
    'vue/require-explicit-emits': 'off',
    'vue/multi-word-component-names': 'off',
    // prettier
    'prettier/prettier': 'error',
    // import
    'import/first': 'error',
    'import/no-duplicates': 'error',
    'import/order': [
      'error',
      {
        groups: [
          'builtin',
          'external',
          'internal',
          'parent',
          'sibling',
          'index',
          'object',
          'type',
        ],
        pathGroupsExcludedImportTypes: ['type'],
      },
    ],
  },
}

创建一个新文件

创建忽略文件配置。 指定我们不需要检查的目录或文件

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

创建一个新文件

{
  "semi": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "singleQuote": true,
  "endOfLine": "auto"
}

创建一个新文件

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

安装和插件

路径别名设置

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

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 文件中写入：

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

假设我们要导入 src -> -> index.ts 文件并在其中写入：

可以看到，ts会报找不到模块的错误信息。 这时我们需要在.json文件中进行相关修改：

添加到下面

 "paths": {
      "@/*": ["src/*"]
    }

就是这样。

风格管理

比较成熟的css预处理方法有sass、less，大家可以根据自己的需求选择对应的css预处理器。 这里以 sass 为例：

先安装相关依赖

npm i sass sass-loader -D

然后在src目录下创建一个文件夹，用来存放样式相关的文件。

创建一个新的vars.scss文件：管理颜色变量

例如：

$font-size: 28rpx;
$primary-color: #54d339;

新建.scss文件（以下示例供参考）

例如

@mixin flex-row {
  display: flex;
  align-items: center;
}
@mixin flex-column {
  display: flex;
  flex-direction: column;
}
// 文字超出隐藏
@mixin text-eli {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

新建.scss：全局公共样式（以下示例供参考）

@import "./vars.scss";
@import "./mixins.scss";
page {
  box-sizing: border-box;
  font-size: $font-size;
}
view,
text {
  font-size: $font-size;
  box-sizing: border-box;
  color: #333;
}
// 去除按钮默认边框
button::after {
  border: none;
}
.flex-row {
  @include flex-row();
}
.flex-row-between {
  @include flex-row();
  justify-content: space-between;
}
.flex-row-around {
  @include flex-row();
  justify-content: space-around;
}
.flex-row-center {
  @include flex-row();
  justify-content: center;
}
.flex-row-end {
  @include flex-row();
  justify-content: flex-end;
}
.flex-column {
  @include flex-column();
}
.flex-column-center {
  @include flex-column();
  align-items: center;
  justify-content: center;
}
.flex1 {
  flex: 1;
  height: 100%;
}
.text-line1 {
  @include text-eli();
  -webkit-line-clamp: 1;
}
.text-line2 {
  @include text-eli();
  -webkit-line-clamp: 2;
}
/* 间隔相关 */
.pad20 {
  padding: 20rpx;
}
.mb32 {
  margin-bottom: 32rpx;
}
.mb40 {
  margin-bottom: 40rpx;
}
.mt60 {
  margin-top: 60rpx;
}
.ml20 {
  margin-left: 20rpx;
}
.ml40 {
  margin-left: 40rpx;
}
/* 字体大小相关 */
.font24 {
  font-size: 24rpx;
}
.font48 {
  font-size: 48rpx;
}
.font36 {
  font-size: 36rpx;
}
.font32 {
  font-size: 32rpx;
}
.font-bold {
  font-weight: bold;
}
.text-center {
  text-align: center;
}
.text-white {
  color: #fff;
}
.text-color-main {
  color: $main;
}
.text-color-6 {
  color: #666;
}
.text-color-9 {
  color: #999;
}
.bg-white {
  background-color: #fff;
}
.bg-gray {
  background-color: $bg-gray;
}

在App.vue文件中引入

<style lang="scss">
/*全局公共样式 */
@import "./styles/common.scss";
style>

配置颜色变量的自动导入

我们在vars.scss文件中定义的颜色变量需要手动导入后才能在页面中使用。 那么如何实现自动导入呢？ 我们可以在vite..js中配置：在对象下添加：

css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@/styles/vars.scss";`,
        },
      },
    }

这样我们就可以在页面上直接使用vars中定义的颜色变量了。 还没结束，我们还可以使用一个插件来帮助我们识别定义的变量：SCSS

安装好插件后，如下图所示，可以看到已经给出了提示，开发体验又上升了一个新台阶！

自动导入vue方法

vue3的setup写法中，有这个组件间通信的编译器宏方法，可以直接使用，无需导入。 对于从Vue导出的代码，我们还是需要手动显示导入，如下：

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

有没有什么办法可以像编译宏方法一样直接使用而不需要手动导入呢？ 为此，我们可以使用 -auto- npm 包。

安装依赖包

npm i -D unplugin-auto-import

在vite..ts中引入

import AutoImport from 'unplugin-auto-import/vite'
 plugins: [
      uni(),
      AutoImport({
        imports: ['vue', 'uni-app'],
        dts: './auto-imports.d.ts', // 安装好依赖后，重新运行编译即可自动在根目录下生成此声明文件
      }),
    ]

将声明文件引入.ts

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

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

然后我们就可以直接在代码中使用vue中的方法，无需导入：

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

总结

至此，我们已经完成了项目代码初始化和基础设施工作（统一代码风格、风格管理、路由别名设置），并通过一些插件提升了代码开发体验。 当然，这只是一个开始。 接下来请移步“状态管理篇”了解更多有趣的信息。

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等