使用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 相关文章推荐
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
Array的push与unshift方法性能比较分析
Mar 05 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 Javascript
JS实现禁止鼠标右键的功能
Oct 15 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
JavaScript Date对象应用实例分享
Oct 30 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
Feb 11 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
使用react-virtualized实现图片动态高度长列表的问题
May 28 Javascript
解决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
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
ThinkPHP分页实例
2014/10/15 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
javascript常用方法总结
2015/05/14 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
python求质数的3种方法
2018/09/28 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
采购内勤岗位职责
2013/12/10 职场文书
班级旅游计划书
2014/05/03 职场文书
2014年个人业务工作总结
2014/11/17 职场文书