Vue 是一個前端框架，特點是
資料繫結：比如你改變一個輸入框 Input 標籤的值，會自動同步更新到頁面上其他繫結該輸入框的元件的值；

元件化：頁面上小到一個按鈕都可以是一個單獨的檔案.vue，這些小元件直接可以像樂高積木一樣通過互相引用而組裝起來

一、編輯器選用vscode，下載並安裝

下載地址：https://code.visualstudio.com/

說明：VS Code（Visual Studio Code）是由微軟研發的一款免費、開源的跨平臺文字（程式碼）編輯器，預設已整合git

二、搭建開發環境

1、下載並安裝node.js（https://nodejs.org/en/）

安裝過程除了自定義安裝目錄，其餘直接下一步

安裝完成在命令列模式輸入 npm -v，顯示版本號表示安裝成功

 

說明：Node.js是一個Javascript執行環境(runtime environment)

Node.js的優點

nodejs作為一個新興的前端框架，後臺語言，有很多吸引人的地方：

RESTful API

單執行緒

Node.js可以在不新增額外執行緒的情況下，依然可以對任務進行併發處理 —— Node.js是單執行緒的。它通過事件迴圈（event loop）來實現併發操作，對此，我們應該要充分利用這一點 —— 儘可能的避免阻塞操作，取而代之，多使用非阻塞操作。

非阻塞IO

V8虛擬機器

事件驅動

2、改變原有環境變數

命令列分別輸出如下命令(自定義路徑，我的放在D:\soft\nodejs\下)

npm config set prefix "D:\soft\nodejs\node_global"

npm config set cache"D:\soft\nodejs\node_cache"

3、在系統環境變數新增NODE_PATH

4、nodejs npm install 代理設定（非代理環境跳過此步驟）

 在命令列中設定代理伺服器及賬號密碼

npm config set https-proxy=http://使用者名稱:密碼@代理Host:埠號/
npm config set proxy=http://使用者名稱:密碼@代理Host:埠號/
 

取消代理的方法

npm config delete proxy 

npm config delete https-proxy

 

5、在命令列輸入以下命令安裝express（注：“-g”表示安裝到global目錄下，就是上面設定的node_global中）

可以看到node_global/node_modules下有express了

在命令列輸入node進入編輯模式，輸入以下程式碼檢測是否能正常載入模組  require('express')

如果不成功，像我這裡提示找不到 express模組，改變了一下引入express的路徑，指向實際的位置，可以了

解決該問題：

之前我已經安裝了全域性的express（cnpm install express -g），並且有配置系統環境變數，我的express在

D:\soft\nodejs\node_global\node_modules 目錄下。

再配置一下當前系統登入使用者的環境變數：

1)當前使用者環境變數新增NODE_PATH並設定路徑為 D:\soft\nodejs\node_global\node_modules

2) 在當前使用者環境變數path中新增路徑 D:\soft\nodejs\node_global\node_modules

這時重新開啟命令列，再用 require('express') 測試也可以找到了

 

6、安裝cnpm

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

等待安裝完成後，輸入cnpm -v ，檢測是否正常，但是這裡會報錯。因為cnpm會被安裝到D:\soft\nodejs\node_global下，而系統變數path並未包含該路徑。在系統變數path下新增該路徑即可正常使用cnpm。

輸入cnpm -v ，檢測正常

說明：

什麼是npm和cnpm

npm（node package manager）：nodejs的包管理器，用於node外掛管理（包括安裝、解除安裝、管理依賴等）,是整合在node中的，所以安裝了node也就有了npm
cnpm:因為npm安裝外掛是從國外伺服器下載，受網路的影響比較大，可能會出現異常，cnpm是淘寶對npm的映象伺服器：“這是一個完整 npmjs.org 映象，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鐘 一次以保證儘量與官方服務同步。”

7、安裝vue

在第4步我配置了nodejs npm install 代理，後面如果用cnpm去獲取依賴，也需要以同樣方法配置一下cnpm install的代理

cnpm install vue

8、vue-cli的安裝

cnpm install -g vue-cli

說明：

vue-cli是vue官方提供的一個命令列工具，可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需一分鐘即可啟動帶熱過載、儲存時靜態檢查以及可用於生產環境的構建配置的專案。

