从零开始创建一个uni-app项目
从零开始创建一个uni-app项目
- 新建项目
- 目录说明
- 文件结构
- 安装uview
- 安装ucharts
新建项目
创建uni-app项目首先要下载HBuilder X,HBuilderX下载地址: 下载地址,HBuilderX安装方法:安装方法。安装好HBuilderX以后,我们就可以开始创建uni-app项目了。
打开HBuilderX,选择“新建”,选择“项目”
选择uni-app项目类型,填入项目名称,浏览选择项目保存地址,选择uni-ui项目模板,vue的版本为2,点击创建,HBuilderX会为我们下载项目模板。
下载完成会提示我们刚刚创建项目成功,在左侧项目列表就可以看到我们刚刚创建的项目。
删除多余代码,创建文件目录,梳理项目文件结构。
目录说明
┌─api 接口目录
│ ├─bussinessApi.js 业务接口API
│ └─request.js 封装请求方法
├─common 项目相关公共js方法、公共css等
│ ├─common.scss 项目公共样式
│ ├─formatDate.js 封装格式化日期方法
│ ├─storage.js 封装本地存储方法
│ └─utils.js 常见的通用的功能、工具方法
├─components 符合vue组件规范的uni-app组件目录
├─pages 业务页面文件存放的目录
├─static 存放应用引用的本地静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
│ ├─font 字体目录
│ ├─iconfont 阿里矢量图标字体资源
│ └─img 图片目录
├─store vuex 目录
├─unpackage 打包APP时忽略的目录,打包目录,在这里有各个平台的打包文件
├─uview-ui uview-ui 2.0插件依赖
├─App.vue 应用配置,用来配置App全局样式以及监听 应用生命周期
├─main.js Vue初始化入口文件
├─manifest.json 配置应用名称、appid、logo、版本等打包信息
├─package.json 应用包配置文件,集成钉钉小程序必须加入该文件
├─pages.json 页面包配置文件
├─README.md 说明文档
└─uni.scss 这里是uni-app内置的常用样式变量
文件结构
安装uview
uView是uni-app生态专用的UI框架,uni-app 是一个使用 Vue.js 开发所有前端应用的框架。
uView官网 | uView安装方式
初始化npm
下载中
下载完成
安装完成后进行相关配置,npm安装方式配置
项目文件中新增了一个目录
安装ucharts
uCharts是一款基于canvas API开发的适用于所有前端应用的图表库,开发者编写一套代码,可运行到 Web、iOS、Android(基于 uni-app / taro )、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝/京东/360)、快应用等更多支持 canvas API 的平台。
ucharts官网 | ucharts下载地址
我们下载组件
下载成功后得到文件夹uCharts,找到uni-app文件夹
找到ucharts组件
找到qiun-data-charts(非uniCloud)
打开components文件夹,按照使用说明操作
新增了以下文件目录
从零开始创建一个uni-app项目相关推荐
- uniapp如何创建一个安卓app项目,并制作自定义调试基座,并成功运行
1.新建项目 2.选择uniapp默认模板,vue版本2或3都可以 3.点击创建完之后需要创建自定义调试基座 4.关键的来了,更改成这两个配置再点打包: 6. 会出来一个弹框,不要管,点继续打包 7. ...
- 从零开始创建一个vue项目 1
从零开始创建一个vue项目 创建空文件夹,存放相关目录,cmd进入命令行 vue init webpack token 创建项目(除eslint,其它都yes) 打包配置config下面的index. ...
- 从零开始创建一个Android主屏幕Widget
登录 / 注册 IT168首页 手机 整机 DIY硬件 摄影 消费数码 数字家电 企业IT 企业商用 办公 互动 社区 全部频道 IT168技术开发频道 IT168首页 > 技术开发 > ...
- Android-IM从零开始开发一个即时通讯项目
Android-IM从零开始开发一个即时通讯项目 https://www.jianshu.com/p/dca480006691 关于聊天室项目 聊天室项目,也被称为即时通讯(IM). 其原理是服务器是 ...
- eclipse创建springboot项目_创建一个 Spring Boot 项目,你会几种方法?
我最早是 2016 年底开始写 Spring Boot 相关的博客,当时使用的版本还是 1.4.x ,文章发表在 CSDN 上,阅读量最大的一篇有 42W+,如下图: 2017 年由于种种原因,就没有 ...
- 如何用 React Native 创建一个iOS APP?(二)
我们书接上文<如何用 React Native 创建一个iOS APP?>,继续来讲如何用 React Native 创建一个iOS APP.接下来,我们会涉及到很多控件. 1 AppRe ...
- vue.js — 安装Webpake创建一个完整的项目并上传至码云
vue.js - 安装Webpake创建一个完整的项目并上传至码云 今天总结一下之前几天学习的一整套的创建项目方法: 前提条件:已安装node.js.npm/cnpm最新版本.vue-cli. VS ...
- [纯代码] Swift+UIKit · 搭建第一个iOS APP项目
本文目录 前言 创建一个纯代码编辑的Swift + UIKit项目 创建一个Swift + UIKit项目 让它变成纯代码编辑的 让你的APP打开指定的ViewController 创建一个窗口 编辑 ...
- 创建一个Spring Boot项目
文章目录 Spring Boot的功能 Spring Boot的优点 Spring Boot 的三种创建方式 在线创建 使用开发工具创建 IntelliJ IDEA Maven 创建 项目结构 修改T ...
最新文章
- SAP SD基础知识之自动信用控制
- Excel超级链接方式应用技巧
- SaaS创业型企业如何打破销售瓶颈?
- leetcode 455. 分发饼干(贪心算法)
- java spi机制_Java 双亲委派机制的破坏—SPI机制
- poj 2573 Bridge(有A、B、C、D四个人,要在夜里过一座桥……)
- 计算机 统计学考研,统计学考研科目有哪些
- Matlab 图例 位置的不同命令
- JS 把数组按倒序排列
- CSS实现3D菜单效果【每日一题】
- linux用户态内存屏障,Linux-内存屏障
- 利用LANDesk Management进行软件的打包步骤
- VC6.0特殊功能-根据汉字转成拼音字符
- 百度蜘蛛与百度快照的关系
- SAP MM模块-MIGO收货后自动打印收货单
- 蓝牙协议与普通网络协议的对比
- L1-021 重要的话说三遍 (5 分) 含解题思路 C语言
- Remote Desktop安卓软件实现手机远程控制电脑
- navicat创建mysql定时任务_navicat创建MySql定时任务的方法详解
- atmega16 c语言编程,ATMEGA16读写iic(24c02) C语言程序 测试通过
热门文章
- 【裴蜀定理】CF1055C Lucky Days
- Top 7大开源数据可视化分析工具!
- 【luogu CF1009F】Dominant Indices(长链剖分优化DP)
- Python的下载和安装教程
- 开源分布式存储系统的对比
- 微信小程序和ESP32对接,实现手机远程控制灯的亮灭
- antdPro创建的项目网络请求统一处理
- python 输出结果乱码解决方法——res.encoding=‘utf-8‘
- 世界各国 省市县 省份 城市 三级数据库表 mysql
- centos6.8服务器中了挖矿程序病毒的解决方法