上一篇中已将完成了基础结构的搭建，这一篇将开始正式开发。页面直接使用了一位小伙伴的源码，可以在https://github.com/taylorchen709/vue-admin下载

修改入口main.js

在入口函数中添加对element-ui,vue-router,vuex,vue-source等组件的引用

 
 
  1. import Vue from 'vue'
  2. import App from './App'
  3. import ElementUI from 'element-ui'
  4. import 'element-ui/lib/theme-default/index.css'
  5. import VueRouter from 'vue-router'
  6. import store from './vuex/store'
  7. import Vuex from 'vuex'
  8. import VueSource from 'vue-resource'
  9. import routes from './routes'
  10. import 'font-awesome/css/font-awesome.min.css'
  13. Vue.use(ElementUI)
  14. Vue.use(VueRouter)
  15. Vue.use(Vuex)
  16. Vue.use(VueSource)
  18. //创建路由实例
  19. const router = new VueRouter({
  20.     routes
  21. })
  22. router.beforeEach((to, from, next) => {
  24.     //这里进行了简单的登录验证
  25.     //访问login时直接清除user
  26.     if (to.path == '/login') {
  27.         sessionStorage.removeItem('user');
  28.     }
  30.     let user = JSON.parse(sessionStorage.getItem('user'));
  31.     if (!user && to.path != '/login') {
  32.         next({ path: '/login' })
  33.     } else {
  34.         next()
  35.     }
  36. })
  39. new Vue({
  40.     router,
  41.     store,
  42.     render: h => h(App)
  43. }).$mount('#app')

修改App.vue

 
 
  1. <template>
  2.     <div id="app">
  3.         <transition name="fade"
  4.                     mode="out-in">
  5.             <router-view></router-view>
  6.         </transition>
  7.     </div>
  8. </template>
  9. <script>
  10.     export default {
  11.         name: 'app',
  12.         components: {
  13.         }
  14.     }
  15. </script>

增加viewes文件夹，并增加模块视图

login.vue

 
 
  1. <template>
  2.     <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container">
  3.         <h3 class="title">系统登录</h3>
  4.         <el-form-item prop="account">
  5.             <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input>
  6.         </el-form-item>
  7.         <el-form-item prop="checkPass">
  8.             <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input>
  9.         </el-form-item>
  10.         <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
  11.         <el-form-item style="width:100%;">
  12.             <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登录</el-button>
  13.         </el-form-item>
  14.     </el-form>
  15. </template>
  17. <script>
  18.     export default {
  19.         data() {
  20.             return {
  21.                 logining: false,
  22.                 ruleForm2: {
  23.                     account: 'admin',
  24.                     checkPass: '123456'
  25.                 },
  26.                 rules2: {
  27.                     account: [
  28.                         { required: true, message: '请输入账号', trigger: 'blur' },
  29.                         //{ validator: validaePass }
  30.                     ],
  31.                     checkPass: [
  32.                         { required: true, message: '请输入密码', trigger: 'blur' },
  33.                         //{ validator: validaePass2 }
  34.                     ]
  35.                 },
  36.                 checked: true
  37.             };
  38.         },
  39.         methods: {
  40.             handleReset2() {
  41.                 this.$refs.ruleForm2.resetFields();
  42.             },
  43.             handleSubmit2(ev) {
  44.                 var _this = this;
  45.                 this.$refs.ruleForm2.validate((valid) => {
  46.                     if (valid) {
  47.                         this.logining = true;
  48.                         //NProgress.start();
  49.                         var loginParams = { username: this.ruleForm2.account, password: this.ruleForm2.checkPass };
  51.                         if (loginParams.username != 'admin') {
  52.                             this.$message({
  53.                                 message: '用户不存在',
  54.                                 type: 'error'
  55.                             });
  56.                             this.logining = false;
  57.                             return false;
  58.                         }
  59.                         if (loginParams.password != '123456') {
  60.                             this.$message({
  61.                                 message: '密码不正确',
  62.                                 type: 'error'
  63.                             });
  64.                             this.logining = false;
  65.                             return;
  66.                         }
  67.                         let user = {
  68.                             id: 1,
  69.                             username: 'admin',
  70.                             password: '123456',
  71.                             avatar: 'resources/img/user.png',
  72.                             name: '管理员'
  73.                         }
  74.                         sessionStorage.setItem('user', JSON.stringify(user));
  75.                         this.$router.push({ path: '/' });
  76.                     } else {
  77.                         return false;
  78.                     }
  79.                 });
  80.             }
  81.         }
  82.     }
  84. </script>
  86. <style  scoped>
  87.     .login-container {
  88.         /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
  89.         -webkit-border-radius: 5px;
  90.         border-radius: 5px;
  91.         -moz-border-radius: 5px;
  92.         background-clip: padding-box;
  93.         margin: 180px auto;
  94.         width: 350px;
  95.         padding: 35px 35px 15px 35px;
  96.         background: #fff;
  97.         border: 1px solid #eaeaea;
  98.         box-shadow: 0 0 25px #cac6c6;
  99.     }
  100.     .title {
  101.         margin: 0px auto 40px auto;
  102.         text-align: center;
  103.         color: #505458;
  104.     }
  106.     .remember {
  107.         margin: 0px 0px 35px 0px;
  108.     }
  109. </style>

