脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Webpack 搭建 Vue3 开发环境

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

 更新时间：2020年07月28日 14:48:53   作者：by.Genesis  
这篇文章主要介绍了使用Webpack 搭建 Vue3 开发环境过程详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

从零开始使用 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 开发环境内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 基于Vue实现支持按周切换的日历

    基于Vue实现支持按周切换的日历

    这篇文章主要为大家详细介绍了基于Vue实现支持按周切换的日历，根据实际开发情况按每年、每月、每周进行切换，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 仿vue-cli搭建属于自己的脚手架的方法步骤

    仿vue-cli搭建属于自己的脚手架的方法步骤

    这篇文章主要介绍了仿vue-cli搭建属于自己的脚手架的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue项目保持element组件同行,设置组件不自动换行问题

    Vue项目保持element组件同行,设置组件不自动换行问题

    这篇文章主要介绍了Vue项目保持element组件同行,设置组件不自动换行问题。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-02-02
  • 详解Vue组件之间通信的七种方式

    详解Vue组件之间通信的七种方式

    这篇文章主要介绍了Vue组件之间通信的七种方式,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-04-04
  • vue中的get方法\post方法如何实现传递数组参数

    vue中的get方法\post方法如何实现传递数组参数

    这篇文章主要介绍了vue中的get方法\post方法如何实现传递数组参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • 如何在 ant 的table中实现图片的渲染操作

    如何在 ant 的table中实现图片的渲染操作

    这篇文章主要介绍了如何在 ant 的table中实现图片的渲染操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • 基于vue 动态菜单 刷新空白问题的解决

    基于vue 动态菜单 刷新空白问题的解决

    这篇文章主要介绍了基于vue 动态菜单 刷新空白问题的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue3组件异步更新和nextTick运行机制源码解读

    Vue3组件异步更新和nextTick运行机制源码解读

    这篇文章主要为大家介绍了Vue3组件异步更新和nextTick运行机制源码解读，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • 使用async-validator编写Form组件的方法

    使用async-validator编写Form组件的方法

    本篇文章主要介绍了使用 async-validator 编写 Form 组件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Vue使用Composition API生成计算属性computed

    Vue使用Composition API生成计算属性computed

    这篇文章主要为大家详细介绍了Vue如何使用Composition API实现生成计算属性computed，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下
    2023-06-06

最新评论