從零開始使用 Webpack 搭建 Vue3 開發環境
阿新 • • 發佈：2020-07-09
從零開始使用 Webpack 搭建 Vue3 開發環境
### 建立專案
首先需要建立一個空目錄，在該目錄開啟命令列，執行 `npm init` 命令建立一個專案，這個過程會提示輸入一些內容，完成後會自動生成一個 package.json 檔案
Webpack 的配置檔案
**project**
``` diff
project-name
+ |- index.html
|- package.json
+ |- webpack.config.js
+ |- /src
+ |- index.js
```
**webpack.config.js**
``` javascript
'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
}
}
```
安裝依賴
``` shell
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
``` shell
npm install --save [email protected] [email protected] [email protected]
```
當前均需要自行指定版本
根元件
**project**
``` diff
project-name
|- package.json
|- /src
+ |- app.vue
```
**app.vue**
``` html
```
* 元件根元素允許為多個
入口檔案
**src/index.js**
``` javascript
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](https://caniuse.com/#feat=proxy)，該特性無法相容舊瀏覽器
### Router
**project**
``` diff
project-name
|- package.json
|- /src
+ |- /router
+ |- index.js
```
**src/router/index.js**
``` javascript
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
``` javascript
import { useRouter } from 'vue-router'
export default {
setup() {
const router = useRouter()
// 也可以解構
const { push, go, back } = useRouter()
}
}
```
* router 就是原來例項的 $router，也有 beforeEach, afterEach 等等方法
在元件中使用 route
``` javascript
import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
}
}
```
* route 是個響應式的代理物件，和原來例項的 $route 一樣，也有 query, params 等屬性
* 不建議將 route 解構，解構後的 query, params 並不是響應式的
### Store
**project**
``` diff
project-name
|- package.json
|- /src
+ |- /store
+ |- index.js
```
該檔案建立並匯出一個 Vuex 例項
**src/store/index.js**
``` javascript
import { createStore } from 'vuex'
const store = createStore({
state: {},
getters: {},
mutations: {},
actions: {}
})
export default store
```
* 匯入方式也為按需匯入
* 其它照舊，沒有什麼變化
在元件中使用 store
``` javascript
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**
``` json
{
"scripts": {
"dev": "webpack-dev-server",
"build": "webpack"
}
}
```
### 更多
* [在 Webpack 專案中配置支援 async/await](https://github.com/xyzhanjiang/assets/tree/master/js/es2015/async-