失眠网 > 从零开始使用 Webpack 搭建 Vue3 开发环境

从零开始使用 Webpack 搭建 Vue3 开发环境

时间：2020-03-17 04:21:06

前情提要

从零开始使用 Webpack 搭建 Vue 开发环境

创建项目

首先需要创建一个空目录，在该目录打开命令行，执行npm init -y命令创建一个项目，完成后会自动生成一个 package.json 文件

添加一个 Webpack 配置文件

project

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 的响应式系统使用了 ES 的 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

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 并不是响应式的