摘要：打開瀏覽器輸入，會(huì)看到構(gòu)建的項(xiàng)目的主頁(yè)目錄結(jié)構(gòu)使用編輯器打開推薦使用，下面具體看看目錄結(jié)構(gòu)在中，根據(jù)我們?cè)跇?gòu)建項(xiàng)目的時(shí)候的選項(xiàng)，有以下幾個(gè)命令。

構(gòu)建一個(gè) vue 項(xiàng)目最簡(jiǎn)單的方式就是使用腳手架工具 vue-cli 。前端的三大框架都有自己的腳手架工具，其作用就是用配置好的模板迅速搭建起一個(gè)項(xiàng)目工程來(lái)，省去自己配置 webpack 配置文件的基本內(nèi)容，大大降低了初學(xué)者構(gòu)建項(xiàng)目的難度。這節(jié)我們看看如何使用 vue-cli 構(gòu)建 vue 項(xiàng)目以及對(duì)構(gòu)建項(xiàng)目的具體分析。

一、環(huán)境搭建

node 和 npm 是必不可少的，這里不再介紹。

1、安裝 vue-cli

$ npm install -g vue-cli

檢查是否安裝成功：

$ vue --version
3.3.0

2、構(gòu)建項(xiàng)目

$ vue init webpack hello-vue

初始化的過程中，會(huì)有一個(gè)交互式的選項(xiàng)讓你選擇項(xiàng)目的一些配置，根據(jù)項(xiàng)目需求選擇即可。為了方便后面幾篇教程的演示，可以統(tǒng)一選擇以下選項(xiàng)：

? Project name hello-vue # 項(xiàng)目名稱
? Project description A Vue.js project # 項(xiàng)目描述
? Author Deepspace  # 作者
? Vue build standalone # 運(yùn)行+編譯時(shí)
? Install vue-router? Yes # 安裝 vue-router
? Use ESLint to lint your code? Yes # 使用 ESLint 作為代碼規(guī)范
? Pick an ESLint preset Airbnb # 選擇 Airbnb 的代碼規(guī)范
? Set up unit tests Yes # 安裝單元測(cè)試
? Pick a test runner karma # 測(cè)試模塊
? Setup e2e tests with Nightwatch? Yes # 安裝 e2e 測(cè)試
? Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器，npm

構(gòu)建完成之后，會(huì)提示構(gòu)建成功信息：

# Project initialization finished!
# ========================

To get started:

  cd hello-vue
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

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

$ cd hello-vue
$ npm run dev

項(xiàng)目默認(rèn)會(huì)在 8080 端口啟動(dòng)，如果端口有占用，會(huì)自動(dòng)調(diào)整端口。打開瀏覽器輸入：http://localhost:8080，會(huì)看到構(gòu)建的項(xiàng)目的主頁(yè)：

4、目錄結(jié)構(gòu)

使用編輯器打開(推薦使用 VSCode)，下面具體看看目錄結(jié)構(gòu)：

package.json :

{
    "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
        "e2e": "node test/e2e/runner.js",
        "test": "npm run unit && npm run e2e",
        "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
        "build": "node build/build.js"
    }
}

在 package.json 中，根據(jù)我們?cè)跇?gòu)建項(xiàng)目的時(shí)候的選項(xiàng)，有以下幾個(gè)命令。

npm run dev ：項(xiàng)目開發(fā)階段，項(xiàng)目啟動(dòng)的命令；

npm run lint ：使用 eslint 檢查代碼格式；

npm run test：?jiǎn)卧獪y(cè)試和 e2e 測(cè)試；

npm run e2e : e2e 測(cè)試；

npm run build：開發(fā)完成后執(zhí)行，會(huì)把我們的源代碼編譯成最終的發(fā)布代碼，生成在項(xiàng)目根目錄中的 dist 文件夾下（初始化項(xiàng)目時(shí)不會(huì)生成）。

config： 保存一些項(xiàng)目初始化配置。

build ：里面保存一些 webpack 的初始化配置。

index.html : 是我們的首頁(yè)。index 很多時(shí)候都被預(yù)設(shè)為首頁(yè)，像 index.htm，index.php 等。

src : 保存項(xiàng)目源代碼的地方，我們下面會(huì)詳細(xì)分析該文件夾里的文件。

二、代碼分析

Vue 的核心架構(gòu)分為兩個(gè)部分：路由和組件，其實(shí) React 也是一樣的。我們?cè)谇腥胍粋€(gè)項(xiàng)目的時(shí)候，都是從這兩個(gè)點(diǎn)出發(fā)。下面我們具體看看 src 文件夾。

1、入口文件

如果我們打開項(xiàng)目根目錄下 build 目錄中的 webpack.base.conf.js，會(huì)看到這樣的代碼(第22行)：

module.exports = {
  context: path.resolve(__dirname, "../"),
  entry: {
    app: "./src/main.js"
  },
  // ...
}    

說明我們的入口文件就是 src 目錄下的 main.js 文件?？纯创a：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue";
import App from "./App";
import router from "./router";

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  components: { App },
  template: "",
});

看看這里面做了什么事情：

引入 vue 并起名叫作 Vue

引入 根目錄下的 App.vue 文件(后綴名可不要)

引入 router 文件下的 index.js 文件(文件夾后沒有具體的文件，默認(rèn)引入的就是 index.js 文件)

通過 new 實(shí)例化 Vue 實(shí)例 ，實(shí)例化的時(shí)候聲明了幾個(gè)屬性：

el："#app"：意思是將所有視圖放在 id 值為 app 這個(gè) dom 元素中，也就是項(xiàng)目根目錄下的 index.html 中的那個(gè) div :

；

components: { App }：意思是將上面引入的 App.vue 文件的內(nèi)容將以 這樣的標(biāo)簽寫進(jìn)

中；

在開始的時(shí)候，我們并沒有介紹說 Vue 使用的是虛擬 DOM ，那么，從這里我們看出，Vue 使用的也是虛擬 DOM (和React是一樣的)。

這里對(duì)虛擬 DOM 作下簡(jiǎn)單介紹：當(dāng)我們修改應(yīng)用程序時(shí)，不會(huì)對(duì)  DOM 進(jìn)行更改，而是創(chuàng)建以 JavaScript 數(shù)據(jù)結(jié)構(gòu)形式存在的 DOM 副本，然后插到文檔當(dāng)中。無(wú)論何時(shí)進(jìn)行任何更改，都將對(duì) JavaScript 數(shù)據(jù)結(jié)構(gòu)進(jìn)行更改，并將后者與原始數(shù)據(jù)結(jié)構(gòu)進(jìn)行比較（diff算法），然后將最終更改更新為真實(shí) DOM。我們都知道 DOM 是非常重的，所以虛擬 DOM 是非常省性能的。

2、App.vue

通過入口文件中做的事情，我們其實(shí)已經(jīng)知道 App.vue 的作用了：單頁(yè)面應(yīng)用的主組件。所有頁(yè)面都是在 App.vue 下通過路由進(jìn)行切換的。所以，我們可以理解為所有的路由（route）也是 App.vue 的子組件。我們看看代碼：

這里需要提一下：node 之所以可以識(shí)別出 *·vue 格式的文件，是因?yàn)?webpack 在編譯時(shí)將 *.vue 文件中的 html 、js 、css 都抽出來(lái)形成新的多帶帶文件?？赏ㄟ^ npm run build 命令編譯源代碼，查看 dist 文件下的文件來(lái)驗(yàn)證。

App.vue 的內(nèi)容分為三個(gè)部分：、、 ，分別在這三類標(biāo)簽里面寫入結(jié)構(gòu)、腳本、樣式。

我們先從