使用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插件

uni-create-view: 在 VSCode 右键点击文件夹可以快速创建页面与组件，创建页面时将自动添加 pages.json 中
uni-helper：uni-app 代码提示
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"
    ]
  },
  
  // 其他配置项
  ...
}