当前位置： 首页 > news >正文

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

news 2025/10/14 6:27:59

一、前言

工欲善其事，必先利其器。官方的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 菜单。

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

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

  1. 还有一点需要注意，这里 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 rootallow: ['..'],},},
})
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/unocssUnoCss(),],}
})
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
http://www.dtcms.com/a/477408.html

相关文章：

  • Docker监控：cAdvisor+Prometheus+Grafana实战指南
  • Redis-持久化之AOF
  • Python Redis 教程
  • R语言绘制热图
  • GPU微架构
  • Vue-- Axios 交互(二)
  • 中煤浙江基础建设有限公司网站曹妃甸网站建设
  • phpcms做汽车网站wordpress如何关注博客
  • 读《华为基本法》，聚焦可复用的方法论
  • CAD多面体密堆积_圆柱体试件3D V1.1版本更新
  • JavaScript变量完全指南：从基础定义到高级用法
  • 什么是VR？什么是AR？
  • NineData云原生智能数据管理平台新功能发布｜2025年9月版
  • 基于AR技术交互式设备维修的技术方案剖析｜阿法龙XR云平台
  • 利用 Meshery 提升云原生管理效率
  • [3dmax自研插件]——3ds Max 智能材质检查器
  • 5G+AR：开启航空维修的智能新时代
  • 长春火车站人工电话企业做响应式网站好吗
  • 竹子林附近网站建设移动互联网技术
  • 基于物联网的体温心率监测系统设计(论文+源码)
  • 股指10月想法
  • 融资业务类型、AMS 的通用支持能力、各业务在 AMS 中的流程实现
  • 波音引领航空维修变革：AR技术重塑行业未来
  • 零基础快速上手Playwright自动化测试
  • ArcGIS Pro 修改单个波段的值并组合输出新的影像数据
  • Vue 脚手架（Vue CLI）
  • 自己建设网站需要花多少钱爱南宁app下载官网最新
  • 蓝牙物联网多个核心应用场景开发与应用细化分析
  • 百度装修网站郑州建设局官网
  • 服务器在线安装插件失败/离线安装VSIX