home.vue

 
 
  1. <template>
  2.     <el-row class="container">
  3.         <el-col :span="24" class="header">
  4.             <el-col :span="10" :class="collapsed?'logo-collapse-width logo-collapsed':'logo-width logo'">
  5.                 {{collapsed?'':sysName}}
  6.                 <!--<img :src="logo" v-show="collapsed" />-->
  7.             </el-col>
  8.             <el-col :span="10">
  9.                 <div class="tools" @click.prevent="collapse">
  10.                     <i class="fa fa-align-justify"></i>
  11.                 </div>
  12.             </el-col>
  13.             <el-col :span="4" class="userinfo">
  14.                 <el-dropdown trigger="hover">
  15.                     <span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar" /> {{sysUserName}}</span>
  16.                     <el-dropdown-menu slot="dropdown">
  17.                         <el-dropdown-item>我的消息</el-dropdown-item>
  18.                         <el-dropdown-item>设置</el-dropdown-item>
  19.                         <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
  20.                     </el-dropdown-menu>
  21.                 </el-dropdown>
  22.             </el-col>
  23.         </el-col>
  24.         <el-col :span="24" class="main">
  25.             <aside :class="collapsed?'menu-collapsed':'menu-expanded'">
  26.                 <!--导航菜单-->
  27.                 <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect"
  28.                          unique-opened router v-show="!collapsed">
  29.                     <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
  30.                         <el-submenu :index="index+''" v-if="!item.leaf">
  31.                             <template slot="title">
  32.                                 <i :class="item.iconCls"></i>{{item.name}}
  33.                             </template>
  34.                             <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
  35.                         </el-submenu>
  36.                         <el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
  37.                     </template>
  38.                 </el-menu>
  39.                 <!--导航菜单-折叠后-->
  40.                 <ul class="el-menu el-menu-vertical-demo collapsed" v-show="collapsed" ref="menuCollapsed">
  41.                     <li v-for="(item,index) in $router.options.routes" v-if="!item.hidden" class="el-submenu item">
  42.                         <template v-if="!item.leaf">
  43.                             <div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"><i :class="item.iconCls"></i></div>
  44.                             <ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)">
  45.                                 <li v-for="child in item.children" v-if="!child.hidden" :key="child.path" class="el-menu-item" style="padding-left: 40px;" :class="$route.path==child.path?'is-active':''" @click="$router.push(child.path)">{{child.name}}</li>
  46.                             </ul>
  47.                         </template>
  48.                         <template v-else>
  49.                     <li class="el-submenu">
  50.                         <div class="el-submenu__title el-menu-item" style="padding-left: 20px;height: 56px;line-height: 56px;padding: 0 20px;" :class="$route.path==item.children[0].path?'is-active':''" @click="$router.push(item.children[0].path)"><i :class="item.iconCls"></i></div>
  51.                     </li>
  52. </template>
  53.                     </li>
  54.                 </ul>
  55.             </aside>
  56. <section class="content-container">
  57.     <div class="grid-content bg-purple-light">
  58.         <el-col :span="24" class="breadcrumb-container">
  59.             <!--<strong class="title">{{$route.name}}</strong>-->
  60.             <el-breadcrumb separator="/" class="breadcrumb-inner">
  61.                 <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
  62.                     {{ item.name }}
  63.                 </el-breadcrumb-item>
  64.             </el-breadcrumb>
  65.         </el-col>
  66.         <el-col :span="24" class="content-wrapper">
  67.             <transition name="fade" mode="out-in">
  68.                 <router-view></router-view>
  69.             </transition>
  70.         </el-col>
  71.     </div>
  72. </section>
  73.         </el-col>
  74.     </el-row>
  75. </template>
  77. <script>
  78.     export default {
  79.         data() {
  80.             return {
  81.                 sysName:'Simple',
  82.                 logo:'dist/resources/img/logo.png',
  83.                 collapsed:false,
  84.                 sysUserName: '',
  85.                 sysUserAvatar: '',
  86.                 form: {
  87.                     name: '',
  88.                     region: '',
  89.                     date1: '',
  90.                     date2: '',
  91.                     delivery: false,
  92.                     type: [],
  93.                     resource: '',
  94.                     desc: ''
  95.                 }
  96.             }
  97.         },
  98.         methods: {
  99.             onSubmit() {
  100.                 console.log('submit!');
  101.             },
  102.             handleopen() {
  103.                 //console.log('handleopen');
  104.             },
  105.             handleclose() {
  106.                 //console.log('handleclose');
  107.             },
  108.             handleselect: function (a, b) {
  109.             },
  110.             //退出登录
  111.             logout: function () {
  112.                 var _this = this;
  113.                 this.$confirm('确认退出吗?', '提示', {
  114.                     //type: 'warning'
  115.                 }).then(() => {
  116.                     sessionStorage.removeItem('user');
  117.                     _this.$router.push('/login');
  118.                 }).catch(() => {
  120.                 });
  123.             },
  124.             //折叠导航栏
  125.             collapse:function(){
  126.                 this.collapsed=!this.collapsed;
  127.             },
  128.             showMenu(i,status){
  129.                 this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-'+i)[0].style.display=status?'block':'none';
  130.             }
  131.         },
  132.         mounted() {
  133.             var user = sessionStorage.getItem('user');
  134.             if (user) {
  135.                 user = JSON.parse(user);
  136.                 this.sysUserName = user.name || '';
  137.                 this.sysUserAvatar = user.avatar || '';
  138.             }
  140.         }
  141.     }
  143. </script>
  145. <style scoped >
  146.     .container {
  147.         position: absolute;
  148.         top: 0px;
  149.         bottom: 0px;
  150.         width: 100%;
  151.     }
  153.         .container .header {
  154.             height: 60px;
  155.             line-height: 60px;
  156.             background: #20a0ff;
  157.             color: #fff;
  158.         }
  160.             .container .header .userinfo {
  161.                 text-align: right;
  162.                 padding-right: 35px;
  163.                 float: right;
  164.             }
  166.                 .container .header .userinfo .userinfo-inner {
  167.                     cursor: pointer;
  168.                     color: #fff;
  169.                 }
  171.                     .container .header .userinfo .userinfo-inner img {
  172.                         width: 40px;
  173.                         height: 40px;
  174.                         border-radius: 20px;
  175.                         margin: 10px 0px 10px 10px;
  176.                         float: right;
  177.                     }
  179.             .container .header .logo {
  180.                 height: 60px;
  181.                 font-size: 22px;
  182.                 padding-left: 20px;
  183.                 padding-right: 20px;
  184.                 border-color: rgba(238, 241, 146, 0.3);
  185.                 border-right-width: 1px;
  186.                 border-right-style: solid;
  187.             }
  189.                 .container .header .logo img {
  190.                     width: 40px;
  191.                     float: left;
  192.                     margin: 10px 10px 10px 18px;
  193.                 }
  195.                 .container .header .logo .txt {
  196.                     color: #fff;
  197.                 }
  199.             .container .header .logo-collapsed {
  200.                 padding: 0;
  201.                 font-size: 22px;
  202.                 padding-left: 0px;
  203.                 padding-top: 10px;
  204.                 border-color: rgba(238, 241, 146, 0.3);
  205.                 border-right-width: 1px;
  206.                 border-right-style: solid;
  207.             }
  209.                 .container .header .logo-collapsed img {
  210.                     width: 60px;
  211.                     float: left;
  212.                     margin: 0px;
  213.                 }
  215.                 .container .header .logo-collapsed .txt {
  216.                     color: #fff;
  217.                 }
  219.             .container .header .logo-width {
  220.                 width: 230px;
  221.             }
  223.             .container .header .logo-collapse-width {
  224.                 width: 60px;
  225.             }
  227.             .container .header .tools {
  228.                 padding: 0px 23px;
  229.                 width: 14px;
  230.                 height: 60px;
  231.                 line-height: 60px;
  232.                 cursor: pointer;
  233.             }
  235.         .container .main {
  236.             display: flex;
  237.             position: absolute;
  238.             top: 60px;
  239.             bottom: 0px;
  240.             overflow: hidden;
  241.         }
  243.             .container .main aside {
  244.                 flex: 0 0 230px;
  245.                 width: 230px;
  246.             }
  248.                 .container .main aside .el-menu {
  249.                     height: 100%;
  250.                 }
  252.                 .container .main aside .collapsed {
  253.                     width: 60px;
  254.                 }
  256.                     .container .main aside .collapsed .item {
  257.                         position: relative;
  258.                     }
  260.                     .container .main aside .collapsed .submenu {
  261.                         position: absolute;
  262.                         top: 0px;
  263.                         left: 60px;
  264.                         z-index: 99999;
  265.                         height: auto;
  266.                         display: none;
  267.                     }
  269.             .container .main .menu-collapsed {
  270.                 flex: 0 0 60px;
  271.                 width: 60px;
  272.             }
  274.             .container .main .menu-expanded {
  275.                 flex: 0 0 230px;
  276.                 width: 230px;
  277.             }
  279.             .container .main .content-container {
  280.                 flex: 1;
  281.                 overflow-y: scroll;
  282.                 padding: 20px;
  283.             }
  285.                 .container .main .content-container .breadcrumb-container .title {
  286.                     width: 200px;
  287.                     float: left;
  288.                     color: #475669;
  289.                 }
  291.                 .container .main .content-container .breadcrumb-container .breadcrumb-inner {
  292.                     float: left;
  293.                     padding-bottom: 10px;
  294.                 }
  296.                 .container .main .content-container .content-wrapper {
  297.                     background-color: #fff;
  298.                     box-sizing: border-box;
  299.                 }
  300. </style>

