parent
87f390f554
commit
bc6473330d
18 changed files with 373 additions and 35 deletions
@ -0,0 +1,34 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<div class="row"> |
||||||
|
<Banner/> |
||||||
|
</div> |
||||||
|
<div class="row"> |
||||||
|
<div class="col-xs-2 col-xs-offset-2"> |
||||||
|
<div class="list-group"> |
||||||
|
<!-- router-link 的 replace 和 push模式 设置为replace后无法后退，默认为push模式--> |
||||||
|
<router-link class="list-group-item" active-class="active" :to="{name:'guanyu'}">About</router-link> |
||||||
|
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link> |
||||||
|
<!-- <a class="list-group-item active" href="./about.html">About</a>--> |
||||||
|
<!-- <a class="list-group-item" href="./home.html">Home</a>--> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="col-xs-6"> |
||||||
|
<div class="panel"> |
||||||
|
<div class="panel-body"> |
||||||
|
<router-view></router-view> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Banner from "@/components/Banner.vue"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "App", |
||||||
|
components: {Banner} |
||||||
|
} |
||||||
|
</script> |
||||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,23 @@ |
|||||||
|
// 引入Vue
|
||||||
|
import Vue from "vue"; |
||||||
|
// 引入App
|
||||||
|
import App from "./App"; |
||||||
|
// 引入VueRouter
|
||||||
|
import VueRouter from "vue-router"; |
||||||
|
// 引入router
|
||||||
|
import router from "@/router"; |
||||||
|
|
||||||
|
// 设置Vue
|
||||||
|
Vue.config.productionTip = false |
||||||
|
|
||||||
|
// 使用插件
|
||||||
|
Vue.use(VueRouter) |
||||||
|
|
||||||
|
// 实例化Vue
|
||||||
|
new Vue({ |
||||||
|
components: { |
||||||
|
App |
||||||
|
}, |
||||||
|
render: h => h(App), |
||||||
|
router: router, |
||||||
|
}).$mount('#app') |
||||||
@ -0,0 +1,39 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<button>原生的按钮</button> |
||||||
|
<input type="text"> |
||||||
|
<el-row> |
||||||
|
<el-button>默认按钮</el-button> |
||||||
|
<el-button type="primary">主要按钮</el-button> |
||||||
|
<el-button type="success">成功按钮</el-button> |
||||||
|
<el-button type="info">信息按钮</el-button> |
||||||
|
<el-button type="warning">警告按钮</el-button> |
||||||
|
<el-button type="danger">危险按钮</el-button> |
||||||
|
</el-row> |
||||||
|
<el-date-picker |
||||||
|
v-model='value1' |
||||||
|
type='date' |
||||||
|
placeholder='选择日期'> |
||||||
|
</el-date-picker> |
||||||
|
<el-row> |
||||||
|
<el-button icon="el-icon-search" circle></el-button> |
||||||
|
<el-button type="primary" icon="el-icon-edit" circle></el-button> |
||||||
|
<el-button type="success" icon="el-icon-check" circle></el-button> |
||||||
|
<el-button type="info" icon="el-icon-message" circle></el-button> |
||||||
|
<el-button type="warning" icon="el-icon-star-off" circle></el-button> |
||||||
|
<el-button type="danger" icon="el-icon-delete" circle></el-button> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "App", |
||||||
|
data() { |
||||||
|
return { |
||||||
|
value1: '' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,28 @@ |
|||||||
|
// 引入Vue
|
||||||
|
import Vue from "vue"; |
||||||
|
// 引入App
|
||||||
|
import App from "./App"; |
||||||
|
// 引入Element-ui组件库
|
||||||
|
// import ElementUI from 'element-ui';
|
||||||
|
// 引入ElementUI的全部样式
|
||||||
|
// import 'element-ui/lib/theme-chalk/index.css';
|
||||||
|
// 按需引入
|
||||||
|
import {Button, Row, DatePicker} from "element-ui"; |
||||||
|
|
||||||
|
// 设置Vue
|
||||||
|
Vue.config.productionTip = false |
||||||
|
|
||||||
|
// 使用插件
|
||||||
|
// Vue.use(ElementUI); // 引入全部组件
|
||||||
|
// 按需注册组件
|
||||||
|
Vue.component(Button.name, Button); |
||||||
|
Vue.component(Row.name, Row); |
||||||
|
Vue.component(DatePicker.name, DatePicker); |
||||||
|
|
||||||
|
// 实例化Vue
|
||||||
|
new Vue({ |
||||||
|
components: { |
||||||
|
App |
||||||
|
}, |
||||||
|
render: h => h(App), |
||||||
|
}).$mount('#app') |
||||||
@ -1,5 +1,15 @@ |
|||||||
module.exports = { |
module.exports = { |
||||||
presets: [ |
presets: [ |
||||||
'@vue/cli-plugin-babel/preset' |
'@vue/cli-plugin-babel/preset', |
||||||
] |
["@babel/preset-env", {"modules": false}] |
||||||
|
], |
||||||
|
plugins: [ |
||||||
|
[ |
||||||
|
"component", |
||||||
|
{ |
||||||
|
"libraryName": "element-ui", |
||||||
|
"styleLibraryName": "theme-chalk" |
||||||
|
} |
||||||
|
] |
||||||
|
] |
||||||
} |
} |
||||||
|
|||||||
@ -1,34 +1,39 @@ |
|||||||
<template> |
<template> |
||||||
<div> |
<div> |
||||||
<div class="row"> |
<button>原生的按钮</button> |
||||||
<Banner/> |
<input type="text"> |
||||||
</div> |
<el-row> |
||||||
<div class="row"> |
<el-button>默认按钮</el-button> |
||||||
<div class="col-xs-2 col-xs-offset-2"> |
<el-button type="primary">主要按钮</el-button> |
||||||
<div class="list-group"> |
<el-button type="success">成功按钮</el-button> |
||||||
<!-- router-link 的 replace 和 push模式 设置为replace后无法后退，默认为push模式--> |
<el-button type="info">信息按钮</el-button> |
||||||
<router-link class="list-group-item" active-class="active" :to="{name:'guanyu'}">About</router-link> |
<el-button type="warning">警告按钮</el-button> |
||||||
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link> |
<el-button type="danger">危险按钮</el-button> |
||||||
<!-- <a class="list-group-item active" href="./about.html">About</a>--> |
</el-row> |
||||||
<!-- <a class="list-group-item" href="./home.html">Home</a>--> |
<el-date-picker |
||||||
</div> |
v-model='value1' |
||||||
</div> |
type='date' |
||||||
<div class="col-xs-6"> |
placeholder='选择日期'> |
||||||
<div class="panel"> |
</el-date-picker> |
||||||
<div class="panel-body"> |
<el-row> |
||||||
<router-view></router-view> |
<el-button icon="el-icon-search" circle></el-button> |
||||||
</div> |
<el-button type="primary" icon="el-icon-edit" circle></el-button> |
||||||
</div> |
<el-button type="success" icon="el-icon-check" circle></el-button> |
||||||
</div> |
<el-button type="info" icon="el-icon-message" circle></el-button> |
||||||
</div> |
<el-button type="warning" icon="el-icon-star-off" circle></el-button> |
||||||
|
<el-button type="danger" icon="el-icon-delete" circle></el-button> |
||||||
|
</el-row> |
||||||
</div> |
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
import Banner from "@/components/Banner.vue"; |
|
||||||
|
|
||||||
export default { |
export default { |
||||||
name: "App", |
name: "App", |
||||||
components: {Banner} |
data() { |
||||||
|
return { |
||||||
|
value1: '' |
||||||
|
} |
||||||
|
} |
||||||
} |
} |
||||||
</script> |
</script> |
||||||
|
|||||||
Loading…
Reference in new issue