1、uniapp介绍

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

1.1、开发方式

• HbuilderX快速开发
• 脚手架快速搭建和开发

1.2、脚手架搭建项目

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

2、项目结构

• babel.confing.js es5转es6
• package 包描述文件
• postcss 如何编译css
• README 文档说明

3、样式和sass

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

4、基本语法

4.1、数据展示

• 在js的data中定义数据
• 在template中通过{{数据}}来显示
• 在标签的属性上通过:data-index=“数据”来显示

<template>
    <view>
        <view>Message: {{ msg }}</view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                msg: 'Hello Vue!'
            }
        }
    }
</script>