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

2023-07-19 18:11:04 68

从零开始使用Webpack搭建Vue3开发环境

创建项目

首先需要创建一个空目录，在该目录打开命令行，执行npminit命令创建一个项目，这个过程会提示输入一些内容，完成后会自动生成一个package.json文件

Webpack的配置文件

project

project-name
+|-index.html
|-package.json
+|-webpack.config.js
+|-/src
+|-index.js

webpack.config.js

'usestrict'

constpath=require('path')
constHtmlWebpackPlugin=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:[
newHtmlWebpackPlugin({
filename:'index.html',
template:'./index.html'
}),
newVueLoaderPlugin()
],
devServer:{
compress:true,
port:8080
}
}

安装依赖

npminstall--save-devcss-loaderfile-loaderhtml-webpack-pluginstyle-loadervue-loader@16.0.0-beta.4@vue/compiler-sfcwebpackwebpack-cliwebpack-dev-server

VueLoaderPlugin的导入方式改变了
vue-loader@16.0.0-beta.4当前需要自行指定版本
vue-template-compiler没有了，新增了@vue/compiler-sfc
其它都是Webpack基本配置

Vue

npminstall--savevue@3.0.0-beta.15vue-router@4.0.0-alpha.13vuex@4.0.0-beta.2

当前均需要自行指定版本

根组件

project

project-name
|-package.json
|-/src
+|-app.vue

app.vue

组件根元素允许为多个

入口文件

src/index.js

import{createApp}from'vue'

importAppfrom'@/app.vue'
importrouterfrom'@/router'
importstorefrom'@/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'

constroutes=[
{
path:'/',
component:require('@/views/index.vue').default
},
{
path:'/about',
component:require('@/views/about.vue').default
},
{
path:'/:catchAll(.*)',
component:require('@/views/404.vue').default
}
]

constrouter=createRouter({
history:createWebHashHistory(),
routes
})

exportdefaultrouter

导入方式也为按需导入
原来的mode参数变为history
除了createWebHashHistory，还有createWebHistory和createMemoryHistory
路由未匹配时使用'/:catchAll(.*)'

在组件中使用router

import{useRouter}from'vue-router'

exportdefault{
setup(){
constrouter=useRouter()

//也可以解构
const{push,go,back}=useRouter()
}
}

router就是原来实例的$router，也有beforeEach,afterEach等等方法

在组件中使用route

import{useRoute}from'vue-router'

exportdefault{
setup(){
constroute=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'

conststore=createStore({
state:{},
getters:{},
mutations:{},
actions:{}
})

exportdefaultstore

导入方式也为按需导入
其它照旧，没有什么变化

在组件中使用store

import{useStore}from'vuex'

exportdefault{
setup(){
const{state,getters,commit,dispatch}=useStore()

return{
state
}
}
}

state是响应式的代理对象，不通过commit提交mutations而是直接修改state也是可以的，控制台并没有给出什么警告

NPMScripts

在package.json文件对应的scripts处新增命令

package.json

{
"scripts":{
"dev":"webpack-dev-server",
"build":"webpack"
}
}

到此这篇关于使用Webpack搭建Vue3开发环境过程详解的文章就介绍到这了,更多相关Webpack搭建Vue3开发环境内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

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

热门推荐

随机推荐