快捷導(dǎo)航

使用Webpack 搭建 Vue3 開發(fā)環(huán)境過程詳解

更新時(shí)間：2020年07月28日 14:48:53 作者：by.Genesis

這篇文章主要介紹了使用Webpack 搭建 Vue3 開發(fā)環(huán)境過程詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

從零開始使用 Webpack 搭建 Vue3 開發(fā)環(huán)境

創(chuàng)建項(xiàng)目

首先需要?jiǎng)?chuàng)建一個(gè)空目錄，在該目錄打開命令行，執(zhí)行 npm init 命令創(chuàng)建一個(gè)項(xiàng)目，這個(gè)過程會(huì)提示輸入一些內(nèi)容，完成后會(huì)自動(dòng)生成一個(gè) 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 vue-loader@16.0.0-beta.4 @vue/compiler-sfc webpack webpack-cli webpack-dev-server

VueLoaderPlugin 的導(dǎo)入方式改變了
vue-loader@16.0.0-beta.4 當(dāng)前需要自行指定版本
vue-template-compiler 沒有了，新增了 @vue/compiler-sfc
其它都是 Webpack 基本配置

Vue

npm install --save vue@3.0.0-beta.15 vue-router@4.0.0-alpha.13 vuex@4.0.0-beta.2

當(dāng)前均需要自行指定版本

根組件

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>

組件根元素允許為多個(gè)

入口文件

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 的整包導(dǎo)入方式，Vue3.0 采用了按需導(dǎo)入的方式，比如這里只導(dǎo)入了 createApp 這個(gè)方法，這樣做的好處是可以支持 Webpack 的 treeshaking，其它沒有用到的部分將不會(huì)出現(xiàn)在最終打包文件中

Vue3.0 的響應(yīng)式系統(tǒng)使用了 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

導(dǎo)入方式也為按需導(dǎo)入
原來的 mode 參數(shù)變?yōu)?history
除了 createWebHashHistory，還有 createWebHistory 和 createMemoryHistory
路由未匹配時(shí)使用 '/:catchAll(.*)'

在組件中使用 router

import { useRouter } from 'vue-router'

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

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

router 就是原來實(shí)例的 $router，也有 beforeEach, afterEach 等等方法

在組件中使用 route

import { useRoute } from 'vue-router'

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

route 是個(gè)響應(yīng)式的代理對(duì)象，和原來實(shí)例的 $route 一樣，也有 query, params 等屬性
不建議將 route 解構(gòu)，解構(gòu)后的 query, params 并不是響應(yīng)式的

Store

project

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

該文件創(chuàng)建并導(dǎo)出一個(gè) Vuex 實(shí)例

src/store/index.js

import { createStore } from 'vuex'

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

export default store

導(dǎo)入方式也為按需導(dǎo)入
其它照舊，沒有什么變化

在組件中使用 store

import { useStore } from 'vuex'

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

 return {
  state
 }
 }
}

state 是響應(yīng)式的代理對(duì)象，不通過 commit 提交 mutations 而是直接修改 state 也是可以的，控制臺(tái)并沒有給出什么警告

NPM Scripts

在 package.json 文件對(duì)應(yīng)的 scripts 處新增命令

package.json

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

到此這篇關(guān)于使用Webpack 搭建 Vue3 開發(fā)環(huán)境過程詳解的文章就介紹到這了,更多相關(guān)Webpack 搭建 Vue3 開發(fā)環(huán)境內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: