当 uni-app 遇见 vscode,我该如何让它臣服

·  阅读 1165
当 uni-app 遇见 vscode,我该如何让它臣服

前言

uni-app 是一个用 vue 语法来开发小程序、App、H5 的框架,官方推荐的开发工具为 HBuilderX,使用起来有很好的开发体验。

不过,由于 HBuilderX 没有 Linux 版以及一些不为人知的秘密,想要使用 vs code。如果直接使用 vscode 开发 uni-app,其体验并不是很好,但是碰上了神通广大的我们,必须要让他臣服。

其实 uni-app 和 vscode 也可以很搭,接下来为各位小伙伴带来 vscode 中 uni-app 的正确打开姿势。

使用

一、CLI 工程

  1. 全局安装 vue-cli(如已安装请跳过此步骤)

    npm install -g @vue/cli
    复制代码
  2. 通过 CLI 创建 uni-app 项目

    vue create -p dcloudio/uni-preset-vue my-project
    复制代码

    注意:项目名不允许出现大写

    此时,会提示选择 uni-app 模板,初次体验建议选择 Hello uni-app 项目模板,如下所示:

    在这里插入图片描述

    自定义模板: 选择自定义模板时,需要填写 uni-app 模板地址,这个地址其实就是托管在云端的仓库地址。以 GitHub 为例,地址格式为 userName/repositoryName,如 dcloudio/uni-template-picture 就是下载图片模板。

  3. 创建好之后就会出现如下内容:

    �  Successfully created project my-project.
    �  Get started with the following commands:
    
     $ cd my-project
     $ yarn serve
    复制代码

二、在 vscode 中打开项目

在这里插入图片描述

安装插件

  1. 安装 vue 语法提示插件 vetur

    在这里插入图片描述

  2. CLI 工程默认带了 uni-app 语法提示和 5+App 语法提示

    在这里插入图片描述

  3. 安装组件语法提示(组件语法提示是uni-app的亮点,其他框架很少能提供。)

    npm i @dcloudio/uni-helper-json
    复制代码

    在这里插入图片描述

导入 HBuilderX 自带的代码块

从 github 下载 uni-app 代码块,放到项目目录下的 .vscode 目录即可拥有和 HBuilderX 一样的代码块。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

三、运行项目

npm run dev: %PLATFORM%
复制代码

四、发布项目

npm run build: %PLATFORM%
复制代码

%PLATFORM% 可取值如下:

平台
h5H5
mp-weixin微信小程序
mp-alipay支付宝小程序
mp-baidu百度小程序
mp-toutiao头条小程序
mp-qqqq 小程序

CLI 方式参考文档

HBuilderX 方式官网已经讲的很详细了。


希望大家使用起来可以更加得心应手。有任何问题欢迎留言讨论。

分类:
前端
标签: