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

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

創建專案

首先需要創建一個空目錄，在該目錄打開命令列，執行 npm init 命令創建一個專案，這個程序會提示輸入一些內容，完成后會自動生成一個 package.json 檔案

Webpack 的組態檔

project

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

webpack.config.js

'use strict'

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    alias: {
      'vue': '@vue/runtime-dom',
      'vuex': 'vuex/dist/vuex.esm-bundler',
      '@': path.join(__dirname, 'src')
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader'
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader'
        options: {
          name: 'images/[name].[ext]'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './index.html'
    }),
    new VueLoaderPlugin()
  ],
  devServer: {
    compress: true,
    port: 8080
  }
}

安裝依賴

npm install --save-dev css-loader file-loader html-webpack-plugin style-loader [email protected] @vue/compiler-sfc webpack webpack-cli webpack-dev-server

• VueLoaderPlugin 的匯入方式改變了
• [email protected] 當前需要自行指定版本
• vue-template-compiler 沒有了，新增了 @vue/compiler-sfc
• 其它都是 Webpack 基本配置

Vue

npm install --save [email protected] [email protected] [email protected]

當前均需要自行指定版本

根組件

project

  project-name
  |- package.json
  |- /src
+   |- app.vue

app.vue

<template>
  <ul>
    <li><router-link to="/">Home</router-link></li>
    <li><router-link to="/about">About</router-link></li>
  </ul>
  <router-view/>
</template>

• 組件根元素允許為多個

入口檔案

src/index.js

import { createApp } from 'vue'

import App from '@/app.vue'
import router from '@/router'
import store from '@/store'

createApp(app)
  .use(router)
  .use(store)
  .mount('#app')

不同于 Vue2.0 的整包匯入方式，Vue3.0 采用了按需匯入的方式，比如這里只匯入了 createApp 這個方法，這樣做的好處是可以支持 Webpack 的 treeshaking， 其它沒有用到的部分將不會出現在最終打包檔案中

Vue3.0 的回應式系統使用了 ES2015 的 Proxy （代理），其瀏覽器兼容性參考 CanIUse，該特性無法兼容舊瀏覽器

Router

project

  project-name
  |- package.json
  |- /src
+   |- /router
+     |- index.js

src/router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    component: require('@/views/index.vue').default
  },
  {
    path: '/about',
    component: require('@/views/about.vue').default
  },
  {
    path: '/:catchAll(.*)',
    component: require('@/views/404.vue').default
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

• 匯入方式也為按需匯入
• 原來的 mode 引數變為 history
• 除了 createWebHashHistory，還有 createWebHistory 和 createMemoryHistory
• 路由未匹配時使用 '/:catchAll(.*)'

在組件中使用 router

import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()

    // 也可以解構
    const { push, go, back } = useRouter()
  }
}

• router 就是原來實體的 $router，也有 beforeEach, afterEach 等等方法

在組件中使用 route

import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
  }
}

• route 是個回應式的代理物件，和原來實體的 $route 一樣，也有 query, params 等屬性
• 不建議將 route 解構，解構后的 query, params 并不是回應式的

Store

project

  project-name
  |- package.json
  |- /src
+   |- /store
+     |- index.js

該檔案創建并匯出一個 Vuex 實體

src/store/index.js

import { createStore } from 'vuex'

const store = createStore({
  state: {},
  getters: {},
  mutations: {},
  actions: {}
})

export default store

• 匯入方式也為按需匯入
• 其它照舊，沒有什么變化

在組件中使用 store

import { useStore } from 'vuex'

export default {
  setup() {
    const { state, getters, commit, dispatch } = useStore()

    return {
      state
    }
  }
}

state 是回應式的代理物件，不通過 commit 提交 mutations 而是直接修改 state 也是可以的，控制臺并沒有給出什么警告

NPM Scripts

在 package.json 檔案對應的 scripts 處新增命令

package.json

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

更多

• 在 Webpack 專案中配置支持 async/await

標籤：JavaScript

上一篇：React如何修改默認埠號

下一篇：談談小程式云開發的那些坑