Vue.js 2.x筆記：安裝與起步（1）

libingql發表於2018-06-07
Vue.js筆記

1. 環境準備

　　Vue是一套用於構建使用者介面的漸進式框架，設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層。

　　安裝Node.js，下載：https://nodejs.org/

　　檢視安裝：

$ node -v

　　npm包管理器，整合在node中。

　　檢視npm版本：

$ npm -v

　　npm是國外資源，資源網路存在部分限制因素.

　　安裝國內映象cnpm：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

2. 安裝vue-cli腳手架構建工具

2.1 全域性安裝vue-cli

$ npm install -g vue-cli

　　或：

$ cnpm install -g vue-cli

2.2 使用vue-cli構建專案

　　指定專案目錄：

C:\Users\Libing>cd /d F:\Projects

　　構建專案：

F:\Projects>vue init webpack libing.vue

　　安裝專案依賴包：

F:\Projects\libing.vue>cnpm install

　　執行專案：

F:\10-Projects\libing.vue>cnpm run dev

　　專案執行成功之後，在瀏覽器中開啟地址檢視：http://localhost:8080

　　修改埠號：config/index.js

　　專案打包：打包完成後，會生成 dist 資料夾。專案上線時，只需要將 dist 資料夾放到伺服器。

$ npm run build

　　或：

$ cnpm run build

2.3 Vue.js目錄結構

目錄/檔案說明
build 專案構建（webpack）相關程式碼
config 配置目錄，包括埠號等。
dist 打包目錄
node_modules npm 載入的專案依賴模組
src

開發目錄，目錄及檔案：

　　◊ assets：存放圖片、Logo等；

　　◊ components: 目存放一個元件檔案，可以不用。

　　◊ App.vue: 專案入口檔案，可以直接將元件寫這裡，而不使用 components 目錄。

　　◊ main.js：專案的核心檔案。
static 靜態資源目錄，如圖片、字型等。
test 初始測試目錄，可刪除
xxxx檔案 配置檔案，包括語法配置，git配置等。
index.html 首頁入口檔案，可新增一些 meta 資訊或統計程式碼
package.json 專案配置檔案
README.md 專案說明文件，markdown 格式

3. 起步示例

3.1 示例

　　示例1：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>libing.vue</title>
  <script src="node_modules/vue/dist/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="todo in todos" v-bind:key="todo.id">
        {{ todo.text }}
        {{ getTitle() }}
      </li>
    </ul>
  </div>
  <script>
    new Vue({
      el: "#app",
      data: {
        title: "Todo List",
        todos: [{
            id: 1,
            text: "Pending"
          },
          {
            id: 2,
            text: "In Procedure"
          },
          {
            id: 3,
            text: "Done"
          }
        ]
      },
      methods: {
        getTitle: function () {
          return this.title;
        },
        add: function () {

        },
        remove: function () {

        }
      }
    });

  </script>
</body>

</html>

　　示例2：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>libing.vue</title>
  <script src="node_modules/vue/dist/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <h1>{{ title }}</h1>
    <input type="text" v-model="newTodo" v-on:keyup.enter="add">
    <ul>
      <li v-for="(todo,index) in todos">
        {{ todo.text }}
        <button v-on:click="remove(index)">X</button>
      </li>
    </ul>
  </div>
  <script>
    new Vue({
      el: "#app",
      data: {
        title: "Todo List",
        newTodo: "",
        todos: [{
            text: "Pending"
          },
          {
            text: "In Procedure"
          },
          {
            text: "Done"
          }
        ]
      },
      methods: {
        add: function () {
            var text = this.newTodo.trim()
            if (text) {
                this.todos.push({ text: text })
                this.newTodo = ''
            }
        },
        remove: function (index) {
            this.todos.splice(index, 1)
        }
      }
    });

  </script>
</body>

</html>

3.2 說明

　　每個Vue應用都需要通過例項化 Vue 來實現。

var vm = new Vue({
  // 選項
});

　　Vue建構函式引數：

　　　　el：DOM 元素中的 id

　　　　data：定義屬性

　　　　methods：定義函式，可以通過 return 來返回函式值。

　　　　{{ }}：輸出物件屬性和函式返回值

4. Vue生命週期圖示

相關文章