概述
从零开始使用 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 开发环境内容请搜索靠谱客以前的文章或继续浏览下面的相关文章希望大家以后多多支持靠谱客！
最后
以上就是饱满小蜜蜂为你收集整理的使用Webpack 搭建 Vue3 开发环境过程详解的全部内容，希望文章能够帮你解决使用Webpack 搭建 Vue3 开发环境过程详解所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复