vue是一個(gè)JavaMVVM庫(kù)允耿，是一套用于構(gòu)建用戶界面的漸進(jìn)式框架奕删，是初創(chuàng)項(xiàng)目的首選前端框架俺泣。它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的，采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)完残。它是輕量級(jí)的砌滞，它有很多獨(dú)立的功能或庫(kù)，我們會(huì)根據(jù)我們的項(xiàng)目來(lái)選用vue的一些功能坏怪。它提供了更加簡(jiǎn)潔贝润、更易于理解的API，使得我們能夠快速地上手并使用Vue.js铝宵。
一打掘、安裝vue
1华畏、安裝node.js，安裝完node.js之后尊蚁，npm也會(huì)自動(dòng)安裝
查詢是否安裝成功的命令：
node -v
npm -v
結(jié)果顯示：
2亡笑、全局安裝腳手架工具vue-cli，命令如下：
npm install --global vue-cli
結(jié)果顯示：
3横朋、vue項(xiàng)目初始化命令如下仑乌，若沒(méi)有安裝webpack，則先安裝webpack
npm install -g webpack
vue init webpack myVue
注：安裝過(guò)程 中有個(gè)選項(xiàng)（Use ESLint to line your code ?選擇 No ）
初始化完成后的vue項(xiàng)目目錄如下：
4琴锭、進(jìn)入到myVue目錄下晰甚，使用npm install 安裝package.json包中的依賴
命令如下：
cd myVue
npm install
5、運(yùn)行項(xiàng)目：
npm run dev
在瀏覽器上輸入：localhost:8080决帖，將會(huì)出現(xiàn)下面的vue初始頁(yè)面：
6厕九、結(jié)束項(xiàng)目運(yùn)行：
ctrl+v，選擇Y即可停止項(xiàng)目的運(yùn)行
二地回、vue項(xiàng)目目錄說(shuō)明
- build：項(xiàng)目構(gòu)建(webpack)相關(guān)代碼
- config：配置目錄扁远，包括端口號(hào)等
- node_modules：npm加載的項(xiàng)目依賴塊
- src：這里是我們要開(kāi)發(fā)的目錄，基本上要做的事情都在這個(gè)目錄里刻像。里面包含了幾個(gè)目錄及文件：
- assets: 放置一些圖片畅买，如logo等
- components：該目錄里存放的我們的開(kāi)發(fā)文件組件，主要的開(kāi)發(fā)文件都存放在這里了
- App.vue：項(xiàng)目入口文件
- main.js：項(xiàng)目的核心文件
- router：路由配置目錄
- static：放置一些靜態(tài)資源文件
- test：初始測(cè)試目錄细睡，可刪除
- .xxxx文件：這些是一些配置文件谷羞，包括語(yǔ)法配置，git配置等
- index.html：首頁(yè)入口文件
- package.json：項(xiàng)目配置文件
- README.md：項(xiàng)目的說(shuō)明文檔纹冤，markdown 格式
三洒宝、vue項(xiàng)目啟動(dòng)流程
1购公、在執(zhí)行npm run dev的時(shí)候萌京，會(huì)去在當(dāng)前文件夾下的項(xiàng)目中找package.json文件,啟動(dòng)開(kāi)發(fā)服務(wù)器，默認(rèn)端口是8080宏浩；
2知残、找到src的main.js文件，在該文件中new Vue的實(shí)例比庄，要加載的模板內(nèi)容App求妹；
3、App是src目錄下的App.vue結(jié)尾的文件佳窑；
4制恍、在App.vue所對(duì)應(yīng)的模板當(dāng)中，有一個(gè)router-view在src目錄下有一個(gè)router文件夾神凑，該文件夾有個(gè)index.js文件净神，該文件是配置路由詞典何吝，指定了路由地址是空，加載HelloWorld組件
注：vue運(yùn)行是基于node環(huán)境的,構(gòu)建vue框架之前,需要確保node環(huán)境安裝成功
四鹃唯、Vue的組件的使用
1爱榕、在components文件夾下創(chuàng)建.vue結(jié)尾的文件
例如在：src/components/public/目錄下新建header.vue文件
header.vue文件內(nèi)容如下：
2、在路由配置文件src/router/index.js中引入組件并配置組件路由
2.1坡慌、引入組件
import Header from '@/components/public/header'
2.2黔酥、配置組件路由
{
path: '/header',
name: 'header',
component: Header
}
3、運(yùn)行項(xiàng)目：
npm run dev
4洪橘、在瀏覽器中輸入：localhost:8080/header ,顯示如下頁(yè)面：
附：vue生命周期示意圖
