使用vscode开发uniapp, 摆脱hbuilder

使用vscode开发uniapp, 摆脱hbuilder

创建项目

  • 创建uniapp项目
bash 复制代码
vue create -p dcloudio/uni-preset-vue helloproject
  • 选择模版
    这里我选择默认模版
bash 复制代码
> 默认模板
  默认模板(TypeScript)
  Hello uni-app
  前后一体登录模板
  看图模板
  新闻/资讯类模板
  自定义模板
  • 启动项目
bash 复制代码
npm i
npm run serve

我这里启动项目报错,如下:

bash 复制代码
Syntax Error: Error: PostCSS plugin autoprefixer requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

安装了依赖后,正常启动了

bash 复制代码
npm i postcss-loader autoprefixer@8.0.0
  • 安装vscode插件
  1. uni-create-view: 在 VSCode 右键点击文件夹可以快速创建页面与组件,创建页面时将自动添加 pages.json
  2. uni-helper:uni-app 代码提示
  3. uniapp小程序扩展:提供创建页面和组件功能,鼠标悬停到组件上的 API 提示功能

添加 ts 类型校验

  • 安装类型声明文件
bash 复制代码
npm i -D @types/wechat-miniprogram @uni-helper/uni-app-types
  • 配置 tsconfig.json
json 复制代码
{
  // 其他配置项
  ...,
  
  "compilerOptions": {
    "sourceMap": true,
    "paths": {
      "@/*": ["./src/*"]
    },
    "types": [
      "@dcloudio/types",
      "@types/wechat-miniprogram",
      "@uni-helper/uni-app-types"
    ]
  },
  "vueCompilerOptions": {
    "experimentalRuntimeMode": "runtime-uni-app",
    "nativeTags": [
      "block",
      "component",
      "template",
      "slot"
    ]
  },
  
  // 其他配置项
  ...
}
  • 重启VsCode

其他配置

  • 使用scss,建议使用以下版本
bash 复制代码
npm i -D sass-loader@7.3.1
npm i -D node-sass@4.14.1
  • json 注释问题
    • 打开vscode的设置,搜索文件关联
    • Files: Associations, 添加项,
    • 项: manifest.json, 值: jsonc
    • 项: pages.json, 值: jsonc

使用uni-ui组件库

  • 安装
bash 复制代码
npm i @dcloudio/uni-ui
  • 配置easycom
    打开项目根目录下的 pages.json 并添加 easycom 节点:
json 复制代码
// pages.json
{
	"easycom": {
		"autoscan": true,
		"custom": {
			// uni-ui 规则如下配置
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
		}
	},

	// 其他内容
	pages:[
		// ...
	]
}
  • 配置uni-ui组件类型声明
bash 复制代码
npm i -D @uni-helper/uni-ui-types
  • 配置 tsconfig.json
    types中添加 @uni-helper/uni-ui-types@dcloudio/types
json 复制代码
{
  // 其他配置项
  ...,
  
  "compilerOptions": {
    "sourceMap": true,
    "paths": {
      "@/*": ["./src/*"]
    },
    "types": [
      "@dcloudio/types",
      "@types/wechat-miniprogram",
      "@uni-helper/uni-app-types",
      "@uni-helper/uni-ui-types"
    ]
  },
  "vueCompilerOptions": {
    "experimentalRuntimeMode": "runtime-uni-app",
    "nativeTags": [
      "block",
      "component",
      "template",
      "slot"
    ]
  },
  
  // 其他配置项
  ...
}
相关推荐
生莫甲鲁浪戴19 小时前
Android Studio新手开发第二十八天
android·ide·android studio
2501_915909061 天前
“绑定 HTTPS” 的工程全流程 从证书配置到真机验证与故障排查
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915918411 天前
iOS 混淆实战 多工具组合完成 IPA 混淆、加固与工程化落地(iOS混淆|IPA加固|无源码混淆|Ipa Guard|Swift Shield)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者81 天前
如何系统化掌握 iOS 26 App 耗电管理,多工具协作
android·macos·ios·小程序·uni-app·cocoa·iphone
BumBle1 天前
uniapp AI聊天应用技术解析:实现流畅的Streaming聊天体验(基础版本)
前端·uni-app
2501_915921431 天前
运营日志驱动,在 iOS 26 上掌握 App 日志管理实践
android·macos·ios·小程序·uni-app·cocoa·iphone
lanhuazui102 天前
【Vscode】显示多个文件 & 打开多个文件时实现标签栏多行显示
vscode·编辑器
八月正好an2 天前
visual studio安装本地帮助手册
ide·visual studio
Q_Q19632884752 天前
python+uniapp基于微信美食点餐系统小程序
spring boot·python·微信·django·flask·uni-app·node.js
张较瘦_2 天前
环境搭建 | [入门级]VSCode(Cursor|Trae|Qoder)搭建Java(Springboot3)企业开发环境全流程
java·ide·vscode