從零搭建vue工程（vue-router，webpack）

阿新 • • 發佈：2019-02-04

vue 官方提供了快捷構建專案的腳手架工具（vue-cli），只需幾個命令就能輕鬆初始化一個 vue 的 webpack 專案。雖然能夠快速開發，但是如果想自己改些配置會有些困難，擔心一點改動專案就跑不起來了，也不知道每個引數的作用是啥，正所謂“自己動手豐衣足食”，拿來主義從來都是先甜後苦，因此還是覺得該自己一步一步配置出來一個。自己動手意味著你要去了解每個模組的作用以及模組之間如何組合，如何配置，過程可能痛苦，但是在後期碰到一些問題的時候，你會發現花費的時間比想象中的少了。

初始化

新建專案目錄 vue-practice，npm init初始化package.json

從目標分析，以下模組肯定少不了。
. vue

，用的 vue 版本是1.0.26
. vue-router，vue 路由外掛
. vue-loader，vue 元件（*.vue檔案）webpack 模組載入器
. webpack，模組載入器兼打包工具
. webpack-dev-server，輕量的 node.js express 伺服器，用於開發除錯用
將上面模組加到 package.json 中，檢視某個模組的版本號執行npm view 模組名 version。

"devDependencies": {
  "vue": "^1.0.26",
  "vue-loader": "^8.5.3",
  "vue-router" 
: "^0.7.13",
  "webpack": "^1.13.1",
  "webpack-dev-server": "^1.14.1"
}

新建目錄及檔案，結果如下：

vue-pratice
    |-- package.json
    |-- index.html         // 啟動頁面
    |-- webpack.config.js  // webpack配置檔案
    |-- src
        |-- components  // vue元件目錄
        |-- views       // vue頁面
        |-- main.js     // 入口檔案 

        |-- router.js   // vue-router配置
        |-- app.vue     // 專案首頁元件

配置webpack

webpack 預設讀取 webpack.config.js，檔名不能隨便改，其中 entry 是必須配置的。

module.exports = {
    entry: './src/main.js'
}

配置 webpack-dev-server，在 package.json 新增以下啟動引數即可。

"scripts": {
  "dev": "webpack-dev-server --inline --hot"
}

這裡可以測試 server 能否正常啟動，執行npm install，然後npm run dev、訪問 http://localhost:8080/，能訪問（可以在index.html新增內容來確認是否啟動成功），就說明上面的配置ok。

Vue

上面完成了開發環境的配置，離小目標還甚遠，主角都還未登場，下面通過一個例子來說明如何利用vue及其外掛。
在 src/views 目錄下新建一個 about.vue，相當於新建一個“頁面”，後面訪問 /about 的就是此頁面的內容；

<template>
    <div>
        這是{{page}}頁面
    </div>
</template>
<script>
    module.exports = {
        data: function () {
            return {
                page: 'about'
            }
        }
    }
</script>

vue-router 呼叫 router.map({}) 來配置路由資訊（2.x已經不再使用這種方式），將 map 呼叫單獨提取到 router.js，形成一個路由配置檔案，方便配置，外部直接呼叫require('./router')(router)即可。map的引數查閱[email protected]官方文件。

module.exports = function (router) {
    router.map({
        '/about': {
            name: 'about',
            component: require('./views/about.vue')
        }
    })
}

router-view 相當於傳統佈局下 iframe，路由的頁面在 iframe 里加載。vue當然不是這般工作，我們所說的頁面其實也是一個 vue 元件，router-view 就是每個頁面元件的容器。router-view 官方解釋為“用於渲染匹配的元件，它基於 Vue 的動態元件系統，所以它繼承了一個正常動態元件的很多特性。”

<template>
    <div>
        <a v-link="{ path: '/about' }">About</a>
        <router-view></router-view>
    </div>
</template>

vue 外掛需要呼叫 vue.use，app.vue 也需要掛在到 html 節點中，路由要載入配置並啟動，這些工作都在 entry 對應的 js（main.js）中來完成。

var Vue = require('vue');
var VueRouter = require('vue-router');
var App = require('./app.vue');
Vue.use(VueRouter);
var router = new VueRouter();
require('./router')(router);
router.start(App, '#app');

首頁只需引入打包後的 js 檔案即可，這也是和傳統頁面區別最大的地方，div#app 是整個網站的掛載點。script 的路徑要和 webpack.config.js的 output 配置一致。

<body>
<div id="app"></div>
<script src="dist/build.js"></script>
</body>

