创建uni-app项目
创建uni-app项目
1.通过vue-cli命令行创建
1.1 使用正式版(对应HBuilderX最新正式版)
vue create -p dcloudio/uni-preset-vue my-project
1.2 使用alpha版(对应HBuilderX最新alpha版)
alpha版相当于尝鲜版本,比最新正式版本多出许多功能。
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project
1.3 选择模板
执行了上面命令之后,会提示选择项目模板,这里选择了默认模板
1.4 运行、发布uni-app
npm run dev:%PLATFORM%
npm run build:%PLATFORM%
%PLATFORM% 可取值如下:这里选取了常用的3种
值 | 平台 |
---|---|
app-plus | app平台生成打包资源(支持npm run build:app-plus,可用于持续集成。不支持run,运行调试仍需在HBuilderX中操作) |
h5 | H5 |
mp-weixin | 微信小程序 |
1.4.1 以运行微信小程序为例:
1) 输入命令:npm run dev:mp-weixin
2) 使用微信开发者工具,打开运行编译的代码 dist\dev\mp-weixin
3) 修改uni-app项目代码,微信开发者工具会同步更新
1.4.2 以发布H5项目为例:
1) 输入命令:npm run build:h5
2) 将编译后的项目dist\build\h5,使用node.js http-serve服务运行验证:
在想要启动服务的文件夹下,打开命令行,输入http-server:
在浏览器输入上面显示的ip可端口即可访问:
1.5 uni-app项目目录分析
1).public 下面的 index.html 模板文件
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title><%= htmlWebpackPlugin.options.title %></title><script>document.addEventListener('DOMContentLoaded', function() {document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'})var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" /><link rel="icon" href="./static/favicon.ico"></head><div id="app"></div>
BASE_URL:项目根路径。
viewport-fit=cover 兼容iponex刘海。env()和constant(),是IOS11新增特性。
VUE_APP_INDEX_CSS_HASH ,获取文件部分哈希值 查看源码:
const buffer = fs.readFileSync(require.resolve('@dcloudio/uni-h5/dist/index.css'))process.env.VUE_APP_INDEX_CSS_HASH = loaderUtils.getHashDigest(buffer, 'md5', 'hex', 8)
Vue.config.productionTip = falseApp.mpType = 'app'const app = new Vue({...App
})
app.$mount()
1) Vue.config.productionTip = false 是提示开发环境信息
2) App.mpType = ‘app’ 是为了与后面要讲的小程序页面组件所区分开来,当注释掉这段代码,会发现报错
chunk-vendors.js:28888 [Vue warn]: Property or method "keepAliveInclude" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.(found in at App.vue)
warn @ chunk-vendors.js:28888
chunk-vendors.js:28888 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'meta')"
分析下报错原因,如Property or method “keepAliveInclude” is not defined ,查看下源码:src\core\service\plugins\index.js
Vue.mixin({beforeCreate () {const options = this.$optionsif (options.mpType === 'app') {options.data = function () {return {keepAliveInclude}}const appMixin = createAppMixin(routes, entryRoute).......})
3) app.$mount() 如果没有提供 elementOrSelector 参数,模板将被渲染为文档之外的的元素,并且你必须使用原生 DOM API 把它插入文档中,查看源码src\core\service\plugins\app\index.js
beforeMount: function appBeforeMount () {// TODO 平台代码this.$el = document.getElementById('app')}
4) 初始化h5项目网页标题,修改模板文件,开发环境 server 配置
第一种方法,通过vue.config.js,注意不是vue官方说的config.plugin(‘html’).tap
devServer: {host: '10.1.2.55',port: 8002, //端口号proxy: {'/api': {target: 'http://localhost:3000/', // 后端地址secure: false, // 如果是https接口,需要配置这个参数ws: true, // 是否代理websocketschangeOrigin: true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题pathRewrite: {'^/api': ''}}}},chainWebpack: config => {config.plugin('html-index').tap(args => {args[0].title = '你想设置的title名字'// 修改模板文件args[0].template = './public/index2.html'return args})}
第2种方法,通过manifest.json配置,注意vue-cli创建的uni-app项目manifest.json是在src文件夹下面的。uni-app官网manifest配置h5
"h5": {"title": "hello-title","template":"../public/index2.html","devServer": {"host": "10.1.2.55","port" : 8000, // 端口号"disableHostCheck" : true,"proxy" : {"/api" : {"target" : "http://localhost:3000/", // 目标接口"ws": true, // 是否代理websockets"secure" : false, // 设置支持https协议的代理"changeOrigin" : true, //是否跨域"pathRewrite" : {"^/api" : ""}}}}}
vue.config.js 有许多配置在vue里面支持,但是在uni-app里面不支持 如:publicPath 不支持,如果需要配置,请在 manifest.json->h5->router->base 中配置,参考文档:h5-router;outputDir 不支持;assetsDir 固定 static。uni-app官网vue.config.js
2.通过HBuilderX可视化界面
2.1 创建uni-app
在点击工具栏里的文件 -> 新建 -> 项目:
选择uni-app类型,输入工程名,选择模板,点击创建,即可成功创建
2.2 运行uni-app
1)运行h5
2)运行微信小程序
3.使用cli创建项目和使用HBuilderX可视化界面创建项目有什么区别
问题引入:当运行环境版本和编译环境版本两个版本不一致。提示如下:
出现这个问题原因:HBuilderX版本很老,或cli编译器一直没升级,而云打包服务器已经升级,此时编译环境版本低,而运行环境版本高,就会报错
如何解决这个问题:如果项目是HBuilderX创建的,则是HBuilderX的版本号,更新HBuilderX会改变;如果是cli创建的项目,即根目录是package.json,那么编译环境版本号是创建cli时生成的,或者上一次执行npm update生成的。不管HBuilderX如何升级,cli项目的编译器并不会跟随HBuilderX升级而升级,需手动升级
解决这个问题需要知道:HBuilderX 版本 ,HBuilderX 对应的 NPM 依赖版本 ,以及两者关系。例如:版本号 2.0.0- 后面是与 HBuilderX 对应的版本号且小版本不会超过9,比如 HBuilderX 2.7.5.20200518 对应的版本号 2.0.0-27520200518001,2.0.0-271420200618 对应的为 2.0.0-27920200618002。(HBuilderX所有NPM版本记录 )
本地HBuilderX版本为例:
1)对应编译器版本(HBuilderX安装目录plugin目录下):
2)本地HBuilderX版本对应NPM版本记录:
cli项目的编译器版本降级案例
1)找到cli项目package.json,^2.0.0-32320210825001 全部替换为2.0.0-31920210609001
2)删除cli项目下的node_modules,package-lock.json
3)执行npm install
4)执行npm run dev:h5 访问正常显示
3.1编译器的区别
cli
创建的项目,编译器安装在项目下。并且不会跟随HBuilderX升级。如需升级编译器,执行 npm update,或者手动修改package.json 中的 uni 相关依赖版本后执行 npm install。更新后可能会有新增的依赖并不会自动安装,手动安装缺少的依赖即可。- HBuilderX可视化界面创建的项目,编译器在HBuilderX的安装目录下的plugin目录,随着HBuilderX的升级会自动升级编译器。
- 已经使用cli创建的项目,如果想继续在HBuilderX里使用,可以把工程拖到HBuilderX中。注意如果是把整个项目拖入HBuilderX,则编译时走的是项目下的编译器。如果是把src目录拖入到HBuilderX中,则走的是HBuilderX安装目录下plugin目录下的编译器。
cli
版如果想安装less、scss、ts等编译器,需自己手动npm安装。在HBuilderX的插件管理界面安装无效,那个只作用于HBuilderX创建的项目
npm install sass-loader@10 node-sass@4 --save-dev
sass-loader@11 以上需要是 webpack5,这里示例的uni-app项目是通过vue-cli4生成的(webpack4)。所以这里指定10版本
3.2开发工具的区别
cli
创建的项目,内置了d.ts,同其他常规npm库一样,可在vscode、webstorm等支持d.ts的开发工具里正常开发并有语法提示。- 使用HBuilderX创建的项目不带d.ts,HBuilderX内置了uni-app语法提示库。如需把HBuilderX创建的项目在其他编辑器打开并且补充d.ts,可以在项目下先执行
npm init,然后npm i @types/uni-app -D,来补充d.ts。但vscode等其他开发工具,在vue或uni-app领域,开发效率比不过HBuilderX。详见:https://ask.dcloud.net.cn/article/35451 - 发布App时,仍然需要使用HBuilderX。其他开发工具无法发布App,但可以发布H5、各种小程序。如需开发App,可以先在HBuilderX里运行起来,然后在其他编辑器里修改保存代码,代码修改后会自动同步到手机基座。
- 如果使用cli创建项目,那下载HBuilderX时只需下载10M的标准版即可。因为编译器已经安装到项目下了。
创建uni-app项目相关推荐
- 使用sublime创建Android APP项目
<span style="color:#333333">使用sublime编码工具制作Android APP的前提是要安装好APICloud相关的插件</span ...
- 基于HBuilderX创建移动app项目并利用mui实现简单页面跳转
刚开始学,听老师讲了一些介绍,要求我们做一个页面跳转,当时内心真的是万马奔腾,他的是使用什么icon的来实现的,但是我没看不懂怎么实现页面跳转的,就使用了mui来做了.百度了很多内容,杂七杂八的,所以 ...
- 创建第一个Flutter App项目
上篇,我们讲了Flutter在Windows下开发环境的配置,并创建一个新的Flutter项目.这篇我们来讲,创建Flutter App项目. 看下我们最终实现的效果: 第1步: 创建 Flutter ...
- 【Android】Android Studio中新创建的app目录结构
安装Android Studio后,然后创建一个app项目.对于初学者来说,我们希望了解app目录结构,然后更好的进行开发工作. 但是要想了解一个app的目录结构,首先需要明确两个概念 Project ...
- 初学者用pycharm创建一个django项目和一个app时需要注意的事项
目录 如何新建一个djiango项目: 如何创建一个app: 如何启动一个django项目: 新建一个django项目,需要注意以下几项配置: 如何新建一个djiango项目: 1.在pycharm中 ...
- cordova 创建app项目,签名打包部署
app签名打包 一.安装流程 1.JDK安装.JDK 8 [jdk-8u261-windows-x64.exe下载地址:https://www.oracle.com/java/technologies ...
- React-Native 创建App项目
# React-Native 创建App项目 环境搭建 概述 RN的官方网站 百度+谷歌 安装环境介绍 操作系统:win10系统 手机:安卓手机真机一部或夜神模拟器 必须安装的依赖有:Node,JDK ...
- Android studio 开发第一篇 APP项目创建
Android studio开发 APP项目创建 打开Android studio 依次点击file->new->new project 进入create new project界面,选择 ...
- 【问题篇】打包Vue-cli3创建的vue项目成App的apk文件
1.修改vue项目配置(下面的是基于脚手架3方式创建的项目的打包方式) 1.1打开cmd(管理员方式) 1.2输入 vue ui,进入脚手架管理界面 1.3点击配置进入配置界面 1.4修改公共路径为. ...
- HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
最新文章
- 做为 iOS 开发者 现在对未来迷茫怎么办?
- Python学习教程:Python爬虫抓取技术的门道
- 深入理解JVM虚拟机(十):Java内存模型与多线程
- tf.reduce_max用法
- 多硬盘的引导文件boot.ini
- python3-字典中的一些常用方法
- 牛客网剑指offer编程实践11-20题
- pyinstaller打包执行exe出现“ModuleNotFoundError: No module named ‘scipy.spatial.transform._rotation_group”
- [css] 你有用过animation-fill-mode属性吗?它有什么应用场景
- 剑指Offer - 面试题9. 用两个栈实现队列
- 辅助排序和Mapreduce整体流程
- 鼠标按下改变RelativeLayout背景颜色,松开变回
- Ubuntu 16.04 LTS Final Beta about JAVA
- matlab安装出现“无法访问所在网络位置”的正确解决办法
- 代理是什么?(HTTP代理,SOCKS代理)
- java+上传文件夹
- matlab----多项式、函数
- 经典按键java手机游戏_各种免费手机游戏可以玩了!
- 《微信读书》自定义样式
- 舌尖上的职场(二)一起去吃饭吧!(转)
热门文章
- 【Java基础】Java入门(一)
- C/C++ opencv 计算 LBP特征 包括旋转不变 uniform 圆形邻域
- 安卓开发视频处理框架!2021年这些高频面试知识点最后再发一次,全网疯传
- 什么是PCB加工中树脂塞孔工艺?
- AOP层层递进 第一部分 代理
- mysql建立数据库并给定别名_MySQL数据库基本操作(四)
- Python数据处理035:结构化数据分析工具Pandas之Pandas概览
- Java常见面试题(2)
- 诺奖得主 朱棣文 哈佛大学毕业演讲:生命太短暂,你必须对某样东西倾注你的深情!
- JavaScript中classList属性和className的区别