@@ -0,0 +1,3 @@ | |||||
> 1% | |||||
last 2 versions | |||||
not dead |
@@ -0,0 +1,25 @@ | |||||
module.exports = { | |||||
root: true, | |||||
env: { | |||||
node: true, | |||||
}, | |||||
extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"], | |||||
parserOptions: { | |||||
parser: "babel-eslint", | |||||
}, | |||||
rules: { | |||||
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off", | |||||
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", | |||||
}, | |||||
overrides: [ | |||||
{ | |||||
files: [ | |||||
"**/__tests__/*.{j,t}s?(x)", | |||||
"**/tests/unit/**/*.spec.{j,t}s?(x)", | |||||
], | |||||
env: { | |||||
jest: true, | |||||
}, | |||||
}, | |||||
], | |||||
}; |
@@ -0,0 +1,23 @@ | |||||
.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,34 @@ | |||||
# alipay-scan-code-front-end | |||||
## Project setup | |||||
``` | |||||
npm install | |||||
``` | |||||
### Compiles and hot-reloads for development | |||||
``` | |||||
npm run serve | |||||
``` | |||||
### Compiles and minifies for production | |||||
``` | |||||
npm run build | |||||
``` | |||||
### Run your tests | |||||
``` | |||||
npm run test | |||||
``` | |||||
### Lints and fixes files | |||||
``` | |||||
npm run lint | |||||
``` | |||||
### Run your unit tests | |||||
``` | |||||
npm run test:unit | |||||
``` | |||||
### Customize configuration | |||||
See [Configuration Reference](https://cli.vuejs.org/config/). |
@@ -0,0 +1,3 @@ | |||||
module.exports = { | |||||
presets: ["@vue/cli-plugin-babel/preset"], | |||||
}; |
@@ -0,0 +1,3 @@ | |||||
module.exports = { | |||||
preset: "@vue/cli-plugin-unit-jest", | |||||
}; |
@@ -0,0 +1,43 @@ | |||||
{ | |||||
"name": "alipay-scan-code-front-end", | |||||
"version": "0.1.0", | |||||
"private": true, | |||||
"scripts": { | |||||
"serve": "vue-cli-service serve", | |||||
"build": "vue-cli-service build", | |||||
"lint": "vue-cli-service lint", | |||||
"test:unit": "vue-cli-service test:unit" | |||||
}, | |||||
"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.5.0", | |||||
"@vue/cli-plugin-eslint": "^4.5.0", | |||||
"@vue/cli-plugin-unit-jest": "^4.5.0", | |||||
"@vue/cli-service": "^4.5.0", | |||||
"@vue/eslint-config-prettier": "^6.0.0", | |||||
"@vue/test-utils": "^1.0.3", | |||||
"babel-eslint": "^10.1.0", | |||||
"eslint": "^6.7.2", | |||||
"eslint-plugin-prettier": "^3.3.1", | |||||
"eslint-plugin-vue": "^6.2.2", | |||||
"lint-staged": "^9.5.0", | |||||
"prettier": "^2.2.1", | |||||
"sass": "^1.26.5", | |||||
"sass-loader": "^8.0.2", | |||||
"vue-template-compiler": "^2.6.11" | |||||
}, | |||||
"gitHooks": { | |||||
"pre-commit": "lint-staged" | |||||
}, | |||||
"lint-staged": { | |||||
"*.{js,jsx,vue}": [ | |||||
"vue-cli-service lint", | |||||
"git add" | |||||
] | |||||
} | |||||
} |
@@ -0,0 +1,17 @@ | |||||
<!DOCTYPE html> | |||||
<html lang=""> | |||||
<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 lang="scss"> | |||||
#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; | |||||
a { | |||||
font-weight: bold; | |||||
color: #2c3e50; | |||||
&.router-link-exact-active { | |||||
color: #42b983; | |||||
} | |||||
} | |||||
} | |||||
</style> |
@@ -0,0 +1,122 @@ | |||||
<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> | |||||
<li> | |||||
<a | |||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest" | |||||
target="_blank" | |||||
rel="noopener" | |||||
>unit-jest</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 lang="scss"> | |||||
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,30 @@ | |||||
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,11 @@ | |||||
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> |
@@ -0,0 +1,12 @@ | |||||
import { shallowMount } from "@vue/test-utils"; | |||||
import HelloWorld from "@/components/HelloWorld.vue"; | |||||
describe("HelloWorld.vue", () => { | |||||
it("renders props.msg when passed", () => { | |||||
const msg = "new message"; | |||||
const wrapper = shallowMount(HelloWorld, { | |||||
propsData: { msg }, | |||||
}); | |||||
expect(wrapper.text()).toMatch(msg); | |||||
}); | |||||
}); |