上面添加了 vue 檔案，那麼如果將 vue 檔案解析成普通的程式碼，這個就需要在 webpack.config.js中配置 vue-loader。

var path = require('path')
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
    module: {
        loaders: [
            {
                test: /\.vue$/, loader: 'vue'
            }
        ]
    }
}

到這裡，似乎小目標實現的差不多了，心裡甚是激動，滿心期待著執行npm run dev，結果最壞的打算還是發生了。
這裡寫圖片描述
其實我們在安裝vue-loader的時候就會發現其報了很多警告，主要是 vue-loader 依賴一些模組，這些也是必須要安裝的，需要把這些模組補上並安裝（npm install）。

"vue-hot-reload-api": "^1.3.3",
"vue-html-loader": "^1.2.3",
"babel-core": "^6.13.2",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.12.0",
"babel-preset-es2015": "^6.13.2"

增加 babel-loader，相應要配置 js 檔案的 babel-loader，這就是為什麼 package.json 中有這個配置，後面的引數是為了將 es6 轉化為 es5，畢竟現在大部分瀏覽器還不支援 es6 語法。
babel-loader的配置如下：

{
    test: /\.js$/,
    loader: 'babel-loader?presets[]=es2015&plugins[]=transform-runtime&comments=false',
    exclude: /node_modules/
}

這時候再執行npm run dev就不會報錯了，然後在瀏覽器中可以看到如下效果（按上面的步驟再增加 home.vue 並配置路由資訊）
這裡寫圖片描述

增加 css 樣式

vue 檔案一般是由

{
    "vue-style-loader":"^1.0.0",
    "css-loader":"^0.25.0"
}

安裝了這兩個 loader 之後，再啟動發現就不報錯了，而且在中新增的樣式也生效了。
如果想引用 CSS 檔案怎麼弄，雖然現在已經可以在 vue 檔案中新增樣式，但是引入外部 CSS 檔案的方式更通用。

開發元件

每個 vue 檔案就是一個元件，views 下面的 vue 檔案只是我們把它叫做“頁面”，它其實是由其他的 vue 元件組合而成。舉一個例子來說明如何封裝元件。
menu.vue（將系統的選單封裝為一個元件）

<template>
    <div class="menu">
      <a v-link="{ path: '/home' }">Home</a>
      <a v-link="{ path: '/about' }">About</a>
    </div>
</template>

在其他vue檔案中使用公共元件的方法如下：
這裡寫圖片描述

後續

走到這裡，一個 vue 的 webpack 工程已近搭建的好了，可以進行實際開發了，封裝元件，增加 view，配置 router。後面要做的事還很多，比如打包釋出、效能優化、vuex 等等，這些後續會在此專案基礎上不斷豐富，一步一步探索出最佳實踐方案。

從零搭建vue工程（vue-router，webpack）

初始化

配置webpack

Vue

增加 css 樣式

開發元件

後續

從零搭建SpringCloud服務（史上最詳細）

從零搭建vue工程（vue-router，webpack）

從零搭建SSM框架（五）使用Maven實現Tomcat熱部署

webpack4+react+antd從零搭建React腳手架（二）

從零搭建Hadoop叢集（一）——離線安裝YUM源搭建

SpringMVC乾貨系列：從零搭建SpringMVC+mybatis（二）：springMVC原理解析及常用註解

使用虛擬機器VM從零搭建Linux server（Jdk1.6+tomcat7+MySQL5.5）

tiny4412學習(一)之從零搭建linux系統（燒寫uboot、核心進emmc+uboot啟動核心）

從零配置雲伺服器（Java web執行環境）（二、配置JAVA開發環境）

搭建SpringBoot工程（Maven多模組版）

Vue+webpack從零搭建工程專案

Vue+webpack從零搭建工程項目

vue從零搭建一

從零開始學 Web 之 Vue.js（三）Vue實例的生命周期

從零開始學 Web 之 Vue.js（四）Vue的Ajax請求和跨域

從零開始學 Web 之 Vue.js（五）Vue的動畫

從零開始學 Web 之 Vue.js（六）Vue的元件

基於Idea從零搭建一個最簡單的vue專案

從零開始學 Web 之 Vue.js（二）過濾器，按鍵修飾符，自定義指令

從零開始學 Web 之 Vue.js（一）Vue.js概述，基本結構，指令，事件修飾符，樣式

從零搭建vue工程（vue-router，webpack）

初始化

配置webpack

Vue

增加 css 樣式

開發元件

後續

相關推薦