vue是一個JavaMVVM庫，是一套用於構建使用者介面的漸進式框架，是初創專案的首選前端框架。它是以資料驅動和元件化的思想構建的，採用自底向上增量開發的設計。它是輕量級的，它有很多獨立的功能或庫，我們會根據我們的專案來選用vue的一些功能。它提供了更加簡潔、更易於理解的API，使得我們能夠快速地上手並使用Vue.js。

一、安裝vue

1、安裝node.js，安裝完node.js之後，npm也會自動安裝

查詢是否安裝成功的命令：

node -v

npm -v

2、全域性安裝腳手架工具vue-cli，命令如下：

npm install --global vue-cli

3、vue專案初始化命令如下，若沒有安裝webpack，則先安裝webpack

npm install -g webpack

vue init webpack myVue

注：安裝過程 中有個選項（Use ESLint to line your code ?選擇 No ）

初始化完成後的vue專案目錄如下：

4、進入到myVue目錄下，使用npm install 安裝package.json包中的依賴

命令如下：

cd myVue

npm install

5、執行專案：

npm run dev

在瀏覽器上輸入：localhost:8080，將會出現下面的vue初始頁面：

6、結束專案執行：

ctrl+v，選擇Y即可停止專案的執行

二、vue專案目錄說明

build：專案構建(webpack)相關程式碼

config：配置目錄，包括埠號等

node_modules：npm載入的專案依賴塊

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

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

components：該目錄裡存放的我們的開發檔案元件，主要的開發檔案都存放在這裡了

App.vue：專案入口檔案

main.js：專案的核心檔案

router：路由配置目錄

static：放置一些靜態資原始檔

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

.xxxx檔案：這些是一些配置檔案，包括語法配置，git配置等

index.html：首頁入口檔案

package.json：專案配置檔案

README.md：專案的說明文件，markdown 格式

三、vue專案啟動流程

1、在執行npm run dev的時候，會去在當前資料夾下的專案中找package.json檔案,啟動開發伺服器，預設埠是8080；

2、找到src的main.js檔案，在該檔案中new Vue的例項，要載入的模板內容App；

3、App是src目錄下的App.vue結尾的檔案；

4、在App.vue所對應的模板當中，有一個router-view在src目錄下有一個router資料夾，該資料夾有個index.js檔案，該檔案是配置路由詞典，指定了路由地址是空，載入HelloWorld元件

注：vue執行是基於node環境的,構建vue框架之前,需要確保node環境安裝成功

四、Vue的元件的使用

1、在components資料夾下建立.vue結尾的檔案

例如在：src/components/public/目錄下新建header.vue檔案

header.vue檔案內容如下：

2、在路由配置檔案src/router/index.js中引入元件並配置元件路由

2.1、引入元件

import Header from '@/components/public/header'

2.2、配置元件路由

{

path: '/header',

name: 'header',

component: Header

}

3、執行專案：npm run dev

4、在瀏覽器中輸入：localhost:8080/header ,顯示如下頁面：

附：vue生命週期示意圖