基于Vue.js的后台管理系统组件开发

什么是Vue

Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

基本语法介绍

"app">  
  
"app-title">{{ message }} 
 
  
"[classA,classB]">{{ messageComputed }}

  type="text" v-model="message">
  
"app-list">  
      

          
"listItem in lists">
              {{ listItem.text }}
          
      
  
  "userFun" type="button" > 


复制代码

安装Vue

# 全局安装 vue-cli
$ npm install -g vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖
$ cd my-project
$ npm install
$ npm run dev
复制代码

组件开发

1. 在通过安装步骤操作之后生成的文件夹中找到src目录，新建一个components文件夹专门来管理我们的组件。
2. 在components文件夹中新建一个src文件夹来放置.vue结尾的文件，index.js（组件入口）

/*index.js*/
import Vue from 'vue'
import ChList from './src/list.vue';
export default ChList;
复制代码

/*src:list.vue*/


复制代码

1. 组件总入口

/*main.js*/
import Vue from 'vue'
import List from './components/ch-list'

new Vue({
  el: '#app',
  components: { List , Radio}
})
复制代码

1. 实际页面中调用组件

"app"> 
    '[{"ksname":"美术学类","mfz":1304},{"ksname":"美术学","mfz":130401},{"ksname":"绘画","mfz":130402},{"ksname":"雕塑","mfz":130403},{"ksname":"摄影","mfz":130404}]' list-item-name1="名称" list-item-name2="分值">
    
复制代码