npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-app
cd my-app
npm run dev:mp-weixin
小程式工具導入項目，注意：是mp-weixin的文件夾

width：750rpx   //小程式的單位，相當於螢幕的寬度
width：100vw   //H5的單位，相當於螢幕的寬度
width：100vh   //H5的單位，相當於螢幕的高度
npm  install  sass-loader  node-sass
<style lang="scss">
uni.scss文件中定義好的樣式可以直接cv大法使用

"pages": [ //pages數組中第一項表示應用啟動頁，參考：//uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        }，
                {
            "path": "pages/index2/index2",
            "style": {
                "navigationBarTitleText": "數據展示" //標題改變
            }
        }
    ]
放在第一就是首頁顯示了，之後創建頁面需要在pages.json引入

v-if顯示或隱藏，不適合做頻繁的切換顯示
v-show顯示或隱藏，適合頻繁的·切換顯示
true的時候就是顯示，fasle就是隱藏
v-if隱藏時是直接刪除這個標籤的
v-show隱藏式通過樣式隱藏這個標籤的

加工用法
<template>
   <view class="content">
      <view>{{money}}</view> //10000
      <view>{{nomoney}}</view>  //￥10000
   </view>
</template>

export default {
    data () {
        return {
            money: 10000
        }
    },
    computed: {
        nomoney () {
            return '￥' + this.money
        }
    }
}

過濾用法
<template>
    <view class="content">
        <view v-for="(item, index) in list" :key="index">
            <view>ID:{{item.id}};姓名:{{item.name}};年齡:{{item.age}}</view>  //正常數組遍歷
        </view>
        <view v-for="(item, index) in filterlist" :key="index">
            <view>ID:{{item.id}};姓名:{{item.name}};年齡:{{item.age}}</view>  //過濾後數組遍歷
        </view>
    </view>
</template>

export default {
    data () {
        return {
            list: [
                {
                    id:0,
                    name: '張三',
                    age: 19
                },
                {
                    id:1,
                    name: '李四',
                    age: 199
                },
                {
                    id:2,
                    name: '牛五',
                    age: 1999
                }
            ]
        }
    },
    computed: {
        filterlist () {
            return this.list.filter(v => v.id <= 0) //只提取id<=0滿足條件的
        }
    }
}

<template>
    <view class="content">
        <view data-index='11' @click="hander(1, $event)">點我試試1</view> //￥event固定寫法
        <view data-index='22' @click="hander(2, $event)">點我試試2</view>
    </view>
</template>

<script>
export default {
    methods: {
        hander (index, event) {
            console.log(index) //獲取到直接通過函數傳參的值
            console.log(event) //獲取到不知道是什麼的一個對象，但我們要的值藏在這裡面
            console.log(event.currentTarget.dataset.index) //獲取到標籤自定義屬性data-index的值
        }
    }
}
</script>

import  組件  from @/components/組件

@絕對路徑

跟Vue用法是一樣的，props父傳子參數和$emit子傳父參數，

$emit用法：子組件觸發事件發出，父組件監聽事件接收

流程：子組件內部@click="funciton"    funciton（）{ this.$emit('自定義事件'，要傳遞的參數) }

　　  父組件內部@自定義事件="funciton2"     funciton2（e）{ this.data = e} //e就是傳遞過來的參數

App.vue文件中
<script>
    export default {
        onLaunch: function() {
            console.log('App Launch')
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        },
        globalData: { //定義全局數據
            base: 'www.360.com'
        }
    }
</script>

調用數據的頁面
<script>
export default {
    methods: {
        hander () {
            getApp().globalData.base //調用全局數據，getApp（）固定函數
        }
    }
}
</script>

先在組件內使用slot佔位符，之後在組件標籤內就可以加入想要的標籤了
<my>
    <slot></slot>
</my>

常用的幾個生命周期
全局App中，onLaunch表示應用啟動時
頁面中，使用onLoad頁面載入完畢；onShow頁面顯示時
組件中，mounted組件掛載完畢時