当前位置:   article > 正文

uni-app搭建h5项目

uni-app搭建h5项目

一、 打开官方网站
https://uniapp.dcloud.net.cn/quickstart-cli.html
二、找到使用vue-cli命令行,按照文档上的步骤进行搭建
在这里插入图片描述

  1. 全局安装 vue-cli
npm install -g @vue/cli
  • 1
  1. 搭建项目
    在这里插入图片描述
    可以根据命令行搭建,搭建vue2.0对应的是webpack,
    也可以搭建vue3.0+vite,命令行下载不下来,直接访问高亮起来的 gitee 然后下载模板即可使用。
  2. 项目下载下来之后,就可以使用npm i下载依赖,然后通过npm run dev:h5启动项目即可。
npm run dev:h5
  • 1

在这里插入图片描述
加粗样式
5. 打包试一下看看能不能放到nginx以及服务器上去。打包没问题之后再开发页面。

npm run build:h5
  • 1

打包之后出现一下dist文件
在这里插入图片描述

  1. 把打出来的包挂载在nginx上
    可以使用nginx,挂载到nginx上。也可以直接下载http-server
    1)打开cmd输入命令:
cnpm i g http-server
  • 1

2)查看是否下载完成

http-server -v
  • 1

在这里插入图片描述
3)cmd切换到打包过的项目的目录地址
在这里插入图片描述
运行即可,生成的路径在浏览器中可以打开,说明打出来的包可以在服务器中用。

http-server -p 5553
  • 1

在这里插入图片描述
在这里插入图片描述

本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号