大家好,我是龙骑士,今天给大家讲一下如何用npm创建uni-app项目

• 第一步:在目标文件夹下打开命令行,输入 vue -v检测vue-cli版本,如果未安装则需要安装,安装命令:

npm install vue-cli -g

上面命令安装的不是最新版vue-cli,安装最新版vue-cli的命令是

npm install @vue/cli -g

如果更新,则需要先卸载原来的vue-cli,卸载命令是:

npm install vue-cli -g

• 第二步:创建uni-app项目,命令是:

vue create -p dcloudio/uni-preset-vue projectname

• 第三步:选择模板,第一次创建的话建议选择Hello uni-app,选择自定义模板时，需要填写 uni-app 模板地址，这个地址其实就是托管在云端的仓库地址。以 GitHub 为例，地址格式为 userName/repositoryName，如 dcloudio/uni-template-picture 就是下载图片模板。

• 创建完毕 

 下面再给大家讲解一下项目中各个文件夹作用

•  uniCloud  云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb
• components 符合vue组件规范的uni-app组件,例如request.vue,可以复用的request组件
• hybrid  App端存放本地html文件的目录
• platforms  存放各个平台专用页面的目录
• pages  存放uniapp各个页面的文件夹,如index,about,API,component,error,tabBar,template
• static  存放静态资源文件,如图片、视频等
• uni_moudles  存放[uni_moudle](/uni_moudles)规范的插件
• wxcomponents 存放小程序组件的目录
• main.js  Vue  初始化入口文件
• App.vue  应用配置,用来配置全局样式以及监听应用生命周期
• manifest  配置应用名称、appid、logo版本等打包信息
• pages.json  配置页面路由、导航条、选项卡等页面类信息
• 
  小提示:
• 编译到任何平台时,static目录下的文件均会被完整打包进去,且不会编译.非static目录下的文件(vue、js、css等)只有被引用到才会被打包编译进去
  static 目录下的js文件不会被编译,如果里面有es6的代码,不经过转换直接运行,在手机设备上会报错
  css、less/scss等资源不要放在static目录下,建议这些公用的资源放在自建的目录下
•  资源路径说明
  模板内引入静态资源
  template内引入静态资源,如image、video等标签时可以使用相对路径或者绝对路径
  以@开头的绝对路径以及相对路径会经过base64转换规则校验
  引入的静态资源在非h5平台,均转为base64,h5平台内,小于4kb的资源会被转换成base64,其余不转

 生命周期

应用生命周期

uni-app支持onlaunch、onshow、onHide等应用生命周期函数

页面生命周期函数

uni-app支持onload、onshow、onReady等生命周期函数

路由

uni-app页面路由为框架统一管理,开发者需要在pages.json里配置每个路由页面的路径及样式.

类似小程序在app.json中配置页面路由一样,所以在uni-app中的路由用法与Vue Router不同,如仍然想要用router管理路由,可在插件市场中搜索Vue Router

路由跳转

uni-app中有两种路由跳转方式:使用navigator组件跳转、调用API跳转

页面跳转

页面以栈的形式管理当前所有页面,当发生路由切换时,页面栈的表现如下:

路由方式	页面栈表现	触发时机
初始化	新页面入栈	uni-app打开的第一个页面
打开新页面	新页面入栈	调用API uni.navigateTo、使用组件<navigator open="navigatorBack" type="navigate"/>
页面重定向	当前页面出栈,新页面入栈	调用API uni.redirectTo、使用组件<navigator open-type="redirectTo"/>
页面返回	页面不断出栈,直到目标返回页	调用API uni.navigateBack、使用组件<navigator-type="navigateBack"/>、用户按左上角返回按钮,安卓用户点击back按键
Tab切换	页面全部出栈,只留下新的Tab页面	调用API uni.switchTab、使用组件<navigator open-type="switchTab"、用户切换Tab
重加载	页面全部出栈,,只留下新的页面	调用API uni.relaunch、使用组件<navigator open-type="relaunch">

运行环境判断

uni-app可通过process.env.NODE_ENV判断当前开发环境还是生产环境,一般用于连接测试服务器或生产服务器的动态切换

在HbuilderX中,点击"运行"编译出来的代码时开发环境,点击"发行"编译出啦的代码时生产环境

在cli模式下,时通行的编译环境处理方式

if(process.env.NODE_ENV="development"){
    console.log("开发环境");
}else{
//process.env.NODE_ENV="production"
    cosole.log("生产环境");
}

页面样式与布局

uni-app的样式与css的样式基本一致;un-app有vue页面和nvue页面,vue页面是webview渲染的,app端的是nvue页面时原生渲染的,在nvue页面中样式限制更多,下面介绍一些不同

尺寸单位

uni-app支持的通用尺寸单位:rpx和px

px即屏幕像素

rpx即响应式像素,根据屏幕宽度自适应的动态单位.以750px宽屏幕为基准,750rpx恰好时屏幕宽度,屏幕变大,rpx实际显示效果会等比放大,但在App端和H5端屏幕达到960px时,默认将按照375px的屏幕宽度进行计算.vue页面支持rem/vh/vw,但在nvue里面不支持;nvue里面页不支持百分比;

App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px。注意此时不支持 rpx;nvue中，uni-app 模式（nvue 不同编译模式介绍）可以使用 px 、rpx，表现与 vue 中一致。weex 模式目前遵循weex的单位，它的单位比较特殊：

px:，以750宽的屏幕为基准动态计算的长度单位，与 vue 页面中的 rpx 理念相同。（一定要注意 weex 模式的 px，和 vue 里的 px 逻辑不一样。）

wx：与设备屏幕宽度无关的长度单位，与 vue 页面中的 px 理念相同

全局样式与局部样式

定义在App.vue中的样式是全局样式,作用于每一个页面,在pages目录下的vue文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖App.vue中相同的选择器