1. 使用VSCode开发uni-app环境搭建

一、前言

工欲善其事，必先利其器。官方的HBuilderX使用起来很不习惯，所以还是折腾一下使用VSCode来作为开发工具。

这里贴上官网地址，方便后续查阅相关资料：https://uniapp.dcloud.net.cn/

二、项目创建

官方提供了两种方式来创建项目

1. HBuilderX可视化界面 ❌
2. cli 脚手架，可以通过 vue-cli 创建 uni-app 项目 ✅

这里我们就不必依赖HbuilderX了，完全可以将之抛之脑后。打开命令行终端，使用脚手架创建项目。

这里我们使用 vue3 + js 的模板。

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

这里可能创建失败，网络原因，可以多试几次。如果一直不行，直接去gitee上下载模板项目 https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite.zip

使用VSCode打开项目即可。

三、配置VSCode环境

（一）安装 uni-create-view 插件

可以帮我们快速创建 uniapp 页面，并且配置好页面路径

这个时候我们右键菜单就可以看到快捷创建指令了

在 page 目录右键，我们创建一个测试一下。

创建规则为，输入页面名称(文件名) + 空格 + 导航栏名称

可以看到，成功创建了页面，但是这是以单文件形式创建的，我们想要以文件夹形式创建，就需要改一下配置。

1. 找到刚刚的插件，找到 setting 菜单。

2. 勾选上创建同名文件夹选项

3. 如果你希望文件名同文件名称相同，还需要修改一下下面这个配置，否则默认文件夹下文件名全部为index.vue。两种风格市面上都有，根据自己意愿来即可。

4. 还有一点需要注意，这里 typescript为默认开发语言（可在设置中关闭）, 我这里使用的是 javascript, 所以我这里关掉了。

（二）安装 uni-helper 插件

代码提示作用，选第一个，这个会帮我们把所有扩展都安装上，可以看到总共有5个。

（三）安装 uniapp 小程序扩展

官方插件，方便查看一些文档，鼠标悬停可直接跳转

（四）解决 JSON 注释报错

manifest.json 和 pages.json 中的注释会报错，肯定不可能将注释全部删除掉，通过下面配置可解决该问题。

点击 【⚙】-> 【Settings】 -> 【TextEditor】 -> 【Associations 中添加上配置，设置为 jsonc 格式】

四、运行 uniapp 项目

（一）添加 appid

在 manifest.json 中添加自己的appid

（二）安装依赖

pnpm install

（三）打开终端运行

pnpm dev:mp-weixin

（四）使用微信开发者工具预览

可以看到启动后控制台提示，需要我们手动打开

打开微信开发者工具，导入项目，这里我们不适用云开发，所以注意勾选掉。

点击创建，之后可以正常预览了。

五、安装组件库 uview-plus

uview-plus3.0是基于uView2.x修改的vue3版本。官网地址：https://uview-plus.jiangruyi.com/

（一）安装 sass 和 sass-loader

在sass1.8.0以上版本报错Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0. 因为新版本Sass的@use语法较为激进，如果升级为@use将会是破坏式更新，所以推荐将sass固定在以下版本解决报警。

pnpm i sass@1.63.2 sass-loader@10.4.1 -D

（二）安装组件库以及一些必要依赖

pnpm install uview-plus dayjs clipboard

（三）配置

1. 引入 uview-plus 主 JS 库

在项目src目录中的main.js中，引入并使用uview-plus的JS库

// main.js
import uviewPlus from 'uview-plus'

import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(uviewPlus)
  return {
    app
  }
}

2. 引入uview-plus的全局SCSS主题文件

在项目根目录的/src/uni.scss中引入此文件, 如果不存在/src/uni.scss自己创建一个空白文件。

/* uni.scss */
@import 'uview-plus/theme.scss';

3. 引入uview-plus基础样式

在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

请注意uni.scss是一个特殊文件，万万不可将其它样式比如uview-plus/index.scss引入至uni.scss中，严格按照文档指示在App.vue中引入。

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-plus/index.scss";
</style>

4. 配置manifest

在项目的manifest.json中增加mergeVirtualHostAttributes配置

"mp-weixin" : {
	"appid" : "",
	...
	"mergeVirtualHostAttributes" : true
},

5. 配置取消Saas报警(无报警可以忽略)

取消"The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0."类似的报警。 在根目录vite.config.js（没有则新建）中增加如下代码中的silenceDeprecations字段:

需要先安装 rollup-plugin-visualizer

pnpm add rollup-plugin-visualizer -D

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import { visualizer } from 'rollup-plugin-visualizer'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [uni(), visualizer()],
  css: {
    preprocessorOptions: {
      scss: {
        // 取消sass废弃API的报警
        silenceDeprecations: ['legacy-js-api', 'color-functions', 'import'],
      },
    },
  },
  server: {
    port: 5100,
    fs: {
      // Allow serving files from one level up to the project root
      allow: ['..'],
    },
  },
})

6. 配置easycom组件模式

此配置需要在项目src目录的pages.json中进行。

温馨提示

1. uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uview-plus的功能。
2. 请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。

// pages.json
{
  "easycom": {
    "autoscan": true,
    // 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175
    "custom": {
      "^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
      "^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
      "^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"
    }
  },

  // 此为本身已有的内容
  "pages": [
    // ......
  ]
}

验证

<template>
  <view style="padding: 20px;">
    <up-button type="primary" text="确定"></up-button>
    <up-button type="primary" :plain="true" text="镂空"></up-button>
    <up-button type="primary" :plain="true" :hairline="true" text="细边"></up-button>
    <up-button type="primary" :disabled="disabled" text="禁用"></up-button>
    <up-button type="primary" loading loadingText="加载中"></up-button>
    <up-button type="primary" icon="map" text="图标按钮"></up-button>
    <up-button type="primary" shape="circle" text="按钮形状"></up-button>
    <up-button text="渐变色按钮" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></up-button>
    <up-button type="primary" size="small" text="大小尺寸"></up-button>
  </view>
</template>

<script setup>

</script>

<style lang="scss">

</style>

六、安装unocss （目前版本66版本存在冲突，会导致小程序中样式失效）

具体原因参考这个：https://github.com/dcloudio/uni-app/pull/5605

目前已经修复，但是我们的脚手架版本太低，所以要么降低unocss版本，要么就暂时别使用了。我这个项目比较简单，所以我暂时就不用了

官方文档：https://www.unocss.cn/integrations/vite.html

（一）安装依赖

pnpm add -D unocss unocss-preset-weapp  @unocss/vite

（二）配置

1. unocss 0.59.* 之后版本 vite.config.ts

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'

// https://vitejs.dev/config/
export default defineConfig(async ()=>{
  const UnoCss = await import('unocss/vite').then(i => i.default)

  return {
    plugins: [
      uni(),
  
      // https://github.com/unocss/unocss
      UnoCss(),
    ],
  }
})

2. unocss.config.ts

添加unocss.config.ts文件，搭配 unocss vscode(opens new window)插件，智能提示

3. 将 virtual:uno.css 导入到你的main.ts文件中：

// main.ts
import 'virtual:uno.css'

https://github.com/dcloudio/uni-app/issues/4815

由@uni-helper社区提供的ESM解决方案

仓库：https://github.com/uni-helper/plugin-uni
讨论：https://github.com/orgs/uni-helper/discussions/10
掘金：https://juejin.cn/post/7530802836118159395