Skip to content

Commit cab4183

Browse files
sonofmagicsonofmagic
committed
feat: commit webpack5 vue3
1 parent 26f5c54 commit cab4183

22 files changed

+5507
-263
lines changed

‎apps/webpack5-vue3/.browserslistrc

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
> 1%
2+
last 2 versions
3+
not dead
4+
not ie 11

‎apps/webpack5-vue3/.editorconfig

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
[*.{js,jsx,ts,tsx,vue}]
2+
indent_style = space
3+
indent_size = 2
4+
trim_trailing_whitespace = true
5+
insert_final_newline = true

‎apps/webpack5-vue3/.eslintrc.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
node: true
5+
},
6+
extends: [
7+
'plugin:vue/vue3-essential',
8+
'@vue/standard',
9+
'@vue/typescript/recommended'
10+
],
11+
parserOptions: {
12+
ecmaVersion: 2020
13+
},
14+
rules: {
15+
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
16+
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
17+
}
18+
}

‎apps/webpack5-vue3/.gitignore

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
5+
6+
# local env files
7+
.env.local
8+
.env.*.local
9+
10+
# Log files
11+
npm-debug.log*
12+
yarn-debug.log*
13+
yarn-error.log*
14+
pnpm-debug.log*
15+
16+
# Editor directories and files
17+
.idea
18+
.vscode
19+
*.suo
20+
*.ntvs*
21+
*.njsproj
22+
*.sln
23+
*.sw?

‎apps/webpack5-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+
}

‎apps/webpack5-vue3/package.json

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"name": "webpack5-vue3",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint",
9+
"prepare": "tw-patch"
10+
},
11+
"dependencies": {
12+
"core-js": "^3.8.3",
13+
"vue": "^3.2.13",
14+
"vue-router": "^4.0.3"
15+
},
16+
"devDependencies": {
17+
"@typescript-eslint/eslint-plugin": "^5.4.0",
18+
"@typescript-eslint/parser": "^5.4.0",
19+
"@vue/cli-plugin-babel": "~5.0.0",
20+
"@vue/cli-plugin-eslint": "~5.0.0",
21+
"@vue/cli-plugin-router": "~5.0.0",
22+
"@vue/cli-plugin-typescript": "~5.0.0",
23+
"@vue/cli-service": "~5.0.0",
24+
"@vue/eslint-config-standard": "^8.0.1",
25+
"@vue/eslint-config-typescript": "^11.0.2",
26+
"autoprefixer": "^10.4.14",
27+
"eslint": "^8.38.0",
28+
"eslint-plugin-import": "^2.27.5",
29+
"eslint-plugin-node": "^11.1.0",
30+
"eslint-plugin-promise": "^6.1.1",
31+
"eslint-plugin-vue": "^9.11.0",
32+
"postcss": "^8.4.22",
33+
"sass": "^1.32.7",
34+
"sass-loader": "^13.2.2",
35+
"tailwindcss": "^3.3.1",
36+
"tailwindcss-patch": "workspace:*",
37+
"typescript": "~5.0.4",
38+
"unplugin-tailwindcss-mangle": "workspace:*"
39+
}
40+
}

‎apps/webpack5-vue3/postcss.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {}
5+
}
6+
}

‎apps/webpack5-vue3/public/favicon.ico

4.19 KB
Binary file not shown.

‎apps/webpack5-vue3/public/index.html

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

