使用vscode开发uniapp, 摆脱hbuilder

使用vscode开发uniapp, 摆脱hbuilder

创建项目

• 创建uniapp项目

vue create -p dcloudio/uni-preset-vue helloproject

• 选择模版
  这里我选择默认模版

> 默认模板
  默认模板(TypeScript)
  Hello uni-app
  前后一体登录模板
  看图模板
  新闻/资讯类模板
  自定义模板

• 启动项目

npm i
npm run serve

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

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

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

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 类型校验

• 安装类型声明文件

npm i -D @types/wechat-miniprogram @uni-helper/uni-app-types

• 配置 tsconfig.json

{
   
   
  // 其他配置项