• 安裝

1. 安裝node.js；
2. 安裝全局vue-cli腳手架,用於幫助搭建所需的模板框架：npm install -g vue-cli；
3. 安裝完成後可以直接在cmd中輸入vue查看是否出現信息，若出現則安裝成功。

• 新建項目

1. 在命令窗口輸入vue init webpack first-project(項目文件夾名)，稍等一會...；
2. 根據提示確定項目名稱、項目描述、作者信息等，router那裏選y，後面的選n就好了；
3. 完成後，命令窗口會給出start項目的提示，安裝依賴等，照做就好。

4. promote:~ zhanghan$ vue init webpack first-project
   
    
   ? Project name first-project
   ? Project description A Vue.js project
   ? Author zhanghan
   ? Vue build standalone
   ? Install vue-router? Yes
   ? Use ESLint to lint your code? No
   ? Set up unit tests No
   ? Setup e2e tests with Nightwatch? No
   ? Should we run `npm install` for you after the project has been created? (recom
   mended) no
   
      vue
    
   -cli · Generated "first-project".
   
   # Project initialization finished!
   # ========================
   
   To get started:
   
     cd first-project
     npm install (or if using yarn: yarn)
     npm run dev
     

5. npm run dev之後就會出現項目運行的地址，在瀏覽器打開就會看到如下界面，這樣項目就創建成功：

• 目錄解析

1. build ：編譯項目的配置文件目錄
   config：配置文件目錄
   src：項目的主要代碼目錄
    
   static：靜態資源
   
   

2. 開發時的代碼主要寫在src裏：

   App.vue
   components: HelloWorld.vue  ：放的是vue組件
   assets:logo.png
   router：index.js  ：在vue中實現路由還是相對簡單的。因為我們頁面中所有內容都是組件化的，我們只要把路徑和組件對應起來就可以了，然後在頁面中把組件渲染出來。
   main.js  :入口文件，主要是通過 new vue（）來創建vue實例。

• 模版語法理解

main.js

import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  router,
  components: { App },
  template: ‘<App/>‘
})

通過new vue（）創造實例，項目都是從這裏啟動的，新的vue實例中包含一個對象，對象中又包括幾個選項：

el：el的值是vue實例掛載的目標，是和index.html中的body裏的id對應的，el必須是一個已經存在的元素；

components：包含的是一些對實例可見的組建，只有components中存在的組件才能在template中用；

template：掛載在頁面的模板，與上面的components中的組件名對應；

這個main.js文件的主要含義是將<APP/>這個模板掛載在元素#app上。

App.vue：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: ‘App‘
}
</script>

<style>
#app {
  font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

這是一個典型的單文件組件，看了一些實踐教程，發現很少直接在這裏寫的，都是在components目錄下新建vue組件，然後組合使用，這樣使每個組件都是分離的，方便書寫。vue組件中包含了html、js和css樣式。

HelloWorld.vue組件

這是一個組件，跟上文中的App.vue中的組成一樣：其中有一些新的第一次看不懂得地方，結合慕課上的視頻看懂了一些。

<h1>{{ msg }}</h1>

data（）{return{msg:‘Welcom to your vue.js App‘}}

例如這裏雙花括號：{{}}是vue的一個模板語法，文本插值的意思，在<script></script>中的data中定義了一個對象，這個對象可以在template中通過{{}}來訪問。如果我們需要改變頁面上的顯示結果，可以直接在data裏面修改msg的值即可。（據說有一個前端的專業詞匯叫渲染）

• 了解其他語法

1. v-once：可以實現一次性插值，在<h1 v-once>{{msg}}</h1>，這樣，改變data中的值，頁面結果也不會改變。{{}}中也可以寫js表達式。
2. v-bind：綁定，{{}} 不能在 HTML 屬性中使用。針對 HTML 屬性需要使用 v-bind；對布爾值的屬性也有效
3. v-on：用來監聽DOM事件:

   <button v-on:click="doSomething"></button>

4. v-if:判斷語句，根據判斷條件的真假來決定某些事件是否發生。eg：

   <template>
     <p v-if="seen">Now you see me</p>
   </template>
   
   <script>
   export default {
     name: ‘hello‘,
     data: {
       seen: true
     }
   }
   </script>

5. v-for：用來綁定一個數組來渲染一個列表：必須使用item in items這樣的語法形式，找到一個例子如下：

   <ul id="example-1">
     <li v-for="item in items">
       {{ item.message }}
     </li>
   </ul>
   var example1 = new Vue({
     el: ‘#example-1‘,
     data: {
       items: [
         { message: ‘Foo‘ },
         { message: ‘Bar‘ }
       ]
     }
   })

vue簡單入門-學習筆記