vue-cli+vue 2.0+element-ui+vue-router+echarts.js开发后台管理系统项目教程
一、首先使用npm创建vue项目框架:
1、安装vue-cli: $ npm install --global vue-cli
2、初始化项目:$ npm init webpack 项目名
3、在项目目录下安装element-ui依赖:
$ npm i element-ui -S
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
4、引入echarts.js图表库:
$ npm install echarts --save
import echarts from 'echarts'
Vue.prototype.$echarts=echarts
5、开始创建项目
个人创建的项目展示地址:GitHub地址:https://github.com/HLHAOGH/myrepository/tree/HLHAOGH-patch-1
6、系统部分截图:
vue-cli+vue 2.0+element-ui+vue-router+echarts.js开发后台管理系统项目教程的更多相关文章
- vue Cli 按需引入Element UI 和全局引用Element UI
全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...
- 如何在 Vite 中使用 Element UI + Vue 3
在上篇文章<2021新年 Vue3.0 + Element UI 尝鲜小记>里,我们尝试使用了 Vue CLI 创建 Vue 3 + Element UI 的项目,而 Vue CLI 实际 ...
- 2021新年 Vue3.0 + Element UI 尝鲜小记
2021年,又是新的一年,Vue 已经发布 3.0 版本,最好用的 UI 组件库 Element UI 也发布了适配 Vue3.0 的新版本,是时候开始学习一下这两个新技术. 本文主要记录了使用 Vu ...
- vue开发后台管理系统小结
最近工作需要用vue开发了后台管理系统,由于是第一次开发后台管理系统,中间也遇到了一些坑,想在这里做个总结,也算是对于自己工作的一个肯定.我们金融性质的网站所以就不将代码贴出来哈 一.项目概述 首先工 ...
- vue2.0 + Element UI + axios实现表格分页
注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...
- Vue(十八)Element UI
Elment UI 1. 简介 Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速搭建网站,提高开发效率 ElementUI PC端 MintUI 移动端 [官网](http ...
- Vue 基于node npm & vue-cli & element UI创建vue单页应用
基于node npm & vue-cli & element UI创建vue单页应用 开发环境 Win 10 node-v10.15.3-x64.msi 下载地址: https ...
- .Net Core,VUE,VS Code,Sql Sugar,Element UI学习笔记
1..Net Core的目的是跨平台,并主要目标是作为服务端开发使用.从3.0开始,引入了Winfrom和WPF. 2..Net Core可以引用.Net Framework生成的dll和exe,不限 ...
- vue+element 构建的后台管理系统项目(1)新建项目
1.运行 vue init webpack demo 这里的demo是你项目的名字 2.npm run dev 查看项目启动效果 3.安装Element cd 项目 cmd 运行 npm i e ...
随机推荐
- sqlserver 2008 无法使用特殊主体‘sa’,错误15405
今天莫名其妙的遇到一个问题,还原了几个数据库到新的服务器上,突然发现sa用户对某几个数据库没有权限(用户映射): 我手工勾选相应数据库的db_owner权限之后,报错:无法使用特殊主体'sa',错误1 ...
- Android CHM文件阅读器
CHM格式是1998年微软推出的基于HTML文件特性的帮助文件系统.以替代早先的winHelp帮助系统,它也是一种超文本标识语言.在Windows 98中把CHM类型文件称作“已编译的HTML帮助文件 ...
- 消费端如何保证消息队列MQ的有序消费
消息无序产生的原因 消息队列,既然是队列就能保证消息在进入队列,以及出队列的时候保证消息的有序性,显然这是在消息的生产端(Producer),但是往往在生产环境中有多个消息的消费端(Consumer) ...
- 在 Windows 上搭建 PHP 网站
PHP(全称:PHP:Hypertext Preprocessor,即“PHP:超文本预处理器”)是一种开源的通用计算机脚本语言,尤其适用于网络开发并可嵌入HTML中使用.PHP的语法借鉴吸收C语言. ...
- 「玩转Python」打造十万博文爬虫篇
前言 这里以爬取博客园文章为例,仅供学习参考,某些AD满天飞的网站太浪费爬虫的感情了. 爬取 使用 BeautifulSoup 获取博文 通过 html2text 将 Html 转 Markdown ...
- 基于Spark Grahpx+Neo4j 实现用户社群发现
上一篇文章知识图谱在大数据中的应用我们介绍了知识图谱的一些概念和应用场景,今天我们就来看一个具体的应用案例了解下知识图谱的应用.用户增长对于一个APP的生存起到了至关重要的作用,没有持续的用户增长,再 ...
- 模拟器无Back、Menu等键
问题如图所示: 解决方法: 1. 打开Android Virtual Device (AVD) Manager --> 选择模拟器,并点击edit --> 勾选KeyBoard中的选项,并 ...
- 【Android】Failed to convert @drawable/picture into a drawable
刚使用 eclipse 遇到了这个问题,图片的效果未显示出来,上网查找后发现这其实不算是问题:重启下工程或 eclipse 就行了. PS: 直接运行工程也可以,不影响效果.
- Unity基于NGUI的简单并可直接使用的虚拟摇杆实现(一)
可能大家都听说过大名鼎鼎的easytouch,然而easytouch是基于UGUI的,两种不同的UI混用,可能会造成项目管理的混乱,并且可能会出现各种幺蛾子,比如事件传递互相扰乱的问题. 于是就想找一 ...
- Thrift框架快速入门
Thrift介绍1.什么是thrift?thrift早期由facebook内部团队开发,主要用于实现跨语言间的方法调用,属于远程方法调用的一种,后开源纳入apache中,成为了apache thrif ...