此时编译运行可以看到下面的页面，由于还没有开发子页面，所以只显示主页和菜单： 

添加模拟的后端API

这里模拟用户管理的功能。为.net开发，具体的开发流程不在赘述。 
UserInfo.cs

 
 
  1. public class UserInfo
  2. {
  3.     public string uuid { get; set; }
  4.     public string login_name { get; set; }
  5.     public string real_name { get; set; }
  6.     public string email { get; set; }
  7.     public string birthday { get; set; }
  8.     public int age { get; set; }
  9. }

UserInfoRepository.cs

 
 
  1. public class UserInfoRepository
  2. {
  3.     static List<UserInfo> db_users = new List<UserInfo>() {
  5.     };
  7.     public static IList<UserInfo> LoadAll() {
  8.         return db_users;
  9.     }
  10.     public static string Insert(UserInfo u)
  11.     {
  12.         u.uuid = Guid.NewGuid().ToString();
  13.         db_users.Add(u);
  14.         return u.uuid;
  15.     }
  16.     public static string Update(UserInfo u)
  17.     {
  18.         db_users.Remove(db_users.Where(m => m.uuid.Equals(u.uuid)).FirstOrDefault());
  19.         db_users.Add(u);
  20.         return u.uuid;
  21.     }
  22.     public static UserInfo Get(string uuid) {
  23.         return db_users.Where(m=>m.uuid.Equals(uuid)).FirstOrDefault();
  24.     }
  25.     public static void Delete(string uuid)
  26.     {
  27.         var u = db_users.Where(m => m.uuid.Equals(uuid)).FirstOrDefault();
  28.         db_users.Remove(u);
  29.     }
  31. }

