使用webpack运行vue3
时间: 2023-09-16 19:13:48 浏览: 50
要使用webpack运行vue3,需要先安装vue-loader和webpack-dev-server。可以按照以下步骤进行操作:
1.安装vue-loader和webpack-dev-server:
```
npm install vue-loader@next webpack-dev-server --save-dev
```
2.在webpack配置文件中添加vue-loader:
```
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
}
```
3.配置webpack-dev-server:
```
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
```
4.在入口文件中导入vue:
```
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App)
}).$mount('#app')
```
5.创建一个vue组件:
```
<template>
<div>
<h1>Hello Vue 3!</h1>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
h1 {
color: red;
}
</style>
```
6.运行webpack-dev-server:
```
npx webpack serve --open
```
现在,你就可以在浏览器中访问http://localhost:9000,看到你的Vue3应用程序正在运行了!