vue學習之路.02

第一個vue項目

        1.建立
            vue init webpack app01
        2.安裝依賴
            cd app01
            npm install
        3.構建
            npm run dev  啓動本機的8080端口
            或
            npm run start  啓動本機的8080端口
        4.打包
            npm run build

vue工程項目結構
        app01
            build     webpack配置文件
            config    當前項目的配置文件
            dist    打包後的目標目錄
            node-modules    第三方模塊存儲目錄
            src    源碼目錄
            static    
            index.html    首頁
            package.json node項目核心文件
            .babelrc    babel配置文件
            .gitignore    不受git管理的文件如：dist node_modules

vue實例
            new Vue({
                data:{
                    a:1,
                    b:2
                },
                methods:{
                    ... 
                    //集成
                    foo(){
                        this //this指向vue實例
                    }
                },
                components:{}
                //生命週期鉤子函數
                beforeMount(){
                    this //this也是指向vue實例
                    $.get('',() => {
                        this //箭頭函數中的this指向外層函數的this
                        //能夠在這個回調函數中直接訪問a
                        this.a
                    })
                },
                mounted(){

                }
            })
            每一個.vue文件中都有一個vue實例
            //約定data爲函數，返回一個對象
            export default {
                data(){
                    return {

                    }
                }
            }

            結論：vue中的methods裏面的函數，生命週期鉤子函數中的this指向當前vue實例
                  vue實例能夠直接訪問data中定義的變量和methods中定義的函數