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

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

"app"> "app-title">{{ message }} "[classA,classB]">{{ messageComputed }} "app-list">
  • {{ listItem.text }}
复制代码

安装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"> 复制代码



    推荐阅读