‎apps/webpack5-vue3/src/App.vue

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<template>
2+
<main class="flex min-h-screen flex-col items-center justify-between p-24">
3+
<div class="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
4+
<p
5+
class="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
6+
Get started by editing&nbsp;
7+
<code class="font-mono font-bold">pages/index.tsx</code>
8+
</p>
9+
<div
10+
class="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
11+
<a class="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
12+
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
13+
target="_blank" rel="noopener noreferrer">
14+
By
15+
<img src="./assets/logo.png" alt="Vercel Logo" class="dark:invert" priority />
16+
</a>
17+
</div>
18+
</div>
19+
20+
<div
21+
class="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700/10 after:dark:from-sky-900 after:dark:via-[#0141ff]/40 before:lg:h-[360px]">
22+
<img class="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert" src="./assets/logo.png" alt="Next.js Logo"
23+
priority />
24+
</div>
25+
26+
<div class="mb-32 grid text-center lg:mb-0 lg:grid-cols-4 lg:text-left">
27+
<a href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
28+
class="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
29+
target="_blank" rel="noopener noreferrer">
30+
<h2 class="mb-3 text-2xl font-semibold">
31+
Docs <span
32+
class="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">-&gt;</span>
33+
</h2>
34+
<p class="m-0 max-w-[30ch] text-sm opacity-50">Find in-depth information about Next.js
35+
features and API.</p>
36+
</a>
37+
38+
<a href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
39+
class="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
40+
target="_blank" rel="noopener noreferrer">
41+
<h2 class="mb-3 text-2xl font-semibold">
42+
Learn <span
43+
class="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">-&gt;</span>
44+
</h2>
45+
<p class="m-0 max-w-[30ch] text-sm opacity-50">Learn about Next.js in an interactive
46+
course with&nbsp;quizzes!</p>
47+
</a>
48+
49+
<a href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
50+
class="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
51+
target="_blank" rel="noopener noreferrer">
52+
<h2 class="mb-3 text-2xl font-semibold">
53+
Templates <span
54+
class="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">-&gt;</span>
55+
</h2>
56+
<p class="m-0 max-w-[30ch] text-sm opacity-50">Discover and deploy boilerplate example
57+
Next.js&nbsp;projects.</p>
58+
</a>
59+
60+
<a href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
61+
class="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
62+
target="_blank" rel="noopener noreferrer">
63+
<h2 class="mb-3 text-2xl font-semibold">
64+
Deploy <span
65+
class="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">-&gt;</span>
66+
</h2>
67+
<p class="m-0 max-w-[30ch] text-sm opacity-50">Instantly deploy your Next.js site to a
68+
shareable URL with Vercel.</p>
69+
</a>
70+
</div>
71+
</main>
72+
</template>
73+
74+
<style lang="scss">
75+
@tailwind base;
76+
@tailwind components;
77+
@tailwind utilities;
78+
#app {
79+
font-family: Avenir, Helvetica, Arial, sans-serif;
80+
-webkit-font-smoothing: antialiased;
81+
-moz-osx-font-smoothing: grayscale;
82+
text-align: center;
83+
color: #2c3e50;
84+
}
85+
86+
nav {
87+
padding: 30px;
88+
89+
a {
90+
font-weight: bold;
91+
color: #2c3e50;
92+
93+
&.router-link-exact-active {
94+
color: #42b983;
95+
}
96+
}
97+
}
98+
</style>

‎apps/webpack5-vue3/src/assets/logo.png

6.69 KB
Loading

‎apps/webpack5-vue3/src/components/HelloWorld.vue

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

‎apps/webpack5-vue3/src/main.ts

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

‎apps/webpack5-vue3/src/router/index.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
2+
import HomeView from '../views/HomeView.vue'
3+
4+
const routes: Array<RouteRecordRaw> = [
5+
{
6+
path: '/',
7+
name: 'home',
8+
component: HomeView
9+
},
10+
{
11+
path: '/about',
12+
name: 'about',
13+
// route level code-splitting
14+
// this generates a separate chunk (about.[hash].js) for this route
15+
// which is lazy-loaded when the route is visited.
16+
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
17+
}
18+
]
19+
20+
const router = createRouter({
21+
history: createWebHistory(process.env.BASE_URL),
22+
routes
23+
})
24+
25+
export default router

‎apps/webpack5-vue3/src/shims-vue.d.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/* eslint-disable */
2+
declare module '*.vue' {
3+
import type { DefineComponent } from 'vue'
4+
const component: DefineComponent<{}, {}, any>
5+
export default component
6+
}

‎apps/webpack5-vue3/src/views/AboutView.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<div class="about">
3+
<h1>This is an about page</h1>
4+
</div>
5+
</template>

‎apps/webpack5-vue3/src/views/HomeView.vue

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<div class="home">
3+
<img alt="Vue logo" src="../assets/logo.png">
4+
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
5+
</div>
6+
</template>
7+
8+
<script lang="ts">
9+
import { defineComponent } from 'vue'
10+
import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src
11+
12+
export default defineComponent({
13+
name: 'HomeView',
14+
components: {
15+
HelloWorld
16+
}
17+
})
18+
</script>

‎apps/webpack5-vue3/tailwind.config.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/** @type {import('tailwindcss').Config} */
2+
export default {
3+
content: ['./src/**/*.{js,ts,jsx,tsx,vue}'],
4+
theme: {
5+
extend: {}
6+
},
7+
plugins: []
8+
}

0 commit comments

Comments
 (0)