從零開始使用 Webpack 搭建 Vue3 開發環境
前情提要
創建項目
首先需要創建一個空目錄，在該目錄打開命令行，執行 npm init -y 命令創建一個項目，完成后會自動生成一個 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'),
assetModuleFilename: 'images/[name][ext]'
},
resolve: {
alias: {
'@': 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,
type: 'asset/resource'
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './index.html'
}),
new VueLoaderPlugin()
],
devServer: {
compress: true,
port: 8088
}
}
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>
安裝依賴
npm install --save-dev css-loader html-webpack-plugin style-loader vue-loader@next @vue/compiler-sfc webpack webpack-cli webpack-dev-server
- VueLoaderPlugin 的導入方式改變了
- vue-loader@next 當前需要自行指定版本
- 新增了 @vue/compiler-sfc 替換原來的 vue-template-compiler
- 其它都是 Webpack 基本配置
啟動本地服務
在 package.json 文件對應的 scripts 處新增命令
package.json
{
"scripts": {
"dev": "webpack serve"
}
}
執行 npm run dev 訪問 localhost:8088
Vue
npm install --save vue@next vue-router@next vuex@next
當前均需要自行指定版本
根組件
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>
- 組件的根元素可以允許為多個
<router-view>是 vue-router 定義的容器組件
入口文件
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， 其它沒有用到的部分將不會出現在最終打包文件中
createApp 方法創建了一個實例，額外的東西（router, store 等）均掛載到這個實例上，這樣做的好處是不會影響到另外創建的其它實例
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(.*)'
創建頁面組件
project
project-name
|- package.json
|- /src
+ |- /views
+ |- 404.vue
+ |- about.vue
+ |- index.vue
index.vue
<template>
<h1>Index</h1>
</template>
在組件中使用 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 serve",
"build": "webpack"
}
}