1.Vue前端框架概述
Vue是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式JavaScript框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)或既有項(xiàng)目整合。
Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
Vue.js 自身不是一個(gè)全能框架——它只聚焦于視圖層。因此它非常容易學(xué)習(xí)，非常容易與其它庫(kù)或已有項(xiàng)目整合。另一方面，在與相關(guān)工具和支持庫(kù)一起使用時(shí)，Vue.js 也能完美地驅(qū)動(dòng)復(fù)雜的單頁(yè)應(yīng)用。
2.新建Vue項(xiàng)目的步驟
1.下載Vue.js
Vue的官方網(wǎng)址：Vue
Vue官方網(wǎng)址的中文版：Vue中文版
訪(fǎng)問(wèn)Vue.js下載這個(gè)網(wǎng)址可選擇開(kāi)發(fā)版本和生產(chǎn)版本
2.新建項(xiàng)目文件夾
新建項(xiàng)目文件夾為Demo01，在Demo01下新建如下文件夾和文件：
創(chuàng)建好之后把在Vue官網(wǎng)下載的Vue.js拖到項(xiàng)目的assets文件夾下的js文件夾中。反正文件也不大就全部下載拖進(jìn)去就完事了。example文件夾下寫(xiě)主要的頁(yè)面代碼。index.html作為項(xiàng)目的入口文件。
index.html頁(yè)面的示例代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js實(shí)例</title>
</head>
<body>
<h1>Vue2.0實(shí)例</h1>
<hr>
<ol>
<li><a href="#">Hello World 實(shí)例</a></li>
</ol>
</body>
</html>
3.live-server的使用
live-server是用于靜態(tài)網(wǎng)頁(yè)的開(kāi)發(fā)和瀏覽的工具。live-server有最主要的三個(gè)功能：修改文件瀏覽器自動(dòng)刷新；瀏覽器自動(dòng)打開(kāi)項(xiàng)目(默認(rèn)打開(kāi)的就是index.html)；本地開(kāi)發(fā)搭建臨時(shí)的服務(wù)。
在VScode中調(diào)出終端，輸入命令：npm install -g live-server，接著輸入live-server如果可以在瀏覽器看到index.html頁(yè)面說(shuō)明live-server安裝成功。到此為止，準(zhǔn)備工作基本完成。
4.初始化項(xiàng)目
在命令行輸入npm init在項(xiàng)目中生成package.json文件用來(lái)配置一些項(xiàng)目的初始化信息及參數(shù)。
