從零開始使用 Webpack 搭建 Vue 開發環境

来源:https://www.cnblogs.com/xyzhanjiang/archive/2019/09/26/11590778.html
-Advertisement-
Play Games

創建項目 先創建一個空目錄，在該目錄打開命令行，執行 命令創建一個項目（無法執行 npm 命令？需要先安裝 "Node" ），這個過程會提示輸入一些內容，隨意輸入就行，完成後會自動生成一個 package.json 文件，裡面包含剛纔輸入的內容 創建一個 index.html 頁面，由於使用的是 V ...


創建項目

先創建一個空目錄，在該目錄打開命令行，執行 npm init 命令創建一個項目（無法執行 npm 命令？需要先安裝 Node），這個過程會提示輸入一些內容，隨意輸入就行，完成後會自動生成一個 package.json 文件，裡面包含剛纔輸入的內容

創建一個 index.html 頁面，由於使用的是 Vue 開發單頁應用，所以通常一個 html 文件就夠了，內容也很簡單，就一個 div#app

project

  project-name
+ |- index.html
  |- package.json

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>這是標題</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

project

  project-name
  |- index.html
+ |- index.js
  |- package.json
+ |- webpack.config.js

創建一個 index.js 作為項目的主入口，創建一個 webpack.config.js 文件作為 Webpack 的配置文件，內容如下

webpack.config.js

'use strict'

const path = require('path')

module.exports = {
  mode: 'development',
  entry: './index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist')
  }
}

執行 npm install --save-dev webpack-cli 安裝 Webpack

在 package.json 文件對應的 scripts 處寫入命令

package.json

  {
    "scripts": {
+     "build": "webpack"
    }
  }

執行 npm run build 即可完成打包，打包成功後的文件放在 dist 目錄裡面（這是由配置文件自定義的），目前打包出來的只有一個 index.js 文件

啟動本地服務

使用 webpack-dev-server 來啟動本地服務，方便開發以及本地調試

執行 npm install --save-dev webpack webpack-dev-server

在 package.json 文件對應的 scripts 處寫入命令

package.json

  {
    "scripts": {
+     "dev": "webpack-dev-server",
      "build": "webpack"
    }
  }

執行 npm run dev 即可啟動本地服務，訪問 localhost:8080 即可，8080 是預設的埠號，修改埠號配置如下

webpack.config.js

module.exports = {
  // ...
  devServer: {
    compress: true,
    port: 8080
  }
}

生成 HTML 文件

使用 html-webpack-plugin 來生成 HTML 文件

執行 npm install --save-dev html-webpack-plugin

在 webpack.config.js 配置文件中添加

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './index.html'
    })
  ]
}

安裝 Vue

執行 npm install --save-dev vue-loader vue-template-compiler

執行 npm install --save vue vue-router

在 webpack.config.js 中配置 vue-loader 用於引入 .vue 類型文件

webpack.config.js

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

新建一個 app.vue 文件作為路由組件的容器

project

  project-name
+ |- app.vue
  |- index.html
  |- index.js
  |- package.json
  |- webpack.config.js

app.vue

<template>
<router-view></router-view>
</template>

<script>
export default {}
</script>

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

import appView from 'app.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: require('./index.vue').default
    }
  ]
})

new Vue({
  el: '#app',
  router,
  render(h) { return h(appView) }
})

新建一個 index.vue 文件作為首頁

project

  project-name
  |- app.vue
  |- index.html
  |- index.js
  |- package.json
+ |- index.vue
  |- webpack.config.js

index.vue

<template>
<div>
  <h1>這是首頁</h1>
</div>
</template>

<script>
export default {}
</script>

添加頁面

添加一個 about.vue 文件作為關於頁

project

  project-name
+ |- about.vue
  |- app.vue
  |- index.html
  |- index.js
  |- package.json
  |- index.vue
  |- webpack.config.js

about.vue

<template>
<div>
  <h1>這是關於頁</h1>
</div>
</template>

<script>
export default {}
</script>

配置關於頁的路由

index.js

// ...

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: require('./index.vue').default
    },
    {
      path: '/about',
      component: require('./about.vue').default
    },
  ]
})

訪問 http://localhost:8080/#/about 即可顯示關於頁

文件分類

隨著頁面的增加，vue 文件將會越來越多，放在項目根目錄下麵並不科學，在當前目錄創建一個 src 目錄用來放置開發源文件

在 src 目錄中創建一個 pages 目錄用來放置 vue 頁面文件，將 app.vue、index.vue、about.vue 文件移入 pages 目錄中，同時修改對應的引用路徑

project

  project-name
- |- about.vue
- |- app.vue
  |- index.html
  |- index.js
  |- package.json
- |- index.vue
  |- webpack.config.js
+ |- /src
+   |- /pages
+     |- about.vue
+     |- app.vue
+     |- index.vue

index.js

// ...

import appView from './src/pages/app.vue'

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: require('./src/pages/index.vue').default
    },
    {
      path: '/about',
      component: require('./src/pages/about.vue').default
    },
  ]
})

