使用 vscode 构建 uniapp 项目
1. 全局安装vue-cli
npm install -g @vue/cli
2. 通过vue-cli创建uniapp项目
# my-project为项目名称
vue create -p dcloudio/uni-preset-vue my-project
项目创建过程中,会提示选择模板,选择默认模板即可
3. 安装语法提示
- vscode插件商店中搜索并安装vue语法提示插件vetur
- 安装uniapp框架提供的组件语法提示
# 安装uniapp框架提供的组件语法提示
npm i @dcloudio/uni-helper-json
4. 导入hbuildx自带的代码块
从 github 下载 uni-app 代码块,放到项目目录下的 .vscode 目录即可拥有和 HBuilderX 一样的代码块
5. 运行发布项目
# 运行项目
npm run dev:%PLATFORM%
# npm run serve指令实际执行的是npm run dev:h5,即将项目运行至浏览器
npm run serve
# 发布项目
npm run build:%PLATFORM%
%PLATFORM% 可取值如下:
值 | 平台 |
---|---|
h5 | H5 |
mp-alipay | 支付宝小程序 |
mp-baidu | 百度小程序 |
mp-weixin | 微信小程序 |
mp-toutiao | 头条小程序 |
mp-qq | qq小程序 |
参考文档:
uniapp 官方说明
本文来自博客园,作者:这货不是古月先生,转载请注明原文链接:https://www.cnblogs.com/gu-yue-hu/p/16033808.html