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

時間 2019-12-05

標籤 vue.js vue 2.x 筆記安裝起步欄目 JavaScript 简体版

原文原文鏈接

1. 環境準備

　　Vue是一套用於構建用戶界面的漸進式框架，設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層。html

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

　　查看安裝：node

$ node -v

　　npm包管理器，集成在node中。webpack

　　查看npm版本：git

$ npm -v

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

　　安裝國內鏡像cnpm：vue-cli

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

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

2.1 全局安裝vue-cli

$ npm install -g vue-cli

　　或：npm

$ cnpm install -g vue-cli

　　查看安裝的vue版本：json

vue -V

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>