UserController.cs

 
 
  1. [Route("api/[controller]")]
  2. public class UsersController : Controller
  3. {
  4.     [HttpGet]
  5.     public string Get()
  6.     {
  7.         return JsonConvert.SerializeObject(UserInfoRepository.LoadAll());
  8.     }
  10.     [HttpGet("{uuid}")]
  11.     public string Get(string uuid)
  12.     {
  13.         return JsonConvert.SerializeObject(UserInfoRepository.Get(uuid));
  14.     }
  16.     [HttpGet("p/")]
  17.     public string Get(string name, int page = 1, int pagesize = 20)
  18.     {
  19.         long count = 0;
  20.         var list = UserInfoRepository.LoadAll();
  21.         count = list.Count;
  22.         var obj = new
  23.         {
  24.             total = count,
  25.             list = list.Where(m => m.real_name.Equals(name)).Skip((page - 1) * pagesize).Take(pagesize)
  26.         };
  27.         return JsonConvert.SerializeObject(obj);
  28.     }
  30.     [HttpPost]
  31.     public void Post([FromBody]UserInfo user)
  32.     {
  33.         UserInfoRepository.Insert(user);
  34.     }
  36.     [HttpPut]
  37.     public void Put([FromBody]UserInfo user)
  38.     {
  39.         UserInfoRepository.Update(user);
  40.     }
  42.     [HttpDelete("{uuid}")]
  43.     public void Delete(string uuid)
  44.     {
  45.         UserInfoRepository.Delete(uuid);
  46.     }
  47. }

