Skip to content

V
vue-demo
Commit d50d7a75 authored by Amy Yang's avatar Amy Yang
Browse files
Options

feat: 添加ant design vue项目

parent f1095a4d
Expand all Show whitespace changes
Inline Side-by-side
Showing with 13001 additions and 0 deletions
vue-antd-demo/.gitignore 0 → 100644
View file @ d50d7a75
.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?
vue-antd-demo/README.md 0 → 100644
View file @ d50d7a75
# vue-antd-demo
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
vue-antd-demo/babel.config.js 0 → 100644
View file @ d50d7a75
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
]
]
};
vue-antd-demo/bash.exe.stackdump 0 → 100644
View file @ d50d7a75
Stack trace:
Frame Function Args
000FFFFA318 0018006133E (0018026DF0D, 0018024E186, 000FFFFA318, 000FFFF9210)
000FFFFA318 00180049229 (00000000000, 00000000000, 00000000000, 001005D1D3C)
000FFFFA318 00180049262 (0018026DFC9, 000FFFFA1C8, 000FFFFA318, 00000000000)
000FFFFA318 001800B5C18 (00000000000, 00000000000, 00000000000, 00000000000)
000FFFFA318 001800B5D9D (000FFFFA330, 00000000000, 00000000000, 00000000000)
000FFFFA5E0 001800B73CC (000FFFFA330, 00000000000, 00000000000, 00000000000)
End of stack trace
vue-antd-demo/package-lock.json 0 → 100644
View file @ d50d7a75
This diff is collapsed.
vue-antd-demo/package.json 0 → 100644
View file @ d50d7a75
{
"name": "vue-antd-demo",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"ant-design-vue": "^1.7.4",
"babel-plugin-import": "^1.13.3",
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-i18n": "^8.24.2",
"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-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^6.2.2",
"less": "^3.0.4",
"less-loader": "^5.0.0",
"prettier": "^1.19.1",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"@vue/prettier"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
vue-antd-demo/public/index.html 0 → 100644
View file @ d50d7a75
<!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>
vue-antd-demo/src/App.vue 0 → 100644
View file @ d50d7a75
<template>
<a-config-provider>
<div id="app">
<router-view />
</div>
</a-config-provider>
</template>
<style lang="less">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
height: 100%;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
vue-antd-demo/src/assets/i18n/en.js 0 → 100644
View file @ d50d7a75
export default {
username: "Username",
password: "Password",
login: "Login",
required: "Required",
version: "Version"
};
vue-antd-demo/src/assets/i18n/index.js 0 → 100644
View file @ d50d7a75
import Vue from "vue";
import VueI18n from "vue-i18n";
import en from "./en";
import zhcn from "./zh-cn";
Vue.use(VueI18n);
// 从localStorage中拿到用户的语言选择，如果没有，默认中文
const i18n = new VueI18n({
locale: localStorage.lang || "zhcn",
silentTranslationWarn: true,
messages: {
en,
zhcn
}
});
export default i18n;
vue-antd-demo/src/assets/i18n/zh-cn.js 0 → 100644
View file @ d50d7a75
export default {
username: "用户名",
password: "密码",
login: "登录",
required: "必填",
version: "版本"
};
vue-antd-demo/src/core/antd.js 0 → 100644
View file @ d50d7a75
import Vue from "vue";
import {
Base,
Affix,
Anchor,
AutoComplete,
Alert,
Avatar,
BackTop,
Badge,
Breadcrumb,
Button,
Calendar,
Card,
Collapse,
Carousel,
Cascader,
Checkbox,
Col,
DatePicker,
Divider,
Dropdown,
Form,
FormModel,
Icon,
Input,
InputNumber,
Layout,
List,
LocaleProvider,
Menu,
Mentions,
Modal,
Pagination,
Popconfirm,
Popover,
Progress,
Radio,
Rate,
Row,
Select,
Slider,
Spin,
Statistic,
Steps,
Switch,
Table,
Transfer,
Tree,
TreeSelect,
Tabs,
Tag,
TimePicker,
Timeline,
Tooltip,
Upload,
Drawer,
Skeleton,
Comment,
ConfigProvider,
Empty,
Result,
Descriptions,
PageHeader,
Space
} from "ant-design-vue";
[
Base,
Affix,
Anchor,
AutoComplete,
Alert,
Avatar,
BackTop,
Badge,
Breadcrumb,
Button,
Calendar,
Card,
Collapse,
Carousel,
Cascader,
Checkbox,
Col,
DatePicker,
Divider,
Dropdown,
Form,
FormModel,
Icon,
Input,
InputNumber,
Layout,
List,
LocaleProvider,
Menu,
Mentions,
Modal,
Pagination,
Popconfirm,
Popover,
Progress,
Radio,
Rate,
Row,
Select,
Slider,
Spin,
Statistic,
Steps,
Switch,
Table,
Transfer,
Tree,
TreeSelect,
Tabs,
Tag,
TimePicker,
Timeline,
Tooltip,
Upload,
Drawer,
Skeleton,
Comment,
ConfigProvider,
Empty,
Result,
Descriptions,
PageHeader,
Space
].forEach(comp => {
Vue.use(comp);
});
vue-antd-demo/src/main.js 0 → 100644
View file @ d50d7a75
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./core/antd";
import i18n from "./assets/i18n";
import "ant-design-vue/dist/antd.less";
Vue.config.productionTip = false;
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount("#app");
vue-antd-demo/src/router/index.js 0 → 100644
View file @ d50d7a75
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "INDEX",
redirect: "/login"
},
{
path: "/login",
name: "Login",
component: () => import("../views/auth/Login.vue")
}
];
const router = new VueRouter({
routes
});
export default router;
vue-antd-demo/src/store/index.js 0 → 100644
View file @ d50d7a75
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
modules: {}
});
vue-antd-demo/src/views/auth/Login.vue 0 → 100644
View file @ d50d7a75
<template>
<div class="main-view">
<div class="left-view center-flex">
<div>
<div class="title-view">
Antd demo
</div>
<div class="content-view">
This is a antd demo for test!
</div>
</div>
</div>
<div class="right-view center-flex">
<a-form :form="form" class="form-view" @submit="login">
<a-form-item>
<a-input
:placeholder="$t('username')"
v-decorator="[
'username',
{ rules: [{ required: true, message: $t('required') }] }
]"
>
<a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
</a-input>
</a-form-item>
<a-form-item>
<a-input
:placeholder="$t('password')"
v-decorator="[
'password',
{ rules: [{ required: true, message: $t('required') }] }
]"
>
<a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
</a-input>
</a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit" block>{{
$t("login")
}}</a-button>
</a-form-item>
<a-form-item>
<div class="bottom-view">
<div>{{ $t("version") }}: 0.0.1</div>
<a-select
default-value="zhcn"
style="width: 120px;"
@change="handleLangChange"
>
<a-select-option v-for="lang in languageLst" :key="lang.name">
{{ lang.text }}
</a-select-option>
</a-select>
</div>
</a-form-item>
</a-form>
</div>
</div>
</template>
<script>
const languageLst = [
{
name: "en",
text: "English"
},
{
name: "zhcn",
text: "简体中文"
}
];
export default {
data() {
return {
languageLst,
form: this.$form.createForm(this, { name: "login" })
};
},
methods: {
handleLangChange(lang) {
this.$i18n.locale = lang;
},
login(e) {
e.preventDefault();
this.form.validateFields((err, values) => {
if (!err) {
console.log(values);
}
});
}
}
};
</script>
<style lang="less" scoped>
.main-view {
display: flex;
width: 100%;
height: 100%;
}
.left-view {
flex: 1;
width: auto;
height: 100%;
background-color: @primary-color;
flex-direction: column;
.title-view {
font-size: 24px;
color: white;
text-align: left;
}
.content-view {
font-size: 16px;
color: white;
text-align: left;
}
}
.right-view {
width: 600px;
height: 100%;
.form-view {
width: 80%;
}
}
.center-flex {
display: flex;
justify-content: center;
align-items: center;
}
.bottom-view {
display: flex;
justify-content: space-between;
}
</style>
vue-antd-demo/vue.config.js 0 → 100644
View file @ d50d7a75
module.exports = {
css: {
loaderOptions: {
less: {
modifyVars: {
"primary-color": "#1E90FF",
"link-color": "#1E90FF",
"border-radius-base": "2px"
},
javascriptEnabled: true
}
}
}
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment