一、安裝vue.js

1.簡介

Vue.js（讀音 /vjuː/, 類似於 view） 是一套構建使用者介面的 漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注檢視層，並且非常容易學習，非常容易與其它庫或已有專案整合。另一方面，Vue 完全有能力驅動採用單檔案元件和Vue生態系統支援的庫開發的複雜單頁應用。

Vue.js 的目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件。

Vue.js是一個MVVM模式的框架，如果讀者有angular經驗，一定能夠很快入門Vue的

vue.js的特點:

• 易用： 已經會了HTML,CSS,JavaScript？即刻閱讀指南即可開始構建應用！

• 靈活： 簡單小巧的核心，漸進式技術棧，足以應付任何規模的應用。

• 高效： 16kb min+gzip 的執行大小,超快虛擬 DOM ,最省心的優化

2.環境搭建

vue推薦開發環境:

• Node.js: javascript執行環境(runtime),不同系統直接執行各種程式語言

• webpack: 它主要的用途是通過 CommonJS 的語法把所有瀏覽器端需要釋出的靜態資源做相應的準備，比如資源的合併和打包。

• vue-cli: 使用者生成Vue工程模板

3.安裝node.js

從node.js官網下載並安裝node，安裝過程很簡單，一路“下一步”就可以了（傻瓜式安裝）。
安裝完成之後，開啟命令列工具，輸入 node -v，如下圖，如果出現相應的版本號，則說明安裝成功。

npm包管理器，是整合在node中的，所以，直接輸入 npm -v就會如下圖所示，顯示出npm的版本資訊。

4.安裝cnpm

由於有些npm有些資源被遮蔽或者是國外資源的原因，經常會導致用npm安裝依賴包的時候失敗，所有我還需要npm的國內映象—cnpm。

在命令列中輸入 npm install -g cnpm –registry=http://registry.npm.taobao.org 然後等待，安裝完成如下圖。

完成之後，我們就可以用cnpm代替npm來安裝依賴包了。如果想進一步瞭解cnpm的，檢視淘寶npm映象官網。

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

在命令列中執行命令 npm install -g vue-cli ，然後等待安裝完成。
通過以上三部，我們需要準備的環境和工具都準備好了，接下來就開始使用vue-cli來構建專案。

6.用vue-cli構建專案

要建立專案，首先我們要選定目錄，然後再命令列中把目錄轉到選定的目錄。在這裡，我選擇桌面來存放新建的專案，則我們需要先把目錄cd到桌面，如下圖。

在桌面目錄下，在命令列中執行命令 vue init webpack firstVue 。解釋一下這個命令，這個命令的意思是初始化一個專案，其中webpack是構建工具，也就是整個專案是基於webpack的。其中firstVue是整個專案資料夾的名稱，這個資料夾會自動生成在你指定的目錄中（我的例項中，會在桌面生成該資料夾），如下圖。

執行初始化命令的時候回讓使用者輸入幾個基本的選項，如專案名稱，描述，作者等資訊，如果不想填直接回車預設就好。

開啟firstVue資料夾，專案檔案如下所示。

這就是整個專案的目錄結構，其中，我們主要在src目錄中做修改。這個專案現在還只是一個結構框架，整個專案需要的依賴資源都還沒有安裝，如下圖。

7.安裝專案所需的依賴
要安裝依賴包，首先cd到專案資料夾（firstVue資料夾），然後執行命令 cnpm install ，等待安裝。

安裝完成之後，會在我們的專案目錄firstVue資料夾中多出一個node_modules資料夾，這裡邊就是我們專案需要的依賴包資源。

安裝完依賴包之後，就可以執行整個專案了。

8.執行專案
在專案目錄中，執行命令 npm run dev ，會用熱載入的方式執行我們的應用，熱載入可以讓我們在修改完程式碼後不用手動重新整理瀏覽器就能實時看到修改後的效果。

這裡簡單介紹下 npm run dev 命令，其中的“run”對應的是package.json檔案中，scripts欄位中的dev，也就是 node build/dev-server.js命令的一個快捷方式。

專案執行成功後，瀏覽器會自動開啟localhost:8080（如果瀏覽器沒有自動開啟，可以手動輸入）。執行成功後，會看到如下所示的介面。

二、安裝配置vscode
1.Visual Studio Code編輯器在Windows上安裝比較簡單，直接setup.exe。安裝好後首次啟動配置外掛，外掛配置必須聯網，從網上下載。如下圖點選左側擴充套件：

2.配置
檔案->首選項->設定

{
    "workbench.iconTheme": "vscode-icons",
    "editor.fontSize": 20,
    "editor.renderIndentGuides": false,
    "files.autoSave": "afterDelay",
    "liveSassCompile.settings.formats":[
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/css"
        },
        {
            "extensionName": ".min.css",
            "format": "compressed",
            "savePath": "/css"
        }
    ],
    "liveSassCompile.settings.excludeList": [
       "**/node_modules/**",
       ".vscode/**"
    ],
    "liveSassCompile.settings.generateMap": true,
    "easysass.formats": [
        {
            "format": "expanded",
            "extension": ".css"
        },
        {
            "format": "compressed",
            "extension": ".min.css"
        }
    ],
    "easysass.targetDir": "./css/",
    "background.customImages": [
        "file:///D://222.png"
    ],
    "background.useDefault": false,
    "background.style": {
        "content": "''",
        "pointer-events": "none",
        "position": "absolute",
        "z-index": "99999",
        "width": "102%",
        "height": "100%",
        "background-position": "0%",
        "background-repeat": "no-repeat",
        "opacity": 0.3
    },
    "editor.quickSuggestions": {
        "strings": true
    },
    "cssrem.rootFontSize": 12,
    "cssrem.autoRemovePrefixZero": false,
    "cssrem.fixedDigits": 3,
    "beautify.language": {
        "js": {
            "type": [
                "javascript",
                "json"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautify"
            ]
        },
        "css": [
            "css",
            "scss"
        ],
        "html": [
            "htm",
            "vue",
            "html"

        ]
    },
    "workbench.colorTheme": "Dark-Dracula",
    "vetur.format.defaultFormatter.html": "js-beautify-html"
    // "emmet.syntaxProfiles":{
    //     "vue-html":"html",
    //     "vue":"html"
    // },
    // "files.associations": {
    //     "*.vue":"html"
    // },
    // "eslint.validate":["javascript","javascriptreact","html"]
}

三、整合element
安裝完nodejs的所有，能正常執行整個專案後，將element整合到專案中的步驟如下：
1.在cmd命令列進入到專案根目錄輸入cnpm i element-ui -S
2.安裝完成之後，package.json檔案會增加element-ui依賴

3.用完整引入方式在main.js中寫入以下內容

這裡特別注意一點，之前上圖示識提到的新增註釋掉的語句是不需要註釋掉的，他是樣式檔案，如果註釋掉就無法引用此框架樣式，之所以安裝時出錯是裡面的路徑和網上提供的不一致，實際還是按照自己專案下的路徑名來定義，如我的專案下面此框架的樣式路徑是這樣：
element-ui/lib/theme-chalk/index.css

4.可以使用安裝依賴 cnpm install
5.最後執行 npm run dev
6.可以測試在App.vue檔案新增

效果顯示