| @@ -0,0 +1,22 @@ | |||||
| .DS_Store | |||||
| node_modules | |||||
| /dist | |||||
| # local env files | |||||
| .env.local | |||||
| .env.*.local | |||||
| # Log files | |||||
| npm-debug.log* | |||||
| yarn-debug.log* | |||||
| yarn-error.log* | |||||
| pnpm-debug.log* | |||||
| # Editor directories and files | |||||
| .idea | |||||
| .vscode | |||||
| *.suo | |||||
| *.ntvs* | |||||
| *.njsproj | |||||
| *.sln | |||||
| *.sw? | |||||
| @@ -0,0 +1,19 @@ | |||||
| # yzx_tool | |||||
| ## Project setup | |||||
| ``` | |||||
| npm install | |||||
| ``` | |||||
| ### Compiles and hot-reloads for development | |||||
| ``` | |||||
| npm run serve | |||||
| ``` | |||||
| ### Compiles and minifies for production | |||||
| ``` | |||||
| npm run build | |||||
| ``` | |||||
| ### Customize configuration | |||||
| See [Configuration Reference](https://cli.vuejs.org/config/). | |||||
| @@ -0,0 +1,5 @@ | |||||
| module.exports = { | |||||
| presets: [ | |||||
| '@vue/cli-plugin-babel/preset' | |||||
| ] | |||||
| } | |||||
| @@ -0,0 +1,27 @@ | |||||
| { | |||||
| "name": "yzx_tool", | |||||
| "version": "0.1.0", | |||||
| "private": true, | |||||
| "scripts": { | |||||
| "serve": "vue-cli-service serve", | |||||
| "build": "vue-cli-service build" | |||||
| }, | |||||
| "dependencies": { | |||||
| "core-js": "^3.6.5", | |||||
| "vue": "^2.6.11", | |||||
| "vue-router": "^3.2.0", | |||||
| "vuex": "^3.4.0" | |||||
| }, | |||||
| "devDependencies": { | |||||
| "@vue/cli-plugin-babel": "~4.4.0", | |||||
| "@vue/cli-plugin-router": "~4.4.0", | |||||
| "@vue/cli-plugin-vuex": "~4.4.0", | |||||
| "@vue/cli-service": "~4.4.0", | |||||
| "vue-template-compiler": "^2.6.11" | |||||
| }, | |||||
| "browserslist": [ | |||||
| "> 1%", | |||||
| "last 2 versions", | |||||
| "not dead" | |||||
| ] | |||||
| } | |||||
| @@ -0,0 +1,17 @@ | |||||
| <!DOCTYPE html> | |||||
| <html lang="en"> | |||||
| <head> | |||||
| <meta charset="utf-8"> | |||||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |||||
| <meta name="viewport" content="width=device-width,initial-scale=1.0"> | |||||
| <link rel="icon" href="<%= BASE_URL %>favicon.ico"> | |||||
| <title><%= htmlWebpackPlugin.options.title %></title> | |||||
| </head> | |||||
| <body> | |||||
| <noscript> | |||||
| <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> | |||||
| </noscript> | |||||
| <div id="app"></div> | |||||
| <!-- built files will be auto injected --> | |||||
| </body> | |||||
| </html> | |||||
| @@ -0,0 +1,32 @@ | |||||
| <template> | |||||
| <div id="app"> | |||||
| <div id="nav"> | |||||
| <router-link to="/">Home</router-link> | | |||||
| <router-link to="/about">About</router-link> | |||||
| </div> | |||||
| <router-view/> | |||||
| </div> | |||||
| </template> | |||||
| <style> | |||||
| #app { | |||||
| font-family: Avenir, Helvetica, Arial, sans-serif; | |||||
| -webkit-font-smoothing: antialiased; | |||||
| -moz-osx-font-smoothing: grayscale; | |||||
| text-align: center; | |||||
| color: #2c3e50; | |||||
| } | |||||
| #nav { | |||||
| padding: 30px; | |||||
| } | |||||
| #nav a { | |||||
| font-weight: bold; | |||||
| color: #2c3e50; | |||||
| } | |||||
| #nav a.router-link-exact-active { | |||||
| color: #42b983; | |||||
| } | |||||
| </style> | |||||
| @@ -0,0 +1,59 @@ | |||||
| <template> | |||||
| <div class="hello"> | |||||
| <h1>{{ msg }}</h1> | |||||
| <p> | |||||
| For a guide and recipes on how to configure / customize this project,<br> | |||||
| check out the | |||||
| <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. | |||||
| </p> | |||||
| <h3>Installed CLI Plugins</h3> | |||||
| <ul> | |||||
| <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li> | |||||
| <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li> | |||||
| <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li> | |||||
| </ul> | |||||
| <h3>Essential Links</h3> | |||||
| <ul> | |||||
| <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li> | |||||
| <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li> | |||||
| <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li> | |||||
| <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li> | |||||
| <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li> | |||||
| </ul> | |||||
| <h3>Ecosystem</h3> | |||||
| <ul> | |||||
| <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li> | |||||
| <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li> | |||||
| <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li> | |||||
| <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li> | |||||
| <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li> | |||||
| </ul> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| name: 'HelloWorld', | |||||
| props: { | |||||
| msg: String | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <!-- Add "scoped" attribute to limit CSS to this component only --> | |||||
| <style scoped> | |||||
| h3 { | |||||
| margin: 40px 0 0; | |||||
| } | |||||
| ul { | |||||
| list-style-type: none; | |||||
| padding: 0; | |||||
| } | |||||
| li { | |||||
| display: inline-block; | |||||
| margin: 0 10px; | |||||
| } | |||||
| a { | |||||
| color: #42b983; | |||||
| } | |||||
| </style> | |||||
| @@ -0,0 +1,12 @@ | |||||
| import Vue from 'vue' | |||||
| import App from './App.vue' | |||||
| import router from './router' | |||||
| import store from './store' | |||||
| Vue.config.productionTip = false | |||||
| new Vue({ | |||||
| router, | |||||
| store, | |||||
| render: h => h(App) | |||||
| }).$mount('#app') | |||||
| @@ -0,0 +1,29 @@ | |||||
| import Vue from 'vue' | |||||
| import VueRouter from 'vue-router' | |||||
| import Home from '../views/Home.vue' | |||||
| Vue.use(VueRouter) | |||||
| const routes = [ | |||||
| { | |||||
| path: '/', | |||||
| name: 'Home', | |||||
| component: Home | |||||
| }, | |||||
| { | |||||
| path: '/about', | |||||
| name: 'About', | |||||
| // route level code-splitting | |||||
| // this generates a separate chunk (about.[hash].js) for this route | |||||
| // which is lazy-loaded when the route is visited. | |||||
| component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') | |||||
| } | |||||
| ] | |||||
| const router = new VueRouter({ | |||||
| mode: 'history', | |||||
| base: process.env.BASE_URL, | |||||
| routes | |||||
| }) | |||||
| export default router | |||||
| @@ -0,0 +1,15 @@ | |||||
| import Vue from 'vue' | |||||
| import Vuex from 'vuex' | |||||
| Vue.use(Vuex) | |||||
| export default new Vuex.Store({ | |||||
| state: { | |||||
| }, | |||||
| mutations: { | |||||
| }, | |||||
| actions: { | |||||
| }, | |||||
| modules: { | |||||
| } | |||||
| }) | |||||
| @@ -0,0 +1,5 @@ | |||||
| <template> | |||||
| <div class="about"> | |||||
| <h1>This is an about page</h1> | |||||
| </div> | |||||
| </template> | |||||
| @@ -0,0 +1,18 @@ | |||||
| <template> | |||||
| <div class="home"> | |||||
| <img alt="Vue logo" src="../assets/logo.png"> | |||||
| <HelloWorld msg="Welcome to Your Vue.js App"/> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| // @ is an alias to /src | |||||
| import HelloWorld from '@/components/HelloWorld.vue' | |||||
| export default { | |||||
| name: 'Home', | |||||
| components: { | |||||
| HelloWorld | |||||
| } | |||||
| } | |||||
| </script> | |||||