使用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 ui 1.7更新小结
Aug 15 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
Nov 30 Javascript
node.js中的console.time方法使用说明
Dec 09 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
javascript实现动态改变层大小的方法
May 14 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
React-Native使用Mobx实现购物车功能
Sep 14 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 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 地址栏信息的获取代码
2009/01/07 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
python datetime中strptime用法详解
2019/08/29 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
本科毕业答辩开场白
2015/05/27 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
学校证明范文
2015/06/24 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python