第一個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中定義的函數