用Vue CLI创建uni-app，摆脱HBuilder，npm命令行运行及发布

最新推荐文章于 2024-05-16 11:58:53 发布
最新推荐文章于 2024-05-16 11:58:53 发布
阅读量465 收藏
点赞数
分类专栏： vue代理跨域 文章标签： vue.js 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jh_jing/article/details/120161834
版权

环境安装

全局安装vue-cli       

npm install -g @vue/cli

创建uni-app

使用正式版（对应HBuilderX最新正式版）

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

使用alpha版（对应HBuilderX最新alpha版

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

 使用uni-app默认模板

 

小 豪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp cli开发和HBuilderX开发
qq_41974199的博客
12-20 609
cli开发和HBuilderX开发的区别，cli开发和HBuilderX开发的区别主要在于开发方式不同，HBuilderX开发是可视化的，而cli开发是命令行的。他们之间可以相互转换，比如你可以用HBuilderX开发，然后用cli打包，也可以用cli开发，然后用HBuilderX打包。
用Vue CLI创建uniapp项目，搭建模板。不仅可以HBuilder打包，也可以npm命令行运行及打包、发布
05-18
已经搭建好，下载即用。 用Vue CLI创建uniapp项目，不仅可以HBuilder打包，也可以npm命令行运行及打包、发布。
uniapp微信小程序使用vscode代替HBuilderX开发uniapp微信小程序并且vscode改动代码微信开发者工具能实时更新
最新发布
wocwin的博客
05-16 2101
uniapp微信小程序使用vscode代替HBuilderX开发uniapp微信小程序并且vscode改动代码微信开发者工具能实时更新；解决Vs Code 出现`类型“{ class: string; }”的参数不能赋给类型`错误
uniapp新建项目后，如何在浏览器和微信小程序运行
lucky_zouzou的博客
08-22 2534
参考uni-app官网提供了HBuilderX可视化创建和vue cli命令两种方式创建项目，由于HBuilder和它都是DCloud公司的产品，使用它创建项目可以很方便的下载插件什么的。4.编辑器里点击微信开发者工具运行，等待一会会儿编译完后，微信开发者工具就会自动打开显示出页面。下载HBuilderX，然后参照这个文档点两下选择你需要的模版，就能建好一个项目啦！运行在内置浏览器是直接按照文档点击运行即可，但是会占用编辑器的空间。2.和浏览器运行一样需要在‘配置web服务器‘中 配置小程序的路径。
uniapp离线打包全流程(最新)
m0_50553098的博客
08-21 1891
把你的appid放到value里。保存。点击打包。然后 该路径下就是你的apk包，拉到手机上下载就行。
【uni-app】HbuilderX开发的程序如何脱离HbuilderX进行部署
zhitianming的博客
04-04 817
uni-app项目 脱离HbuilderX打包部署
《uni-app》npm详解及在uni-app中对npm的支持
热门推荐
Oliver尹的博客
09-25 1万+
本文难度属于：初级，通过本文你可以大致了解以下几个知识点： 什么是NPM，它是做什么的；uni-app中如何使用NPM这个包管理工具；实际项目中如何通过npm按照uView这个UI库；
HBuilderX,uni-app
10-01
1. 创建项目：使用 HBuilderX 或 vue-cli 创建 uni-app 项目 2. 编写代码：编写 uni-app 项目的代码，包括页面、组件、API 等 3. 调试项目：使用 HBuilderX 或浏览器调试 uni-app 项目 4. 打包项目：使用 HBuilderX ...
uni-app-in-action:uni-app实战
03-30
# $ npm i -g @vue/cli $ vue -V # @vue/cli 4.5.6 $ vue --version # @vue/cli 4.5.6 $ vue -v # ??? $ vue create -p dcloudio/uni-preset-vue test-app # hello uni-app ??? $ vue create -p dcloudio/uni-preset...
VSCode 配置uni-app的方法
11-20
使用Vue CLI创建uni-app项目，运行： ``` vue create -p dcloudio/uni-preset-vue uni-app ``` 在此过程中，你可以根据需要选择项目模板。 3. 打开项目： 用VSCode打开刚刚创建的uni-app项目。 4. 安装Vue...
uni-app微信小程序生成海报.rar
02-07
- 安装uni-app：首先需要安装Node.js环境，然后使用npm（Node包管理器）全局安装HBuilderX CLI工具，通过`npm install -g @dcloudio/cli`命令进行安装。 - 创建项目：运行`hbx create <项目名>`命令创建新的uni-...
uni-auto-pages:uni-app 自动配置pages.json
05-31
安装npm install uni-auto-pages首先通过 vue-cli 创建 uni-app 项目 vue.config.js 配置*注：template.json 参数是模版文件名 必须在 src 下，文件名可以自定义 默认名 template.jsonconst UniAutoPagesPlugin = ...
Hbuilderx uniapp本地打包android 项目
qq_30548105的博客
06-14 1万+
uniapp开发的项目，本地打包成android项目
uniapp离线打包
qq_42376171的博客
11-05 1207
uniapp离线打包apk文件 平时我们习惯用HBuilder开发，HBuilder可以云打包。但是如果我们要离线打包呢。那就需要借用另外一个软件才能打包，HBuilder目前还不能支持离线打包成apk文件 需要有以下几个东西 1.Android studio软件 2.自己电脑的证书 3.登录开发者中心，生成appkey，appid，包名，Android 证书签名SHA1等 4.HBuilder生成本地打包离线文件 5.下载官网上的例子，用Android studio配置打包（如果自己新建项目再配置，很麻烦
创建uni-app项目
atu1111的博客
09-24 3731
创建uni-app项目 1. 2.
用Vue CLI创建uniapp项目
weixin_45416189的博客
03-03 7521
用Vue CLI创建uniapp 用Vue CLI创建uni-app，摆脱HBuilder，npm命令行运行及发布 除了 HBuilderX 可视化界面，也可以使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目。 如果是老的项目，也可以通过下方步骤，创建一个 uni-app 选择默认模板，然后将项目原封不动的复制到新项目的 ./src 目录。 执行 npm run serve / npm run build 就可以运行和打包了。 1. 环境安装 全局安装vue-cli npm ins
uni-app组件-应用简单快速上线
m0_60028455的博客
04-13 875
uni-app详解 一、介绍 uni-app 是一个使用 Vue.js(opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。 uni-app底层集成了native技术，就是h5+引擎，能调用手机原生api，所以uniapp能开发接近原生性能的app，这是js引擎部分；它是双引擎，渲染又是独立一个独立引擎。这个渲染引擎又分为nvue渲染和web
不使用HBuilder在uni-app项目中引入uni-ui
莫宛的博客
12-30 2121
文章目录下载uni-ui，将其中要用的组件放在src/components目录下1. 下载依赖2. 在node_modules文件夹下找到下载的uni-ui3. 粘贴到src/components目录下4. 在页面中使用5. 效果 下载uni-ui，将其中要用的组件放在src/components目录下 uni-ui符合easycom规范 传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下或uni_modules
用vue cli创建uni-app,摆脱hbuilder,npm命令行运行及发布
05-11
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、付费专栏及课程。

余额充值