先看一下目录结构

┌─components uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid 存放本地网页的目录，详见
├─platforms 存放各平台专用页面的目录，详见
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─wxcomponents 存放小程序组件的目录，详见
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json 配置页面路由、导航条、选项卡等页面类信息，详见

学习一下：
static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
css、less/scss 等资源同样不要放在 static 目录下，建议这些公用的资源放在 common 目录下。
HbuilderX 1.9.0+ 支持在根目录创建 ext.json sitemap.json 文件。

开发主要知识

/common/用来存放定义的公共文件,如通用的css样式和宏定义
/components/用来存放一些自定义的组件,比如项目中用到的自定义导航栏,搜索栏,购物车加减数量,地址选择器,选择框,弹框等
/config/存在app的一些配置,比如测试和生产环境配置,状态,路由的配置

条件编译如下：

/*H5平台登录按钮显示红色，微信小程序登录按钮显示蓝色*/
button {
  /* #ifdef H5 */
  background:red;
  /*  #endif  */

  /* #ifdef MP-WEIXIN */
  background:blue;
  /*  #endif  */
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

实例：

<template>
    <view class="content">
        <view class="uni-list">
            <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in news" :key="index" @tap="opennews" :data-postid="item.post_id">
                <view class="uni-media-list">
                    <image class="uni-media-list-logo" :src="item.author_avatar"></image>
                    <view class="uni-media-list-body">
                        <view class="uni-media-list-text-top">{{item.title}}</view>
                        <view class="uni-media-list-text-bottom uni-ellipsis">{{item.created_at}}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                news: []
            };
        },
        onLoad:function(){
            uni.request({
                url: 'https://unidemo.dcloud.net.cn/api/news',
                method: 'GET',
                data: {},
                success: res => {
                    this.news = res.data;
                },
                fail: () => {},
                complete: () => {}
            });
        },
        methods:{
            opennews(e){
                uni.navigateTo({
                    url: '../news/news?postid='+e.currentTarget.dataset.postid
                });
            }
        }
    }
</script>

<style>
    .uni-media-list-body{height: auto;}
    .uni-media-list-text-top{line-height: 1.6em;}
</style>

        

          
        
        
        

          

          AI 代码解读
        
      
      

上述代码解释：
v-for表示要循环的语句，其中的news是在js部分中的data定义的属性，表示新闻列表。v-for中的item表示一个列表项，也就是一个新闻；index表示列表的下标。
@tap表示绑定点击事件。因为是在移动端，还是不要写@click了。click事件在移动端会有300ms的延迟
:data-postid表示绑定一个动态的数据，而postid表示这个动态的数据属性是这个名字。
如果想直接输出数据中的内容，通过{{}}两对大括号将数据内容包裹在里面即可。例如{{item.title}}
视频中特别强调了声明data属性时要注意，必须声明为返回一个初始数据对象的函数。只需要更新最新版本的HBuilder X 新建页面的时候就会自动生成。
编写js代码的时候，编辑器会自动用eslint对代码进行检查。可以通过工具-插件配置-eslint-vue查看和修改配置项。
onLoad是页面的生命周期。uni-app 完整支持 Vue 实例的生命周期，同时还支持应用生命周期及页面生命周期