像 ./src/pages/index.vue 這種長路徑寫起比較麻煩，在 webpack.config.js 中配置一個 alias 參數

webpack.config.js

module.exports = {
  // ...
  resolve: {
    alias: {
      '@': path.join(__dirname, 'src')
    }
  }
}

上面的頁面路徑可以再次改寫

index.js

// ...

import appView from '@/pages/app.vue'

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: require('@/pages/index.vue').default
    },
    {
      path: '/about',
      component: require('@/pages/about.vue').default
    },
  ]
})

同時，將路由配置單獨提取出來，新建一個 routes.js 文件放在 src/js 目錄中（js 目錄需要新建）

project

  project-name
  |- index.html
  |- index.js
  |- package.json
  |- webpack.config.js
  |- /src
+   |- /js
+     |- routes.js
    |- /pages
      |- about.vue
      |- app.vue
      |- index.vue

routes.js

module.exports = [
  {
    path: '/',
    component: require('@/pages/index.vue').default
  },
  {
    path: '/about',
    component: require('@/pages/about.vue').default
  },
]

index.js

// ...

import routes from '@/js/routes'

const router = new VueRouter({
  routes
})

配置 Babel

由於前面的代碼使用了 ES2015 的語法，為了使項目相容更多瀏覽器，需要用 Babel 對代碼進行轉換

執行 npm install --save-dev @babel/core @babel/preset-env babel-loader

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]
      }
    ]
  }
}

創建一個 .babelrc 文件（不知道怎麼創建？可以直接從該項目中複製）

project

  project-name
+ |- .babelrc
  |- index.html
  |- index.js
  |- package.json
  |- webpack.config.js
  ...

.babelrc

{
  "presets": ["@babel/preset-env"]
}

CSS

項目中肯定會用到 CSS，首先新建一個 style.css 樣式文件，項目中的樣式就可以寫在這裡面

project

  project-name
  |- .babelrc
  |- index.html
  |- index.js
  |- package.json
+ |- style.css
  |- webpack.config.js
  ...

然後安裝 Normalize.css 用於使各種瀏覽器呈現一致的效果，這隻是一種樣式初始化方案，是可選的，另外也可以選擇 Bootstrap 或者 Bulma 等包含更多樣式的樣式庫來作為開發的基礎

執行 npm install --save normalize.css

直接在 index.js 裡面引用

index.js

import 'normalize.css'
import './style.css'
// ...

由於這裡直接在 js 文件中引用了 css 文件，所以需要 css-loader 來處理

執行 npm install --save-dev css-loader style-loader

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          }
        ]
      }
    ]
  }
}

另外也可以在 vue 文件裡面寫 CSS

index.vue

<template>
<div>
  <h1>這是首頁</h1>
</div>
</template>

<script>
export default {}
</script>

<style>
h1 {
  text-align: center;
}
</style>

兩種寫樣式的方式可以根據具體需求選擇使用

提取樣式文件

上面引入 css 的方式最終打包之後 CSS 代碼都在 js 裡面，為了網站的性能需要將 CSS 單獨提取出來，使用 mini-css-extract-plugin 插件來提取 CSS

執行 npm install --save-dev mini-css-extract-plugin

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader // 代替 style-loader
          },
          {
            loader: 'css-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: `[name].css`
    })
  ]
}

處理圖片

項目中如果有用到圖片需要 file-loader 來處理

執行 npm install --save-dev file-loader

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader'
      }
    ]
  }
}

準備一張圖片 logo.gif 放在 src/images 目錄中（images 目錄需要新建，這張圖片是用來測試的）

project

  project-name
  |- .babelrc
  |- index.html
  |- index.js
  |- package.json
  |- style.css
  |- webpack.config.js
  |- /src
+   |- /images
+     |- logo.gif
    |- /js
      |- routes.js
    |- /pages
      |- about.vue
      |- app.vue
      |- index.vue

index.vue

<template>
<div>
  <h1>這是首頁</h1>
  <img src="@/images/logo.gif">
</div>
</template>

<script>
export default {}
</script>

<style>
h1 {
  text-align: center;
}
</style>

執行 npm run build 打包後發現圖片已經成功打包進來了，但是圖片的名稱改變了，如果不希望改變圖片名稱，可以給 file-loader 配置參數

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          name: 'images/[name].[ext]'
        }
      }
    ]
  }
}

壓縮 CSS

使用 cssnano 壓縮 CSS，該插件屬於 PostCSS 生態系統，所以需要同時安裝 postcss-loader

執行 npm install --save-dev cssnano postcss-loader

創建一個 postcss.config.js 文件，這是 PostCSS 的配置文件，相關配置都寫在這裡面

project

  project-name
  |- .babelrc
  |- index.html
  |- index.js
  |- package.json
+ |- postcss.config.js
  |- style.css
  |- webpack.config.js
  ...

postcss.config.js

