| root = true | |||||
| [*] | |||||
| charset = utf-8 | |||||
| end_of_line = lf | |||||
| insert_final_newline = true | |||||
| indent_style = space | |||||
| indent_size = 4 | |||||
| trim_trailing_whitespace = true | |||||
| [*.md] | |||||
| trim_trailing_whitespace = false | |||||
| [*.{yml,yaml}] | |||||
| indent_size = 2 |
| module.exports = { | module.exports = { | ||||
| presets: [ | |||||
| '@vue/cli-plugin-babel/preset' | |||||
| ] | |||||
| presets: [ | |||||
| '@vue/cli-plugin-babel/preset' | |||||
| ] | |||||
| } | } |
| { | |||||
| "compilerOptions": { | |||||
| "baseUrl": ".", | |||||
| "paths": { | |||||
| "@/*": [ | |||||
| "./src/*" | |||||
| ], | |||||
| } | |||||
| }, | |||||
| "exclude": [ | |||||
| "node_modules", | |||||
| "dist" | |||||
| ] | |||||
| } |
| { | { | ||||
| "name": "jam-pots-vuejs", | |||||
| "version": "0.1.0", | |||||
| "private": true, | |||||
| "scripts": { | |||||
| "serve": "vue-cli-service serve", | |||||
| "build": "vue-cli-service build", | |||||
| "lint": "vue-cli-service lint" | |||||
| }, | |||||
| "dependencies": { | |||||
| "core-js": "^3.6.5", | |||||
| "vue": "^3.0.0" | |||||
| }, | |||||
| "devDependencies": { | |||||
| "@vue/cli-plugin-babel": "~4.5.0", | |||||
| "@vue/cli-plugin-eslint": "~4.5.0", | |||||
| "@vue/cli-service": "~4.5.0", | |||||
| "@vue/compiler-sfc": "^3.0.0", | |||||
| "babel-eslint": "^10.1.0", | |||||
| "eslint": "^6.7.2", | |||||
| "eslint-plugin-vue": "^7.0.0-0" | |||||
| }, | |||||
| "eslintConfig": { | |||||
| "root": true, | |||||
| "env": { | |||||
| "node": true | |||||
| "name": "jam-pots-vuejs", | |||||
| "version": "0.1.0", | |||||
| "private": true, | |||||
| "scripts": { | |||||
| "serve": "vue-cli-service serve", | |||||
| "build": "vue-cli-service build", | |||||
| "lint": "vue-cli-service lint" | |||||
| }, | }, | ||||
| "extends": [ | |||||
| "plugin:vue/vue3-essential", | |||||
| "eslint:recommended" | |||||
| ], | |||||
| "parserOptions": { | |||||
| "parser": "babel-eslint" | |||||
| "dependencies": { | |||||
| "core-js": "^3.6.5", | |||||
| "vue": "^3.0.0" | |||||
| }, | }, | ||||
| "rules": {} | |||||
| }, | |||||
| "browserslist": [ | |||||
| "> 1%", | |||||
| "last 2 versions", | |||||
| "not dead" | |||||
| ] | |||||
| "devDependencies": { | |||||
| "@vue/cli-plugin-babel": "~4.5.0", | |||||
| "@vue/cli-plugin-eslint": "~4.5.0", | |||||
| "@vue/cli-service": "~4.5.0", | |||||
| "@vue/compiler-sfc": "^3.0.0", | |||||
| "babel-eslint": "^10.1.0", | |||||
| "eslint": "^6.7.2", | |||||
| "eslint-plugin-vue": "^7.0.0-0" | |||||
| }, | |||||
| "eslintConfig": { | |||||
| "root": true, | |||||
| "env": { | |||||
| "node": true | |||||
| }, | |||||
| "extends": [ | |||||
| "plugin:vue/vue3-essential", | |||||
| "eslint:recommended" | |||||
| ], | |||||
| "parserOptions": { | |||||
| "parser": "babel-eslint" | |||||
| }, | |||||
| "rules": {} | |||||
| }, | |||||
| "browserslist": [ | |||||
| "> 1%", | |||||
| "last 2 versions", | |||||
| "not dead" | |||||
| ] | |||||
| } | } |
| <!DOCTYPE html> | <!DOCTYPE html> | ||||
| <html lang=""> | <html lang=""> | ||||
| <head> | |||||
| <head> | |||||
| <meta charset="utf-8"> | <meta charset="utf-8"> | ||||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||||
| <meta name="viewport" content="width=device-width,initial-scale=1.0"> | <meta name="viewport" content="width=device-width,initial-scale=1.0"> | ||||
| <link rel="icon" href="<%= BASE_URL %>favicon.ico"> | <link rel="icon" href="<%= BASE_URL %>favicon.ico"> | ||||
| <title><%= htmlWebpackPlugin.options.title %></title> | |||||
| </head> | |||||
| <body> | |||||
| <title> | |||||
| <%= htmlWebpackPlugin.options.title %> | |||||
| </title> | |||||
| </head> | |||||
| <body> | |||||
| <noscript> | <noscript> | ||||
| <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> | |||||
| <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. | |||||
| Please enable it to continue.</strong> | |||||
| </noscript> | </noscript> | ||||
| <div id="app"></div> | <div id="app"></div> | ||||
| <!-- built files will be auto injected --> | <!-- built files will be auto injected --> | ||||
| </body> | |||||
| </body> | |||||
| </html> | </html> |
| <template> | |||||
| <img alt="Vue logo" src="./assets/logo.png"> | |||||
| <HelloWorld msg="Welcome to Your Vue.js App"/> | |||||
| </template> | |||||
| <template>test</template> | |||||
| <script> | <script> | ||||
| import HelloWorld from './components/HelloWorld.vue' | |||||
| export default { | export default { | ||||
| name: 'App', | |||||
| components: { | |||||
| HelloWorld | |||||
| } | |||||
| } | |||||
| name: "App", | |||||
| components: {}, | |||||
| }; | |||||
| </script> | </script> | ||||
| <style> | <style> | ||||
| #app { | #app { | ||||
| font-family: Avenir, Helvetica, Arial, sans-serif; | |||||
| -webkit-font-smoothing: antialiased; | |||||
| -moz-osx-font-smoothing: grayscale; | |||||
| text-align: center; | |||||
| color: #2c3e50; | |||||
| margin-top: 60px; | |||||
| font-family: Avenir, Helvetica, Arial, sans-serif; | |||||
| -webkit-font-smoothing: antialiased; | |||||
| -moz-osx-font-smoothing: grayscale; | |||||
| text-align: center; | |||||
| color: #2c3e50; | |||||
| margin-top: 60px; | |||||
| } | } | ||||
| </style> | </style> |
| <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-eslint" target="_blank" rel="noopener">eslint</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> |