Skip to content
This repository was archived by the owner on Jun 14, 2025. It is now read-only.

Commit 8cbd4a8

Browse files
PatrickChen928antfu
PatrickChen928
and
antfu
authored
feat: support new component hot update for webpack (unplugin#423)
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
1 parent b6b5883 commit 8cbd4a8

File tree

13 files changed

+685
-1117
lines changed

13 files changed

+685
-1117
lines changed

‎examples/vue-cli-vue3/babel.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/cli-plugin-babel/preset',
4+
],
5+
}

‎examples/vue-cli-vue3/jsconfig.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"module": "esnext",
5+
"baseUrl": "./",
6+
"moduleResolution": "node",
7+
"paths": {
8+
"@/*": [
9+
"src/*"
10+
]
11+
},
12+
"lib": [
13+
"esnext",
14+
"dom",
15+
"dom.iterable",
16+
"scripthost"
17+
]
18+
}
19+
}

‎examples/vue-cli-vue3/package.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "example-vue-cli-vue3",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint"
9+
},
10+
"dependencies": {
11+
"core-js": "^3.8.3",
12+
"vue": "^3.2.13"
13+
},
14+
"devDependencies": {
15+
"@babel/core": "^7.12.16",
16+
"@vue/cli-plugin-babel": "~5.0.0",
17+
"@vue/cli-service": "~5.0.0",
18+
"unplugin-vue-components": "workspace:*"
19+
},
20+
"browserslist": [
21+
"> 1%",
22+
"last 2 versions",
23+
"not dead",
24+
"not ie 11"
25+
]
26+
}

‎examples/vue-cli-vue3/public/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<title><%= htmlWebpackPlugin.options.title %></title>
8+
</head>
9+
<body>
10+
<noscript>
11+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
12+
</noscript>
13+
<div id="app"></div>
14+
<!-- built files will be auto injected -->
15+
</body>
16+
</html>

‎examples/vue-cli-vue3/src/App.vue

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script>
2+
export default {
3+
name: 'App',
4+
}
5+
</script>
6+
7+
<template>
8+
<HelloWorld1 msg="one" />
9+
<HelloWorld2 msg="two" />
10+
<HelloWorld3 msg="three" />
11+
</template>
12+
13+
<style>
14+
#app {
15+
font-family: Avenir, Helvetica, Arial, sans-serif;
16+
-webkit-font-smoothing: antialiased;
17+
-moz-osx-font-smoothing: grayscale;
18+
text-align: center;
19+
color: #2c3e50;
20+
margin-top: 60px;
21+
}
22+
</style>

‎examples/vue-cli-vue3/src/components/HelloWorld1.vue

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script>
2+
export default {
3+
name: 'HelloWorld1',
4+
props: {
5+
msg: String,
6+
},
7+
}
8+
</script>
9+
10+
<template>
11+
<div>
12+
<h1>Hello World 1 {{ msg }}</h1>
13+
</div>
14+
</template>

‎examples/vue-cli-vue3/src/components/HelloWorld2.vue

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script>
2+
export default {
3+
name: 'HelloWorld2',
4+
props: {
5+
msg: String,
6+
},
7+
}
8+
</script>
9+
10+
<template>
11+
<div>
12+
<h1>Hello World 2 {{ msg }}</h1>
13+
</div>
14+
</template>

‎examples/vue-cli-vue3/src/components/HelloWorld3.vue

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script>
2+
export default {
3+
name: 'HelloWorld3',
4+
props: {
5+
msg: String,
6+
},
7+
}
8+
</script>
9+
10+
<template>
11+
<div>
12+
<h1>Hello World 3 {{ msg }}</h1>
13+
</div>
14+
</template>

‎examples/vue-cli-vue3/src/main.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { createApp } from 'vue'
2+
import App from './App.vue'
3+
4+
createApp(App).mount('#app')

‎examples/vue-cli-vue3/vue.config.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const { defineConfig } = require('@vue/cli-service')
2+
const Components = require('unplugin-vue-components/webpack')
3+
4+
module.exports = defineConfig({
5+
transpileDependencies: true,
6+
configureWebpack: {
7+
plugins: [
8+
Components({
9+
dirs: [
10+
'./src/components',
11+
],
12+
}),
13+
],
14+
},
15+
})

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy