VUE環境及基礎

一、環境配置

1. 搭載npm/cnpm環境環境搭建參考
   1. 前往官網下載nodejs，選擇安裝程序(.msi)，下載並安裝
   2. 判斷npm安裝情況：npm -v查看版本
   3. 配置Vue環境變量(prefix、cache、NODE_PATH模塊存儲位置)
   4. 安裝express: npm install express -g
   5. 判斷模塊安裝情況:進入模塊的目錄下 require(‘express’)
   6. 安裝cnpm(淘寶鏡像npm)
   7. 將安裝目錄加入系統環境配置path
   8. 判斷cnpm安裝情況：cnpm -v查看版本
2. 安裝cli腳手架
   1. 使用腳手架纔可以初始化項目: cnpm install -g vue-cli

二、項目初始化

1. 初始化Vue項目
   1. 創建項目文件夾，cmd進入文件夾位置，執行以下命令
   2. 命令 vue init webpack my-project(文件夾名稱)
   3. 彈出輸入框，按照要求填項目名稱(此名稱會顯示在網站title處，避免中文)，還有項目描述/作者等……
   4. 詢問是否安裝vue-router路由、ESLint代碼檢測(測試時無需安裝，否則可能出現代碼不規範無法通過編譯)
   5. 詢問是否安裝測試模塊tests、NightWtach
2. 啓動初始化項目
   1. 安裝依賴：進入項目文件夾，執行命令 npm install
   2. 啓動程序：進入項目文件夾，執行命令 npm run dev
   3. 返回項目地址，根據地址訪問Vue項目

三、項目目錄精簡說明

1. index.html：根視圖頁面
2. static：靜態文件目錄(文檔、本地json等)
3. src：源碼文件
4. config/builde：項目配置文件/服務器配置文件

四、初始化界面基本說明

1. 啓動配置
   導入vue:import Vue from ‘vue’
   設置啓動頁面：import App from ‘./App’(省略.vue文件後綴)

2. 組件使用
   引入、加載試圖、創建組件名字

3. 解析main.js

   import App from './App'   //引入組件
   new Vue({
     el: '#app',   // 指定對象
     components: { App },   //創建組件名字
     template: '<App/>'    //加載視圖，視圖名字和組件名字要統一
   })
   引入組件App.vue並指定其爲根組件；
   components注入組件App至index.html中的app標籤，在其中加載視圖；
   

4. 解析App.vue

   import HelloWorld from './components/HelloWorld' //引入組件HelloWorld
   export default {
   	  name: 'App',
   	  components: {  //定義組件名字HelloWorld
   	    HelloWorld  
   	  }
   }
    < HelloWorld/> //在html中使用組件
   

5. Vue使用Mustache模板
   形式：{{ 語法 }} //注意僅可填寫單行語句，例如if-else語句/let a=10 就不行，let是兩句的結合
   *注意：不能作用在html特性上，例如v-html="{{ xx }}"，報錯

   申明變量
   data () {
         return {
         msg: 'Welcome to Your Vue.js App',
   	  hello: 'Hi,VUE'
       }
   }
   使用語法	
   變量{{ msg }} //msg爲變量名，在data中被聲明
   運算{{ 1+1 }}、文本{{ '你好老弟' }}、運算符{{ 0>10 ? 'Right':'False' }}
   

6. Vue組件構成
   視圖部分：< template>
   邏輯部分：< script>
   樣式部分：< style scoped>