使用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 相关文章推荐
jQuery 扩展对input的一些操作方法
Oct 30 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
Mar 07 Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
微信jssdk用法汇总
Jul 16 Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 Javascript
Ionic学习日记实现验证码倒计时
Feb 08 Javascript
javascript实现滚动条效果
Mar 24 Javascript
Vue单文件组件开发实现过程详解
Jul 30 Javascript
一分钟学会JavaScript中的try-catch
Dec 14 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
php daodb插入、更新与删除数据
2009/03/19 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
JavaScript中return false的用法
2015/03/12 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
2016/06/13 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
js实现简单进度条效果
2020/03/25 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
javascript中layim之查找好友查找群组
2021/02/06 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
英国珠宝和手表专家:Pleasance & Harper
2020/10/21 全球购物
医院护士的求职信范文
2013/12/26 职场文书
运动会跳远广播稿
2014/02/04 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
安全月宣传标语
2014/10/07 职场文书
工作作风建设心得体会
2014/10/22 职场文书
政协委员个人总结
2015/03/03 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript