├── .npmrc
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── views
    │   ├── AboutView.vue
    │   └── HomeView.vue
    ├── main.js
    ├── App.vue
    ├── router
    │   └── index.js
    └── components
    │   └── HelloWorld.vue
├── babel.config.js
├── vue.config.js
├── .gitignore
├── jsconfig.json
├── README.md
├── template
    ├── router.js.hbs
    └── App.vue.hbs
└── package.json


/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/su37josephxia/vue-template/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/su37josephxia/vue-template/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/views/AboutView.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>This is an about page</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('@vue/cli-service')
2 | module.exports = defineConfig({
3 |   transpileDependencies: true
4 | })
5 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | import router from './router'
4 | 
5 | createApp(App).use(router).mount('#app')
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 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?
24 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 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 | }
20 | 


--------------------------------------------------------------------------------
/src/views/HomeView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <img alt="Vue logo" src="../assets/logo.png">
 4 |     <HelloWorld msg="Welcome to Your Vue.js App" />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | // @ is an alias to /src
10 | import HelloWorld from '@/components/HelloWorld.vue'
11 | 
12 | export default {
13 |   name: 'HomeView',
14 |   components: {
15 |     HelloWorld
16 |   }
17 | }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # hello-vue
 2 | 
 3 | ## Project setup
 4 | ```
 5 | pnpm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | pnpm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | pnpm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | pnpm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/template/router.js.hbs:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHashHistory } from 'vue-router'
 2 | import HomeView from '../views/HomeView.vue'
 3 | 
 4 | const routes = [
 5 |   {
 6 |     path: '/',
 7 |     name: 'home',
 8 |     component: HomeView
 9 |   },
10 |   {{#each list}}
11 |     {
12 |       path: '/{{name}}',
13 |       name: '{{name}}',
14 |       component: () => import('../views/{{file}}')
15 |     },
16 |   {{/each}}
17 | ]
18 | 
19 | const router = createRouter({
20 |   history: createWebHashHistory(),
21 |   routes
22 | })
23 | 
24 | export default router
25 | 
26 | 


--------------------------------------------------------------------------------
/template/App.vue.hbs:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <div id="nav">
 4 |       <router-link to="/">Home</router-link> 
 5 |       {{#each list}}
 6 |       | <router-link to="/{{name}}">{{name}}</router-link>
 7 |       {{/each}}
 8 |     </div>
 9 |     <router-view/>
10 |   </div>
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>
23 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav>
 3 |     <router-link to="/">Home</router-link> |
 4 |     <router-link to="/about">About</router-link>
 5 |   </nav>
 6 |   <router-view/>
 7 | </template>
 8 | 
 9 | <style>
10 | #app {
11 |   font-family: Avenir, Helvetica, Arial, sans-serif;
12 |   -webkit-font-smoothing: antialiased;
13 |   -moz-osx-font-smoothing: grayscale;
14 |   text-align: center;
15 |   color: #2c3e50;
16 | }
17 | 
18 | nav {
19 |   padding: 30px;
20 | }
21 | 
22 | nav a {
23 |   font-weight: bold;
24 |   color: #2c3e50;
25 | }
26 | 
27 | nav a.router-link-exact-active {
28 |   color: #42b983;
29 | }
30 | </style>
31 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 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>
18 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHashHistory } from 'vue-router'
 2 | import HomeView from '../views/HomeView.vue'
 3 | 
 4 | const routes = [
 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: createWebHashHistory(),
22 |   routes
23 | })
24 | 
25 | export default router
26 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hello-vue",
 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 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.8.3",
12 |     "vue": "^3.2.13",
13 |     "vue-router": "^4.0.3"
14 |   },
15 |   "devDependencies": {
16 |     "@babel/core": "^7.12.16",
17 |     "@babel/eslint-parser": "^7.12.16",
18 |     "@vue/cli-plugin-babel": "~5.0.0",
19 |     "@vue/cli-plugin-eslint": "~5.0.0",
20 |     "@vue/cli-plugin-router": "~5.0.0",
21 |     "@vue/cli-service": "~5.0.0",
22 |     "eslint": "^7.32.0",
23 |     "eslint-plugin-vue": "^8.0.3"
24 |   },
25 |   "eslintConfig": {
26 |     "root": true,
27 |     "env": {
28 |       "node": true
29 |     },
30 |     "extends": [
31 |       "plugin:vue/vue3-essential",
32 |       "eslint:recommended"
33 |     ],
34 |     "parserOptions": {
35 |       "parser": "@babel/eslint-parser"
36 |     },
37 |     "rules": {}
38 |   },
39 |   "browserslist": [
40 |     "> 1%",
41 |     "last 2 versions",
42 |     "not dead",
43 |     "not ie 11"
44 |   ]
45 | }
46 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 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-eslint" target="_blank" rel="noopener">eslint</a></li>
13 |     </ul>
14 |     <h3>Essential Links</h3>
15 |     <ul>
16 |       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
17 |       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
18 |       <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
19 |       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
20 |       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
21 |     </ul>
22 |     <h3>Ecosystem</h3>
23 |     <ul>
24 |       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
25 |       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
26 |       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
27 |       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
28 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
29 |     </ul>
30 |   </div>
31 | </template>
32 | 
33 | <script>
34 | export default {
35 |   name: 'HelloWorld',
36 |   props: {
37 |     msg: String
38 |   }
39 | }
40 | </script>
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>
59 | 


--------------------------------------------------------------------------------