添加列表页面

添加内容包括，users.vue页面、路由以及将登录后的默认页面修改为users 
users.vue

 
 
  1. <template>
  2.     <section>
  3.         <!--工具条-->
  4.         <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
  5.             <el-form :inline="true" :model="filters">
  6.                 <el-form-item>
  7.                     <el-input v-model="filters.name" placeholder="姓名"></el-input>
  8.                 </el-form-item>
  9.                 <el-form-item>
  10.                     <el-button type="primary" v-on:click="search">查询</el-button>
  11.                 </el-form-item>
  12.                 <el-form-item>
  13.                     <el-button type="success" v-on:click="add">添加</el-button>
  14.                 </el-form-item>
  15.             </el-form>
  16.         </el-col>
  17.         <!--列表-->
  18.         <el-table :data="infos" highlight-current-row v-loading="listLoading" style="width: 100%;">
  19.             <el-table-column type="selection" width="55">
  20.             </el-table-column>
  21.             <el-table-column type="index" width="60">
  22.             </el-table-column>
  23.             <el-table-column prop="login_name" label="登录名" sortable>
  24.             </el-table-column>
  25.             <el-table-column prop="real_name" label="真实姓名" sortable>
  26.             </el-table-column>
  27.             <el-table-column prop="email" label="邮箱" sortable>
  28.             </el-table-column>
  29.             <el-table-column prop="birthday" label="生日" sortable>
  30.             </el-table-column>
  31.             <el-table-column prop="age" label="年龄" sortable>
  32.             </el-table-column>
  33.             <el-table-column label="操作" width="150">
  34.                 <template scope="scope">
  35.                     <el-button type="warning" size="small" @click="edit(scope.$index, scope.row)">编辑</el-button>
  36.                     <el-button type="danger" size="small" @click="del(scope.$index, scope.row)">删除</el-button>
  37.                 </template>
  38.             </el-table-column>
  39.         </el-table>
  41.         <el-col :span="24" class="toolbar">
  42.             <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:left;"></el-pagination>
  43.         </el-col>
  44.     </section>
  45. </template>
  46. <script>
  47.     import ElCol from "element-ui/packages/col/src/col";
  48.     export default {
  49.         components: {ElCol}, data(){
  50.             return {
  51.                 filters:{
  52.                     name:'',
  53.                 },
  54.                 infos:[],
  55.                 listLoading: false,
  56.                 page:1,
  57.                 total:0
  58.             };
  59.         },
  60.         methods:{
  61.                 search:function(){
  62.                     var _self =this;
  63.                     _self.listLoading=true;
  64.                     this.$http.get('/api/users/s',{
  65.                         params:{
  66.                             name:_self.filters.name,
  67.                             page:_self.page,
  68.                             pagesize:10
  69.                         }
  70.                     }).then((response)=>{
  71.                         _self.infos=response.data.list;
  72.                         _self.total=response.data.total;
  73.                         _self.listLoading=false;
  74.                     },(response)=>{
  76.                     }).catch((response)=>{});
  78.                 },
  79.                 add:function(){
  80.                     this.$router.push('/useradd')
  81.                 },
  82.                 edit:function(index,row){
  83.                     this.$router.push(
  84.                         { path: '/useradd', query: { uuid: row.uuid }}
  85.                     )
  86.                 },
  87.                 del:function(index,row){
  88.                     var _self =this;
  89.                     this.$confirm('确定删除吗?', '提示', {
  90.                         confirmButtonText: '确定',
  91.                         cancelButtonText: '取消',
  92.                         type: 'warning'
  93.                     }).then(() => {
  94.                         _self.$http.delete('/api/users/'+row.Uuid).then((res)=>{
  95.                             _self.search();
  96.                             _self.$message({
  97.                                 type: 'success',
  98.                                 message: '删除成功!'
  99.                             });
  100.                         },(res)=>{
  101.                             _self.$message({
  102.                                 type: 'srror',
  103.                                 message: '删除失败!'
  104.                             });
  105.                         }).catch();
  109.                     });
  112.                 },
  113.                 handleCurrentChange:function(p){
  114.                     this.page = p;
  115.                     this.search();
  116.                 }
  117.         },
  118.         mounted() {
  119.             this.search();
  120.         }
  121.     }
  122. </script>

添加路由，在系统管理的children下添加users

 
 
  1. {
  2.     path: '/',
  3.     component: Home,
  4.     name: '系统管理',
  5.     iconCls: 'el-icon-setting',//图标样式class
  6.     children: [
  7.         {path: '/users', component: Users, name: '用户管理' }
  8.     ]
  9. }

同样的方式增加用户添加和编辑页面，完成用户管理小模块。

总结

我们完成了在.net core下基于vue开发单页应用，这种方法实际上是利用webpack的打包功能，编译时将应用打包好，.net应用的cshtml页面再引用已打包的js文件。方案缺陷之一为：每次修改页面都需要重新build，不能同使用Node开发时实时预览页面，在实际的项目中可能并不会使用这种方式，仅供折腾。下面附上源码地址： 
https://github.com/wenjq0911/simple.git

源博客地址使用的leanote，地址在此  http://blog.leanote.com/post/wenjq0911@gmail.com

# vue.js
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue