uni-app项目由hbuilder项目转化为cli项目

1.背景

原uni-app项目是通过hbuilder创建的,运行以及打包都要依赖于hbuilder运行;一般在vscode开发,在hbuilder运行比较怪异;后续希望脱离hbuilder运行并能通过构建平台进行打包,因此将hbuilder项目转化为cli项目

2.步骤

1.安装cli(原有cli的跳过)

npm install -g @vue/cli

2.通过cli创建空项目

该部分可参考uni-app官网

vue create -p dcloudio/uni-preset-vue my-project

3.迁移原项目内容

  • 在新建的my-procject项目根目录创建src文件夹
  • 将原项目的所有文件放入新建的src文件夹中,其中node_modulesunpackagepackage.jsonpackage-lock.json不需要,可以不放入
  • 对比原项目的package.json与新建的package.json的内容,将原项目需要的额外的包写入package.json
  • npm install安装额外的包

其中less原是hbuilder本身支持的,通过cli创建项目后,需要额外安装less。此时需要注意less版本的问题,直接npm install less安装的包将可能导致下列问题ValidationError: webpack Dev Server Invalid Options options should NOT have additional properties
这个可能是less不同版本对webpack配置具有要求,而部分配置再uni-app中是不支持的,因此需要安装指定版本,安装下列less版本可以解决上述问题"less": "^3.9.0", "less-loader": "^4.1.0",

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue CLI是一个官方认证的Vue.js的脚手架工具。它通过简化打包和开发流程,让开发更加简单和高效。而Uni-app则是一款基于Vue.js框架开发的跨平台应用,可以同时支持各种平台的代码运行,如微信小程序、H5、安卓等。 如果你希望使用Vue CLI创建Uni-app,那么摆脱Hbuilder是必须的。在这种情况下,你可以通过命令行模式使用npm运行和发布你的应用程序。在此之前,你需要在系统上安装好Node.js和Vue CLI,以及运行npm install安装必要的依赖项。 接下来,我们需要使用Vue CLI创建一个项目,运行以下命令: vue create my-uni-app 这将创建一个名为“my-uni-app”的Vue项目,其中包含Uni-app所需的设置和配置。 接下来,我们需要安装uni-app的依赖项,运行以下命令: npm install @dcloudio/vue-cli-plugin-uni 安装完成后,我们需要将该插件添加到我们的Vue项目中。这可以通过编辑vue.config.js文件并添加以下内容来完成: module.exports = { chainWebpack: config => { config.module .rule('vue') .use('uni-app-loader') .loader('@dcloudio/vue-cli-plugin-uni/packages/uni-app-loader') .options({ // Options }) } } 现在我们已经准备好运行Uni-app了。通过以下命令来运行项目: npm run serve 这将在本地运行Uni-app应用程序,并在URL http://localhost:8080/ 上提供服务。 一旦应用程序准备就绪,我们只需通过以下命令进行构建: npm run build 这将为我们的应用程序生成一个可执行的包,我们可以将其上传到各种应用商店和渠道中进行发布。 总之,使用Vue CLI创建Uni-app是一个更高效和开发友好的方式。通过摆脱Hbuilder,我们现在可以使用更简单的命令行方式进行开发和发布。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值