vue-cli教程(一) 環境搭建

搭建環境的教程網上不少，簡單記錄下

環境搭建：

1.安裝nodejs和npm 略

2.安裝cnpm： npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安裝vue-cli : cnpm install -g vue-cli 

4.建立項目：vue init webpack testvue

    會有對話框 除了 Install vue-router? (Y/n)  選擇Y ，其餘的暫時都選擇 n 或者默認（暫時沒明白，先不添加了）

5. 執行：

    cd testvue 

    cnpm install （雖然有些依賴下不到，可是還能將就着用）

6. npm run dev (生成好了以後若是在瀏覽器看到welcome頁面 ,算搭建成功了)

7.若是初學者像我好奇，應該怎麼生成靜態文件，部署，運行 npm run build

       會生成 dist 文件夾，而後將dist文件夾放在相似於 tomcat ,apache,nginx的工做目錄下就能夠在瀏覽器上正常訪問了，初次訪問會出現js沒法加載，就 在 config/index.js中

assetsPublicPath: './',   //這個要加上 . 將絕對路徑改爲相對路徑

8.vue的經常使用函數：

        //數據

        data:function(){

                return {  message：「參數」

                               }

         }

        //方法

        methods:{

                add:function(){}  ,

        }，

        //監聽數據，須要在data和props裏定義

        watch:{

                message:function(newVal,oldVal){}

        }

        //計算屬性，不能夠在data和props定義

        computed:{

            newMessage:function(){}

         }

9.生命週期函數（vue-2）：

beforecreate : 舉個栗子：能夠在這加個loading事件
created ：在這結束loading，還作一些初始化，實現函數自執行
mounted ： 在這發起後端請求，拿回數據，配合路由鉤子作一些事情

beforeUpdate：數據變化，頁面更新以前調用

updated：頁面更新以後調用
beforeDestory： 你確認刪除XX嗎？

destoryed ：當前組件已被刪除，清空相關內容