vue-cli 構建 vue 項目詳解

時間 2019-12-07

標籤 vue cli 構建項目詳解简体版

原文原文鏈接

構建一個 vue 項目最簡單的方式就是使用腳手架工具 vue-cli 。前端的三大框架都有本身的腳手架工具，其做用就是用配置好的模板迅速搭建起一個項目工程來，省去本身配置 webpack 配置文件的基本內容，大大下降了初學者構建項目的難度。這節咱們看看如何使用 vue-cli 構建 vue 項目以及對構建項目的具體分析。javascript

1、環境搭建

node 和 npm 是必不可少的，這裏再也不介紹。php

一、安裝 vue-cli

$ npm install -g vue-cli

檢查是否安裝成功：css

$ vue --version
3.3.0

html

二、構建項目

$ vue init webpack hello-vue

初始化的過程當中，會有一個交互式的選項讓你選擇項目的一些配置，根據項目需求選擇便可。爲了方便後面幾篇教程的演示，能夠統一選擇如下選項：前端

? Project name hello-vue # 項目名稱
? Project description A Vue.js project # 項目描述
? Author Deepspace <cxin1427@gmail.com> # 做者
? Vue build standalone # 運行+編譯時
? Install vue-router? Yes # 安裝 vue-router
? Use ESLint to lint your code? Yes # 使用 ESLint 做爲代碼規範
? Pick an ESLint preset Airbnb # 選擇 Airbnb 的代碼規範
? 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

構建完成以後，會提示構建成功信息：vue

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

To get started:

  cd hello-vue
  npm run dev

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

三、啓動項目

$ cd hello-vue
$ npm run dev

項目默認會在 8080 端口啓動，若是端口有佔用，會自動調整端口。打開瀏覽器輸入：http://localhost:8080，會看到構建的項目的主頁：java

四、目錄結構

使用編輯器打開(推薦使用 VSCode)，下面具體看看目錄結構：node

package.json :webpack

{
    "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 中，根據咱們在構建項目的時候的選項，有如下幾個命令。git

npm run dev ：項目開發階段，項目啓動的命令；
npm run lint ：使用 eslint 檢查代碼格式；
npm run test：單元測試和 e2e 測試；
npm run e2e : e2e 測試；
npm run build：開發完成後執行，會把咱們的源代碼編譯成最終的發佈代碼，生成在項目根目錄中的 dist 文件夾下（初始化項目時不會生成）。

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

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

index.html : 是咱們的首頁。index 不少時候都被預設爲首頁，像 index.htm，index.php 等。

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

2、代碼分析

Vue 的核心架構分爲兩個部分：路由和組件，其實 React 也是同樣的。咱們在切入一個項目的時候，都是從這兩個點出發。下面咱們具體看看 src 文件夾。

一、入口文件

若是咱們打開項目根目錄下 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: '<App/>',
});

看看這裏面作了什麼事情：

引入 vue 並起名叫做 Vue
引入根目錄下的 App.vue 文件(後綴名可不要)
引入 router 文件下的 index.js 文件(文件夾後沒有具體的文件，默認引入的就是 index.js 文件)
經過 new 實例化 Vue 實例，實例化的時候聲明瞭幾個屬性：
- el：'#app'：意思是將全部視圖放在 id 值爲 app 這個 dom 元素中，也就是項目根目錄下的 index.html 中的那個 div : <div id="app"></div>；
- components: { App }：意思是將上面引入的 App.vue 文件的內容將以 <App/> 這樣的標籤寫進 <div id="app"></div> 中；

在開始的時候，咱們並無介紹說 Vue 使用的是虛擬 DOM ，那麼，從這裏咱們看出，Vue 使用的也是虛擬 DOM (和React是同樣的)。

這裏對 虛擬 DOM 做下簡單介紹：當咱們修改應用程序時，不會對 DOM 進行更改，而是建立以 JavaScript 數據結構形式存在的 DOM 副本，而後插到文檔當中。不管什麼時候進行任何更改，都將對 JavaScript 數據結構進行更改，並將後者與原始數據結構進行比較（ diff算法），而後將最終更改更新爲真實 DOM。咱們都知道 DOM 是很是重的，因此 虛擬 DOM 是很是省性能的。

二、App.vue

經過入口文件中作的事情，咱們其實已經知道 App.vue 的做用了：單頁面應用的主組件。全部頁面都是在 App.vue 下經過路由進行切換的。因此，咱們能夠理解爲全部的路由（route）也是 App.vue 的子組件。咱們看看代碼：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

這裏須要提一下： node 之因此能夠識別出 *·vue 格式的文件，是由於 webpack 在編譯時將 *.vue 文件中的 html 、 js 、 css 都抽出來造成新的單獨文件。可經過 npm run build 命令編譯源代碼，查看 dist 文件下的文件來驗證。

App.vue 的內容分爲三個部分：<template>...</template>、<script>...</script>、<style>...</style> ，分別在這三類標籤裏面寫入結構、腳本、樣式。

咱們先從 <template> 看起：裏面一個 div 包裹着 img 標籤和 router-view 標籤。前面提到過： App.vue 是單頁面應用的主組件。對照着前面在瀏覽器中打開的應用主頁面，img 標籤就是頁面上方的 Vue 的 logo。那下面的內容去哪了呢？和 <router-view/> 有關係嗎？這就要去看路由了。

三、router/index.js

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
    },
  ],
});

前面先引入了路由插件 vue-router，而後顯式聲明要用路由 Vue.use(Router) 。路由的配置很是地明瞭：給不一樣 path 分配不一樣的組件（或者頁面），參數 name 只是用來識別。

當我訪問根路由 http://localhost:8080/#/ 時，App.vue 中的 <router-view/> 就會把引入的 HelloWorld 組件分配給我，放在了 img 標籤的下面，打開 components 目錄下的 HelloWorld.vue 就能夠看到具體內容了。

咱們在看到瀏覽器中的 url 的時候會以爲奇怪，爲何在後面加了一個 # 號呢？這是由於 vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，當 URL 改變時，頁面不會從新加載。詳見： https://router.vuejs.org/zh/g... 。這裏可先跳過這點內容。

如今，咱們在瀏覽器訪問 http://localhost:8080/#/vue 這個地址，會發現只出現了 Vue 的 logo。這是由於咱們並無配置 /vue 這個路由，找不到路由，那<router-view/> 這個標籤就不會加載出來。

到這裏，咱們就知道路由是如何根據 url 來分配不一樣的組件了。配置多個路由就很簡單了：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/vue',
      name: 'vue',
      component: Vue
    }
  ]
})

那若是要訪問 http://localhost:8080/#/vue/demo 怎麼辦呢？

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
    },
    {
      path: '/about',
      name: 'about',
      component: About,
    },
    {
      path: '/vue',
      name: 'vue',
      component: Vue,
      children: [
        {
          path: '/demo',
          component: demo,
        },
        {
          path: '/project',
          component: project,
        },
      ],
    },
  ],
});

給路由加多一個子路由配置便可。