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 ...
随机推荐
- python 2.7 - 3.5 升级之路 (二) : 语法与类库升级
背景 在上一篇博文中,我们为升级python 2 -> 3已经做了一些准备.在这篇中,我们将针对语法与类库这两个方面进行讨论. 关于语法 1. print 在python3中, print 已经 ...
- Android拨打电话权限总结
android在6.0和6.0以上拨打电话的权限声明 /** * 打电话 * * @param phoneNumber */ protected void startCallPhone(String ...
- Java程序员注意——审查Java代码的六种常见错误
代码审查是消灭Bug最重要的方法之一,这些审查在大多数时候都特别奏效.由于代码审查本身所针对的对象,就是俯瞰整个代码在测试过程中的问题和Bug.并且,代码审查对消除一些特别细节的错误大有裨益,尤其是那 ...
- X-Admin&ABP框架开发-消息通知
业务型网站使用过程中,消息通知是一个不可或缺的功能,采用站内通知.短信通知.邮件通知.微信通知等等各种方式都有,ABP框架对这部分工作已经封装的很好了,站在巨人的肩膀上,一览全貌,带来的就是心情舒畅. ...
- python正则-re的使用
今天在刷题的时候用到了正则,用的过程中就感觉有点不太熟练了,很久没有用正则都有点忘了.所以现在呢,我们就一起来review一下python中正则模块re的用法吧. 今天是review,所以一些基础的概 ...
- SpringBoot Admin 使用指南
什么是 SpringBoot Admin? Spring Boot Admin 是一个管理和监控你的 Spring Boot 应用程序的应用程序.这些应用程序通过 Spring Boot Admin ...
- el-upload自定义上传文件,并携带其余参数,且action不报错
用el-upload组件自定义上传按钮,并携带其余参数,且必传参数action 不报错 <template> <el-col :span="6" :mode=&q ...
- IIS网站服务器性能优化攻略
Windows Server自带的互联网信息服务器(Internet Information Server,IIS)是架设网站服务器的常用工具,它是一个既简单而又麻烦的东西,新手都可以使用IIS架设一 ...
- eclipse Mac 下补全代码
1. 每次输入都自动提示 点击 Eclipse,使其成为第一响应者,preferences->Java->Editor->Content Assist再右下角 Auto activa ...
- Codeforces Round #192 (Div. 2) (330B) B.Road Construction
题意: 要在N个城市之间修建道路,使得任意两个城市都可以到达,而且不超过两条路,还有,有些城市之间是不能修建道路的. 思路: 要将N个城市全部相连,刚开始以为是最小生成树的问题,其实就是一道简单的题目 ...