使用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的原型继承
Jul 25 Javascript
利用js实现遮罩以及弹出可移动登录窗口
Jul 08 Javascript
jquery ajax属性async(同步异步)示例
Nov 05 Javascript
两个数组去重的JS代码
Dec 04 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
使用ionic切换页面卡顿的解决方法
Dec 16 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 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检测数组长度函数sizeof与count用法
2014/11/17 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
jquery自定义插件——window的实现【示例代码】
2016/05/06 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
小程序实现录音上传功能
2019/11/22 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
python写的一个文本编辑器
2014/01/23 Python
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
Python文件和目录操作详解
2015/02/08 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
python实现五子棋小游戏
2020/03/25 Python
Python多项式回归的实现方法
2019/03/11 Python
django admin组件使用方法详解
2019/07/19 Python
在python3中实现更新界面
2020/02/21 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
计算机个人求职信范例
2014/01/24 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
高中生自我评价范文2015
2015/03/03 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电