vue-cli構(gòu)建vue項(xiàng)目的步驟詳解

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

一、環(huán)境搭建

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

1、安裝 vue-cli

$ npm install -g vue-cli

檢查是否安裝成功：

$ vue --version
3.3.0

<!-- more -->

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 <cxin1427@gmail.com> # 作者
? 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 # 安裝單元測試
? 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)建完成之后，會(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)目的主頁：

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)建項(xiàng)目的時(shí)候的選項(xiàng)，有以下幾個(gè)命令。

• npm run dev ：項(xiàng)目開發(fā)階段，項(xiàng)目啟動(dòng)的命令；
• npm run lint ：使用 eslint 檢查代碼格式；
• npm run test：單元測試和 e2e 測試；
• npm run e2e : e2e 測試；
• npm run build：開發(fā)完成后執(zhí)行，會(huì)把我們的源代碼編譯成最終的發(fā)布代碼，生成在項(xiàng)目根目錄中的 dist 文件夾下（初始化項(xiàng)目時(shí)不會(huì)生成）。

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

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

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

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

二、代碼分析

Vue 的核心架構(gòu)分為兩個(gè)部分：路由和組件，其實(shí) React 也是一樣的。我們在切入一個(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: '<App/>',
});

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

• 引入 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 : <div id="app"></div>；
  • components: { App }：意思是將上面引入的 App.vue 文件的內(nèi)容將以 <App/> 這樣的標(biāo)簽寫進(jìn) <div id="app"></div> 中；

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

這里對虛擬 DOM 作下簡單介紹：當(dāng)我們修改應(yīng)用程序時(shí)，不會(huì)對 DOM 進(jìn)行更改，而是創(chuàng)建以 JavaScript 數(shù)據(jù)結(jié)構(gòu)形式存在的 DOM 副本，然后插到文檔當(dāng)中。無論何時(shí)進(jìn)行任何更改，都將對 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īng)用的主組件。所有頁面都是在 App.vue 下通過路由進(jìn)行切換的。所以，我們可以理解為所有的路由（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 格式的文件，是因?yàn)?webpack 在編譯時(shí)將 *.vue 文件中的 html 、js 、css 都抽出來形成新的單獨(dú)文件?？赏ㄟ^ npm run build 命令編譯源代碼，查看 dist 文件下的文件來驗(yàn)證。

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

我們先從 <template> 看起：里面一個(gè) div 包裹著 img 標(biāo)簽和 router-view 標(biāo)簽。前面提到過： App.vue 是單頁面應(yīng)用的主組件。對照著前面在瀏覽器中打開的應(yīng)用主頁面，img 標(biāo)簽就是頁面上方的 Vue 的 logo。那下面的內(nèi)容去哪了呢？和 <router-view/> 有關(guān)系嗎？這就要去看路由了。

3、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 分配不同的組件（或者頁面），參數(shù) name 只是用來識別。

當(dāng)我訪問根路由 http://localhost:8080/#/ 時(shí)，App.vue 中的 <router-view/> 就會(huì)把引入的 HelloWorld 組件分配給我，放在了 img 標(biāo)簽的下面，打開 components 目錄下的 HelloWorld.vue 就可以看到具體內(nèi)容了。

我們在看到瀏覽器中的 url 的時(shí)候會(huì)覺得奇怪，為什么在后面加了一個(gè) # 號呢？這是因?yàn)?vue-router 默認(rèn) hash 模式 —— 使用 URL 的 hash 來模擬一個(gè)完整的 URL，當(dāng) URL 改變時(shí)，頁面不會(huì)重新加載。詳見：https://router.vuejs.org/zh/guide/essentials/history-mode.html。這里可先跳過這點(diǎn)內(nèi)容。

現(xiàn)在，我們在瀏覽器訪問 http://localhost:8080/#/vue 這個(gè)地址，會(huì)發(fā)現(xiàn)只出現(xiàn)了 Vue 的 logo。這是因?yàn)槲覀儾]有配置 /vue 這個(gè)路由，找不到路由，那<router-view/> 這個(gè)標(biāo)簽就不會(huì)加載出來。

到這里，我們就知道路由是如何根據(jù) url 來分配不同的組件了。配置多個(gè)路由就很簡單了：

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,
    },
   ],
  },
 ],
});

給路由加多一個(gè)子路由配置即可。

4、assets

用來存放一些圖片、樣式等靜態(tài)文件。

三、總結(jié)

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。