module.exports = {
  plugins: {
    'cssnano': {
      safe: true
    }
  }
}

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader'
          }
        ]
      }
    ]
  }
}

CSS 預處理

這裡使用 postcss-preset-env 來預處理 CSS（也可以選擇使用 Sass 或者 Less 等）

執行 npm install --save-dev postcss-preset-env

該插件也屬於 PostCSS 生態系統，直接在 postcss.config.js 里增加配置即可

postcss.config.js

  module.exports = {
    plugins: {
+     'postcss-preset-env': {},
      'cssnano': {
+       autoprefixer: false, // 這裡兩個插件都包含了 autoprefixer，只執行其中一個就行
        safe: true
      }
    }
  }

HTTP 請求

使用 Axios 發送 HTTP 請求，Axios 基於 Promise，所以同時安裝 es6-promise polyfill

執行 npm install --save axios es6-promise

index.js

+ import 'es6-promise/auto'
+ import axios from 'axios'

  // ...

在項目中發送一個請求

index.js

  import 'es6-promise/auto'
  import axios from 'axios'

+ axios.post('/login')

  // ...

運行後這個請求明顯會返回一個 404，那麼如何讓它返回有效的數據呢，在 webpack.config.js 里配置 devServer 參數

webpack.config.js

  module.exports = {
    // ...
    devServer: {
+     before(app, server) {
+       app.post('/login', (req, res) => {
+         res.json({success: true})
+       })
+     },
      compress: true,
      port: 8080
    }
  }

重新啟動後，就可以看到請求 /login 地址返回了數據 {"success": true}，這樣就可以在本地調試介面了

當然，所有介面都這樣寫未免麻煩，可以用 proxy 參數將請求介面代理到其它地址去

webpack.config.js

  module.exports = {
    // ...
    devServer: {
      before(app, server) {
        app.post('/login', (req, res) => {
          res.json({success: true})
        })
      },
+     proxy: {
+       '/api': {
+         target: 'http://localhost:3000'
+       }
+     },
      compress: true,
      port: 8080
    }
  }

這時，例如請求 /api/posts 實際上會被代理到 http://localhost:3000/api/posts

打包

配置 mode 參數

webpack.config.js

module.exports = {
  mode: 'production'
  // ...
}

production 和 development 兩種 mode 參數很明顯，production 用於發佈，development 用於開發，具體有什麼區別，看這裡 Click here

執行 npm run build 即可打包，打包後生成的文件都在 dist 目錄中

更多


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 《垃圾分類小助手-生活的好幫手-技術支持》
    垃圾分類小助手-生活的好幫手的技術支持，如果您使用中出現什麼問題或者對我們產品有什麼改進建議，請隨時與我聯繫。 電話：15990075212 郵箱：[email protected] 應用簡介 垃圾分類小助手-生活的好幫手能夠快速搜索垃圾分類，高效率識別垃圾分類，輕鬆解決垃圾分類難題 ...
  • XPath匹配標簽使用text()判斷獲取結果失敗/為空的問題及解決方法
    XPath匹配標簽使用text()判斷獲取結果失敗/為空的問題及解決方法 ...
  • html常見的塊元素與內聯（行內）元素用法說明（一）
    html平時常見的塊元素有：div, p, h1, h2, h3等，內聯元素有：span, a, img等。 塊元素的屬性：無論內容是什麼，都會獨占一整行。主要用於頁面佈局。 內聯元素的屬性：只占自身大小的元素，不會占用一行。主要用於選中文本設置樣式。 div塊元素僅僅只用於進行頁面佈局，它自身不帶 ...
  • js報錯 Cannot read property 'getAttribute' of null
    頁面echarts.js報錯：Uncaught TypeError: Cannot read property 'getAttribute' of null ...
  • 微信小程式 wxParse插件顯示視頻
    修改wxParse/html2json.js 文件 ，在 html2json(html, bindName) 方法里 這裡使用 node.tag 能夠獲取標簽類型，比如： img、embed、video 這裡我的系統後臺編輯器使用的是ckeditor 上傳視頻。生成的便簽是：embed 所以加上判斷 ...
  • vue學習指南：第七篇(詳細) - Vue的 組件通信
    Vue 的 父傳子 子傳父 一、父組件向子組件傳值: 父傳子 把需要的數據 傳遞給 子組件，以數據綁定(v-bind)的形式，傳遞到子組件內部，供子組件使用 縮寫是（:） 1.創建子組件，在src/components/文件夾下新建一個Child.vue 子組件 2.Child.vue的中創建pro ...
  • 前端校招知識體系之HTML5
    啥是HTML5？官方說HTML5 是下一代的 HTML... 本文主要介紹HTML5三個方面的知識，繼續往下看看吧。 語義化標簽 canvas&svg 響應式meta 一、語義化標簽 語義化標簽的優點： 比<div>標簽有更加豐富的含義，方便開發與維護 方便搜索引擎能識別頁面結構，有利於SEO 方便 ...
  • js驗證小數或者數字
    利用正則表達式匹配是否為數字，直接上demo ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類