Vue基础配置
main.js（入口文件）
import Vue from 'vue'
import App from './App.vue'
import router from './router'Vue.config.productionTip = falsenew Vue({router,render: h => h(App)
}).$mount('#app')
index.html（默认首页）
<!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组件文件以.vue结尾每个部分由<template>,<script>,<style>组成。
<template><!-- HTML代码部分 --><div id="app"><h1>{{ message }}</h1></div>
</template><script>
// JS代码部分
export default {// 数据模型data () {return {message:"Hello Vue"}}// 方法methods: {}
}
</script><style>
/* css样式 */</style>
Vue组件
table button
<template><div><!-- 按钮组件 --><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><br /><br /><br /><!-- 表格组件 --><el-table :data="tableData" border style="width: 100%"><el-table-column prop="date" label="日期" width="180"> </el-table-column><el-table-column prop="name" label="姓名" width="180"> </el-table-column><el-table-column prop="address" label="地址"> </el-table-column></el-table><!-- 分页组件 --><el-paginationbackgroundlayout="total,prev, pager, next,jumper,sizes"@size-change="handleSizeChange"@current-change="handleCurrentChange":total="1000"></el-pagination></div>
</template><script>
export default {data() {return {tableData: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",},],};},methods: {handleSizeChange(val) {alert("页面显示改变为：" + val);},handleCurrentChange(val) {alert("页码改变为：" + val);},},
};
</script><style>
</style>页码条设置
与以下一一对应
total,prev, pager, next,jumper,sizes 调整页面方法
@size-change="handleSizeChange"@current-change="handleCurrentChange"其他组件详细请看文档，CV大神
