uni-app入门详解

1 uni-app学习

1.1 什么是uni-app

uni-app是一个使用Vue.js语法来开发所有前端应用的框架(也称之为全端开发框架)
技术栈:JavaScript,vue, 微信小程序, uni-app

1.2 有哪些uni-app的作品

image

1.3. uni-app的社区规模

image

2 uni-app基础

2.1 如何创建项目

脚手架搭建项目
1.全局安装  
    npm install -g @vue/cli  
2.创建项目      
    vue create -p dcloudio/uni-preset-vue my-project     
3.启动项目(微信小程序)   
    npm run dev:mp-weixin    
4.微信小程序开发者工具导入项目         

(搭建过程中可能会遇到的问题)

image

2.2 如何编写代码

2.3 uni-app初体验

image

2.4 项目结构介绍

image

2.5 样式和sass

  • 支持小程序的rpx 和 h5的vw,vh。
    rpx 小程序中的单位 750rpx = 屏幕宽度 vw h5单位 100vw = 屏幕的宽度, 100vh = 屏幕的高度
  • 内置sass的配置, 只需要安装对应的依赖即可 npm install sass-loader node-sass
  • vue组件中,在style标签上加入属性