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 = { |
||||
presets: [ |
||||
'@vue/cli-plugin-babel/preset' |
||||
] |
||||
presets: [ |
||||
'@vue/cli-plugin-babel/preset', |
||||
["@babel/preset-env", {"modules": false}] |
||||
], |
||||
plugins: [ |
||||
[ |
||||
"component", |
||||
{ |
||||
"libraryName": "element-ui", |
||||
"styleLibraryName": "theme-chalk" |
||||
} |
||||
] |
||||
] |
||||
} |
||||
|
||||
@ -1,34 +1,39 @@ |
||||
<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> |
||||
<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> |
||||
import Banner from "@/components/Banner.vue"; |
||||
|
||||
export default { |
||||
name: "App", |
||||
components: {Banner} |
||||
data() { |
||||
return { |
||||
value1: '' |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
Loading…
Reference in new issue