9、如果已有vue專案，可以跳過7、8兩個步驟，在工程根目錄下開啟命令列執行 npm(或cnpm) install即可

三、建立並執行專案

1、建立一個vue專案

在命令列中執行命令 vue init webpack file-name。這個命令是初始化一個專案，其中webpack是構建工具，也就是整個專案是基於webpack的。其中file-name是整個專案資料夾的名稱（自定義），這個資料夾會自動生成在你指定的目錄中(執行這個命令的目錄)。

執行初始化命令的時候回讓使用者輸入幾個基本的選項

Project name :專案名稱 ，注意：這裡不能使用大寫
Project description:專案描述，預設為A Vue.js project,直接回車，不用編寫。
Author：作者，如果你有配置git的作者，他會讀取。
Install  vue-router? 是否安裝vue的路由外掛，我們這裡需要安裝，所以選擇Y
Use ESLint to lint your code? 是否用ESLint來限制你的程式碼錯誤和風格。我們這裡不需要輸入n（建議），如果你是大型團隊開發，最好是進行配置。
Setup unit tests with  Karma + Mocha? 是否需要安裝單元測試工具Karma+Mocha,不需要就選n
Setup e2e tests with Nightwatch?是否安裝e2e來進行使用者行為模擬測試，不需要就選n

例如：在D盤下建立一個Vue的專案，資料夾名稱為helloVue

開啟helloVue如下

     介紹一下目錄及其作用：

     build：最終釋出的程式碼的存放位置。

     config：配置路徑、埠號等一些資訊，剛開始學習的時候選擇預設配置。

     node_modules：npm 載入的專案所需要的各種依賴模組。

     src：這裡是我們開發的主要目錄（原始碼），基本上要做的事情都在這個目錄裡面，裡面包含了幾個目錄及檔案：

             assets:放置一些圖片，如logo等

             components:目錄裡放的是一個個的元件檔案

             router/index.js：配置路由的地方

             App.vue：專案入口元件（根元件），我們也可以將元件寫這裡，而不使用components目錄。主要作用就是將我們自己定義的元件通過它與頁面建立聯絡進行渲染，這裡面的<router-view/>必不可少。

             main.js ：專案的核心檔案（整個專案的入口js）引入依賴包、預設頁面樣式等（專案執行後會在index.html中形成一個app.js檔案）。

     static：靜態資源目錄，如圖片、字型等。

     test：初始測試目錄，可刪除

      .XXXX檔案：配置檔案。

     index.html：html單頁面的入口頁面，可以新增一些meta資訊或者同統計程式碼啥的或頁面的重置樣式等。

     package.json：專案配置資訊檔案/所依賴的開發包的版本資訊及所依賴的外掛資訊。

     README.md：專案的說明檔案。

     webpack.config.js：webpack的配置檔案，把.vue的檔案打包成瀏覽器能讀懂的檔案。

     .babelrc:是檢測es6語法的檔案的配置

     .getignore:忽略檔案的配置（比如模擬本地資料mock不讓他在get提交/打包上線的時候忽略不使用可在這裡配置）

     .postcssrc.js:字首的配置 

     .eslintrc.js:配置eslint語法規則（在這裡面的rules屬性中配置讓哪個語法規則失效）

     .eslintignore:忽略eslint對專案某些檔案的語法規則的檢查
 

開啟package.json，可以看到專案需要的依賴包

"dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-jest": "^21.0.2",
    "babel-loader": "^7.1.1",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^2.0.1",
    "chromedriver": "^2.27.2",
    "copy-webpack-plugin": "^4.0.1",
    "cross-spawn": "^5.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "jest": "^22.0.4",
    "jest-serializer-vue": "^0.3.0",
    "nightwatch": "^0.9.12",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "selenium-server": "^3.0.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-jest": "^1.0.2",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  }

2、安裝專案需要的依賴包

專案資料夾下執行  cnpm install 

 

3、執行專案

在專案目錄中，執行命令 npm run dev ，用熱載入的方式執行應用，其中的“run”對應的是package.json檔案中，scripts欄位中的dev，也就是 node build/dev-server.js命令的一個快捷方式。

專案執行成功後，瀏覽器會自動開啟localhost:8080（如果瀏覽器沒有自動開啟，可以手動輸入）。