使用Webpack 搭建 Vue3 开发环境过程详解


Posted in Javascript onJuly 28, 2020

从零开始使用 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 vue-loader@16.0.0-beta.4 @vue/compiler-sfc webpack webpack-cli webpack-dev-server
  • VueLoaderPlugin 的导入方式改变了
  • vue-loader@16.0.0-beta.4 当前需要自行指定版本
  • 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

当前均需要自行指定版本

根组件

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 搭建 Vue3 开发环境过程详解的文章就介绍到这了,更多相关Webpack 搭建 Vue3 开发环境内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
fmt:formatDate的输出格式详解
Jan 09 Javascript
js利用数组length属性清空和截短数组的小例子
Jan 15 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
微信小程序 animation API详解及实例代码
Oct 08 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
详解webpack进阶之loader篇
Aug 23 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 Javascript
vue环形进度条组件实例应用
Oct 10 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 #Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 #Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 #Javascript
vue实现虚拟列表功能的代码
Jul 28 #Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 #Javascript
Vue2.0 $set()的正确使用详解
Jul 28 #Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 #Javascript
You might like
一个oracle+PHP的查询的例子
2006/10/09 PHP
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
php实现保存周期为1天的购物车类
2017/07/07 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
javascript dom 操作详解 js加强
2009/07/13 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
[02:32]【DOTA2亚洲邀请赛】iceice,梦开始的地方
2017/03/13 DOTA
Python使用新浪微博API发送微博的例子
2014/04/10 Python
Python iter()函数用法实例分析
2018/03/17 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
css3中transition属性详解
2014/09/02 HTML / CSS
浅谈PHP7中的一些小技巧
2021/05/29 PHP
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python
JAVA springCloud项目搭建流程
2022/05/11 Java/Android