为了能到远方,脚下的每一步都不能少.|

使用 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. 安装语法提示

  1. vscode插件商店中搜索并安装vue语法提示插件vetur
  2. 安装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 官方说明

posted @   这货不是古月先生  阅读(1531)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
· 使用C#创建一个MCP客户端
   
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起