Skip to content

Commit 8305be0

Browse files
imtomqimtomq
committed
config tailwindcss and vue router
1 parent 248ad5c commit 8305be0

19 files changed

+1651
-1248
lines changed

‎.env

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
VUE_APP_GLOBAL_ENV=GOBAL ENV
2+
VUE_APP_ROOT_API=http://www.example.com/api

‎babel.config.js

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

‎package-lock.json

Lines changed: 1539 additions & 1153 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,11 @@
1919
"@vue/cli-plugin-babel": "~5.0.0",
2020
"@vue/cli-plugin-eslint": "~5.0.0",
2121
"@vue/cli-service": "~5.0.0",
22+
"autoprefixer": "^10.4.12",
2223
"eslint": "^7.32.0",
23-
"eslint-plugin-vue": "^8.0.3"
24+
"eslint-plugin-vue": "^8.0.3",
25+
"postcss": "^8.4.17",
26+
"tailwindcss": "^3.1.8"
2427
},
2528
"eslintConfig": {
2629
"root": true,

‎postcss.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
plugins: [require('tailwindcss'), require('autoprefixer')],
3+
};

‎public/favicon.ico

-4.19 KB
Binary file not shown.

‎public/index.html

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,12 @@
11
<!DOCTYPE html>
22
<html lang="">
33
<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>
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>Example Project</title>
98
</head>
109
<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>
1410
<div id="app"></div>
15-
<!-- built files will be auto injected -->
1611
</body>
1712
</html>

‎src/App.vue

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
<template>
22
<div id="nav">
3+
<router-link to="/" class="text-3xl">Login</router-link> |
34
<router-link to="/">Home</router-link> |
4-
<router-link to="/about">About</router-link>
5+
<router-link to="/about">About</router-link> |
6+
<router-link to="/news">News (requires auth)</router-link>
57
</div>
6-
<router-view />
8+
<router-view></router-view>
79
</template>
810
<script>
911
export default {
10-
name: 'MyName',
11-
created() {
12-
console.log(process.env);
13-
},
12+
name: 'MyApp',
1413
};
1514
</script>

‎src/assets/logo.png

-6.69 KB
Binary file not shown.

‎src/components/HelloWorld.vue

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎src/main.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎src/main.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { createApp } from "vue";
2-
import App from "./App.vue";
3-
import router from "./router"; // <---
1+
import { createApp } from 'vue';
2+
import App from './App.vue';
3+
import router from './router';
4+
import './main.css';
45

5-
createApp(App).use(router).mount("#app");
6+
createApp(App).use(router).mount('#app');

‎src/router/index.js

Lines changed: 50 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,65 @@
1-
import { createWebHistory, createRouter } from "vue-router";
2-
import Home from "../views/Home.vue";
3-
import About from "../views/About.vue";
1+
import { createWebHistory, createRouter } from 'vue-router';
2+
import Home from '../views/Home.vue';
3+
import About from '../views/About.vue';
4+
import News from '../views/News.vue';
5+
6+
import NotFound from '../views/NotFound.vue';
7+
import Forbidden from '../views/Forbidden.vue';
8+
9+
const SUB_PATH = process.env.NODE_ENV === 'production' ? '/' : 'development';
410

511
const routes = [
612
{
7-
path: "/",
8-
name: "Home",
13+
path: '/',
14+
name: 'Home',
915
component: Home,
16+
meta: {
17+
requiresAuth: false,
18+
},
1019
},
1120
{
12-
path: "/about",
13-
name: "About",
21+
path: '/about',
22+
name: 'About',
1423
component: About,
24+
meta: {
25+
requiresAuth: false,
26+
},
27+
},
28+
{
29+
path: '/news',
30+
name: 'News',
31+
component: News,
32+
meta: {
33+
requiresAuth: true,
34+
},
35+
},
36+
{
37+
path: '/:pathMatch(.*)*',
38+
name: 'NotFound',
39+
component: NotFound,
40+
meta: {
41+
requiresAuth: false,
42+
},
43+
},
44+
{
45+
path: '/403',
46+
name: 'Forbidden',
47+
component: Forbidden,
48+
meta: {
49+
requiresAuth: false,
50+
},
1551
},
1652
];
1753

1854
const router = createRouter({
19-
history: createWebHistory(),
55+
history: createWebHistory(SUB_PATH),
2056
routes,
2157
});
2258

59+
router.beforeEach(async (to, from, next) => {
60+
console.log('to: ', to, 'from: ', from);
61+
if (to.meta.requiresAuth) next('/403');
62+
else next();
63+
});
64+
2365
export default router;

‎src/views/About.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
2-
<h1>About Page 1</h1>
2+
<h1>About Page</h1>
33
</template>
44
<script>
55
export default {
6-
name: "MyAbout",
6+
name: 'MyAbout',
77
};
88
</script>

‎src/views/Forbidden.vue

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<h1>Error 403 - Forbidden</h1>
3+
</template>
4+
<script>
5+
export default {
6+
name: 'ForbiddenPage',
7+
};
8+
</script>

‎src/views/Home.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
2-
<h1>Home Page 1</h1>
2+
<h1>Home Page</h1>
33
</template>
44
<script>
55
export default {
6-
name: "MyHome",
6+
name: 'MyHome',
77
};
88
</script>

‎src/views/News.vue

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<h1>News Page</h1>
3+
</template>
4+
<script>
5+
export default {
6+
name: 'MyNews',
7+
};
8+
</script>

‎src/views/NotFound.vue

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<h1>Not Found</h1>
3+
</template>
4+
<script>
5+
export default {
6+
name: 'NotFound',
7+
};
8+
</script>

‎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+
module.exports = {
3+
content: ['./src/**/*.{html,js,vue}'],
4+
theme: {
5+
extend: {},
6+
},
7+
plugins: [],
8+
};

0 commit comments

Comments
 (0)