本文相關(guān)引用來自Vue官網(wǎng) https://cn.vuejs.org/

作為一個(gè)Java后端程序員覺得有必要了解一下當(dāng)前流行的Vue框架（PS：公司目前后臺(tái)管理系統(tǒng)前端用的是老掉牙的easyui~囧），是時(shí)候更新?lián)Q代了。

學(xué)習(xí)目的：構(gòu)建前后端完全分離的單頁(yè)面應(yīng)用

一、什么是Vue.js

Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。

二、特性

*聲明式渲染

Vue.js 的核心是一個(gè)允許采用簡(jiǎn)潔的模板語(yǔ)法來聲明式地將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)：

<div id="app">
 {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Hello Vue!

這是一個(gè)簡(jiǎn)單的Vue應(yīng)用。Vue實(shí)現(xiàn)了數(shù)據(jù)和DOM的關(guān)聯(lián)，他們之間所有的東西都是響應(yīng)式的。如果我們?cè)跒g覽器控制臺(tái)修改message的值（app.message=Hi），頁(yè)面上的Hello Vue!也相應(yīng)的更新為“Hi”

*組件化構(gòu)建應(yīng)用

組件系統(tǒng)是 Vue 的另一個(gè)重要概念，因?yàn)樗且环N抽象，允許我們使用小型、獨(dú)立和通?？蓮?fù)用的組件構(gòu)建大型應(yīng)用。仔細(xì)想想，幾乎任意類型的應(yīng)用界面都可以抽象為一個(gè)組件樹:

頁(yè)面上存在的元素都可分解為一個(gè)一個(gè)組件

三、環(huán)境安裝

1.NPM安裝vue

在用 Vue 構(gòu)建大型應(yīng)用時(shí)推薦使用 NPM 安裝。NPM 能很好地和諸如 webpack 或 Browserify 模塊打包器配合使用。同時(shí) Vue 也提供配套工具來開發(fā)單文件組件。

# 最新穩(wěn)定版
$ npm install vue

如果未安裝nodejs則會(huì)報(bào)錯(cuò)需要先行安裝nodejs環(huán)境：

nodejs官網(wǎng)（https://nodejs.org/en/download/），選擇相應(yīng)的包開始安裝,安裝步驟如下：

安裝成功后進(jìn)入cmd，輸入

#輸入node -v  顯示node.js的版本號(hào)則說明安裝成功
node -v 
#輸入npm -v 顯示npm版本說明自帶的npm也已經(jīng)安裝成功，npm這里的作用是對(duì)Node.js依賴的包進(jìn)行管理（類似于Java項(xiàng)目的maven）
npm -v 

nodejs環(huán)境安裝成功

至此nodejs安裝成功。（注：以后在執(zhí)行類似：npm install express [-g] （后面的可選參數(shù)-g，g代表global全局安裝的意思）的安裝語(yǔ)句時(shí)，會(huì)將安裝的模塊安裝到【C:\Users\用戶名\AppData\Roaming\npm】路徑中 。npm目錄：下載的具體模塊文件 npm-cache目錄：npm的緩存文件）

由于國(guó)內(nèi)訪問速度較慢，建議將 NPM 源設(shè)置為國(guó)內(nèi)的鏡像，可以大幅提升安裝速度。

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

2.安裝webpack

cnpm install webpack -g

3.安裝vue腳手架

npm install vue-cli -g

在計(jì)算機(jī)創(chuàng)建一個(gè)工程目錄例如：d:\vueproject\，并進(jìn)入該目錄

cd d:\vue-project\

根據(jù)模版創(chuàng)建項(xiàng)目vue init webpack-simple 項(xiàng)目名

vue init webpack demo

創(chuàng)建成功

項(xiàng)目結(jié)構(gòu)如下:

4.安裝項(xiàng)目依賴

cd demo #進(jìn)入項(xiàng)目
npm install

5、安裝 vue 路由模塊vue-router和網(wǎng)絡(luò)請(qǐng)求模塊vue-resource

cnpm install vue-router vue-resource --save

6、安裝elementui

npm install element-ui --save

6、安裝axios

npm install axios

7、啟動(dòng)項(xiàng)目

npm run dev

訪問：localhost://8080,成功部署~

如果需要ip地址訪問需要更改config目錄下的index.js文件

將localhost修改為0.0.0.0
重啟應(yīng)用npm run dev

個(gè)人博客：http://www.yllknight.com/
微信公眾號(hào)：拾年映畫
微博：拾年丶映畫