如何做一个uni-app项目?流程讲解

青灯夜游
发布: 2021-09-09 18:58:53
转载
4455 人浏览过

如何做一个uni-app项目?本篇文章就来给大家系统的讲解一下做一个uni-app的流程,希望对大家有所帮助!

如何做一个uni-app项目?流程讲解

做一个uni-app的流程:

包含大量目前前端必备的技能,如vue,微信小程序,组件封装,移动端手势封装,数据分页,axios,moment,flex布局,sass,视频播放,视频下载等等功能。【相关推荐:《uniapp教程》】

1. uni-app介绍

1.1 什么是uni-app

uni-app 是一个使用vue.js语法开发所有前端应用的框架

可以开发各种东西

也叫全端开发框架

2. uni-app 基础

2.1 基础知识

  • uni-app初体验
  • 项目结构介绍
  • 样式和sass
  • 基本语法
  • 事件
  • 组件
  • 生命周期

3. 先基础,后项目

需要的技术栈有

  • html
  • css
  • JavaScript
  • vue
  • 微信小程序
  • uni-app
  • uni-ui
  • uni-api
  • moment.js
  • 手势封装

4. 用脚手架搭建项目

1、全局安装

npm install -g @vue/cli
登录后复制

2、创建项目

vue create -p dcloudio/uni-preset-vue my-project
登录后复制

3、启动项目(微信小程序)

npm run dev:mp-weixin
登录后复制

4、微信小程序开发者工具导入项目

记住要进入到根目录里

4.1 项目目录

image

4.2 样式和sass

  • 支持小程序的rpx和h5的vw、vh
  • 内置有sass的配置了,只需要安装对应的依赖即可“npm install sass-loader node-sass "
  • vue组件中,在 style标签上加入属性“