Skip to content

Commit 8cd47f8

Browse files
webfansplzwebfansplz
committed
chore: add webpack playground
1 parent 54de0e5 commit 8cd47f8

File tree

12 files changed

+5173
-188
lines changed

12 files changed

+5173
-188
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
"prepare": "simple-git-hooks",
5959
"test": "vitest",
6060
"play": "nr -C packages/playground dev",
61+
"play:webpack": "nr -C packages/webpack-playground dev",
6162
"docs": "pnpm -C docs run docs:dev",
6263
"docs:build": "pnpm -C docs run docs:build",
6364
"zip": "tsx ./scripts/extension-zip.ts",

‎packages/webpack-playground/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+
}

‎packages/webpack-playground/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+
}

‎packages/webpack-playground/package.json‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"browserslist": [
3+
"> 1%",
4+
"last 2 versions",
5+
"not dead",
6+
"not ie 11"
7+
],
8+
"name": "@vue/devtools-webpack-playground",
9+
"version": "7.0.5",
10+
"private": true,
11+
"scripts": {
12+
"build": "vue-cli-service build",
13+
"dev": "vue-cli-service serve",
14+
"lint": "vue-cli-service lint"
15+
},
16+
"dependencies": {
17+
"core-js": "^3.8.3",
18+
"vue": "^3.2.13"
19+
},
20+
"devDependencies": {
21+
"@babel/core": "^7.12.16",
22+
"@babel/eslint-parser": "^7.12.16",
23+
"@vue/cli-plugin-babel": "~5.0.0",
24+
"@vue/cli-plugin-eslint": "~5.0.0",
25+
"@vue/cli-service": "~5.0.0",
26+
"@vue/devtools": "workspace:*",
27+
"@vue/devtools-api": "workspace:*",
28+
"eslint": "^7.32.0",
29+
"eslint-plugin-vue": "^8.0.3"
30+
},
31+
"eslintConfig": {
32+
"env": {
33+
"node": true
34+
},
35+
"extends": [
36+
"plugin:vue/vue3-essential",
37+
"eslint:recommended"
38+
],
39+
"parserOptions": {
40+
"parser": "@babel/eslint-parser"
41+
},
42+
"root": true,
43+
"rules": {}
44+
}
45+
}

‎packages/webpack-playground/public/favicon.ico‎

4.19 KB
Binary file not shown.

‎packages/webpack-playground/public/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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+
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
8+
<title><%= htmlWebpackPlugin.options.title %></title>
9+
</head>
10+
<body>
11+
<noscript>
12+
<strong
13+
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
14+
properly without JavaScript enabled. Please enable it to
15+
continue.</strong
16+
>
17+
</noscript>
18+
<div id="app"></div>
19+
<!-- built files will be auto injected -->
20+
</body>
21+
</html>

‎packages/webpack-playground/src/App.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script>
2+
import HelloWorld from './components/HelloWorld.vue'
3+
4+
export default {
5+
name: 'App',
6+
components: {
7+
HelloWorld,
8+
},
9+
}
10+
</script>
11+
12+
<template>
13+
<img alt="Vue logo" src="./assets/logo.png">
14+
<HelloWorld msg="Welcome to Your Vue.js App" />
15+
</template>
16+
17+
<style>
18+
#app {
19+
font-family: Avenir, Helvetica, Arial, sans-serif;
20+
-webkit-font-smoothing: antialiased;
21+
-moz-osx-font-smoothing: grayscale;
22+
text-align: center;
23+
color: #2c3e50;
24+
margin-top: 60px;
25+
}
26+
</style>

‎packages/webpack-playground/src/assets/logo.png‎

6.69 KB
Loading

‎packages/webpack-playground/src/components/HelloWorld.vue‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<script>
2+
export default {
3+
name: 'HelloWorld',
4+
props: {
5+
msg: String,
6+
},
7+
}
8+
</script>
9+
10+
<template>
11+
<div class="hello">
12+
<h1>{{ msg }}</h1>
13+
<p>
14+
For a guide and recipes on how to configure / customize this project,<br>
15+
check out the
16+
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
17+
</p>
18+
<h3>Installed CLI Plugins</h3>
19+
<ul>
20+
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
21+
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
22+
</ul>
23+
<h3>Essential Links</h3>
24+
<ul>
25+
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
26+
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
27+
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
28+
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
29+
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
30+
</ul>
31+
<h3>Ecosystem</h3>
32+
<ul>
33+
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
34+
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
35+
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
36+
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
37+
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
38+
</ul>
39+
</div>
40+
</template>
41+
42+
<!-- Add "scoped" attribute to limit CSS to this component only -->
43+
<style scoped>
44+
h3 {
45+
margin: 40px 0 0;
46+
}
47+
ul {
48+
list-style-type: none;
49+
padding: 0;
50+
}
51+
li {
52+
display: inline-block;
53+
margin: 0 10px;
54+
}
55+
a {
56+
color: #42b983;
57+
}
58+
</style>

‎packages/webpack-playground/src/main.js‎

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

0 commit comments

Comments
 (0)