uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
今天我主要介绍的是如何使用vue-cli脚手架搭建uniapp的项目
1.首先全局安装vue-cli脚手架(安装过可以忽略这一步)
npm install -g @vue/cli
2.创建我们关于uniapp的第一个项目
vue create -p dcloudio/uni-preset-vue 你的项目名称
3.打开项目的命令行,启动项目,在微信小程序中进行开发
npm run dev:mp-weixin
4.在微信小程序选择导入项目,项目名称–>dis–>dev–>mp-weixin
接下来就是进行相应功能的开发了。
5.uniapp项目的结构目录
│ App.vue 应用配置,用来配置App全局样式以及监听
│ main.js Vue初始化入口文件
│ manifest.json 配置应用名称、appid、logo、版本等打包信息
│ pages.json 配置页面路由、导航条、选项卡等页面类信息
│ uni.scss 内置的sass变量,可以直接使用
│
|─pages
│ └─index
│ index.vue 页面组件
│
└─static 静态资源
logo.png
6.我们所要开发的小程序的页面都是在pages里面保存,同时pages.json相当于我们在小程序开发中的app.json,启动之后的首页就是pages.json的第一项。