来自后端对 vue+elementUI 的快速学习

Vue

作为一个后端，学习起来还是有点吃力，项目有用，还得硬着头皮学

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

在官网学习了一些常用的用法，然后想当然的就去找项目跟着学了，第一个看的项目是vue-element-admin，发现无字天书一般看不懂

后了解到，这是由vue-cli脚手架生成的，据同事分析，vue-cli是类似于一个vue运行环境的东西，故只能先学一下用vue-cli搭建下项目学习

npm install --global vue-cli

vue init webpack vue-demo

//安装所需要的模块
npm i axios vuex vue-router –save 

创建后的目录地址

官网和网上普遍项目的语法差很多，而我项目要使用的，也是vue-cli脚手架这种，所以为了赶进度，我决定用我已有的官网vue知识，强行去看懂网上的项目，并写出自己的demo

官网上有这么一个demo

官方示例代码：

  {{ tab }}

  
    
  

 

Vue.component('tab-posts', { 
  data: function () {
  	return {
      posts: [
        { 
        	id: 1, 
          title: 'Cat Ipsum',
          content: '
Dont wait for the storm to pass。。。
'
        },
        { 
        	id: 2, 
          title: 'Hipster Ipsum',
          content: '
Bushwick blue bottle scenester helvetica ugh。。。
'
        },
        { 
        	id: 3, 
          title: 'Cupcake Ipsum',
          content: '
Icing dessert soufflé lollipop chocolate 。。。
'
        }
      ],
      selectedPost: null
    }
  },
	template: `
  	

      

        

          {{ post.title }}
        
      
      

      	

          
{{ selectedPost.title }}
          

        
        
          Click on a blog title to the left to view it.
        
      
    
  `
})

Vue.component('tab-archive', { 
	template: '
Archive component
' 
})

new Vue({
  el: '#dynamic-component-demo',
  data: {
    currentTab: 'Posts',
    tabs: ['Posts', 'Archive']
  },
  computed: {
    currentTabComponent: function () {
      return 'tab-' + this.currentTab.toLowerCase()
    }
  }
})

css代码省略

用vue-cli写出来：

首先根据组件的思想，拆分出两个组件，和一个demo页面

demo.vue

 tab-posts.vue 

tab-archive.vue

vue初识

vue给我的感觉，就是万物皆为组件合成，所以要用好vue，就要写好组件。

ElementUI

elementUI作为与vue兼容组好的UI框架，我毫不犹豫用它写起了自己的demo

引入elementui

在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

实际上没什么好说的，照着官网开发就是了 http://element-cn.eleme.io

开发通用表格组件

table1.vue

 

这里是简单由父组件向子组件传递一个表头的数据（可以 根据需求进行改造）

代码：github地址