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

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

一、環(huán)境搭建

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

1、安裝 vue-cli

$ npm install -g vue-cli

檢查是否安裝成功：

$ vue --version
3.3.0

2、構(gòu)建項目

$ vue init webpack hello-vue

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

? Project name hello-vue # 項目名稱
? Project description A Vue.js project # 項目描述
? Author Deepspace  # 作者
? Vue build standalone # 運行+編譯時
? 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 # 安裝單元測試
? Pick a test runner karma # 測試模塊
? Setup e2e tests with Nightwatch? Yes # 安裝 e2e 測試
? Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器，npm

構(gòu)建完成之后，會提示構(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、啟動項目

$ cd hello-vue
$ npm run dev

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

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ù)我們在構(gòu)建項目的時候的選項，有以下幾個命令。

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

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

npm run test：單元測試和 e2e 測試；

npm run e2e : e2e 測試；

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

config： 保存一些項目初始化配置。

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

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

src : 保存項目源代碼的地方，我們下面會詳細分析該文件夾里的文件。

二、代碼分析

Vue 的核心架構(gòu)分為兩個部分：路由和組件，其實 React 也是一樣的。我們在切入一個項目的時候，都是從這兩個點出發(fā)。下面我們具體看看 src 文件夾。

1、入口文件

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

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

說明我們的入口文件就是 src 目錄下的 main.js 文件。看看代碼：

// 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 文件(文件夾后沒有具體的文件，默認引入的就是 index.js 文件)

通過 new 實例化 Vue 實例 ，實例化的時候聲明了幾個屬性：

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

；

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

中；

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

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

2、App.vue

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

這里需要提一下：node 之所以可以識別出 *·vue 格式的文件，是因為 webpack 在編譯時將 *.vue 文件中的 html 、js 、css 都抽出來形成新的多帶帶文件。可通過 npm run build 命令編譯源代碼，查看 dist 文件下的文件來驗證。

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

我們先從