一、首先使用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开发后台管理系统项目教程的更多相关文章

  1. vue Cli 按需引入Element UI 和全局引用Element UI

    全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...

  2. 如何在 Vite 中使用 Element UI + Vue 3

    在上篇文章<2021新年 Vue3.0 + Element UI 尝鲜小记>里,我们尝试使用了 Vue CLI 创建 Vue 3 + Element UI 的项目,而 Vue CLI 实际 ...

  3. 2021新年 Vue3.0 + Element UI 尝鲜小记

    2021年,又是新的一年,Vue 已经发布 3.0 版本,最好用的 UI 组件库 Element UI 也发布了适配 Vue3.0 的新版本,是时候开始学习一下这两个新技术. 本文主要记录了使用 Vu ...

  4. vue开发后台管理系统小结

    最近工作需要用vue开发了后台管理系统,由于是第一次开发后台管理系统,中间也遇到了一些坑,想在这里做个总结,也算是对于自己工作的一个肯定.我们金融性质的网站所以就不将代码贴出来哈 一.项目概述 首先工 ...

  5. vue2.0 + Element UI + axios实现表格分页

    注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...

  6. Vue(十八)Element UI

    Elment UI 1. 简介 Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速搭建网站,提高开发效率 ElementUI PC端 MintUI 移动端 [官网](http ...

  7. Vue 基于node npm & vue-cli & element UI创建vue单页应用

    基于node npm & vue-cli & element UI创建vue单页应用 开发环境   Win 10   node-v10.15.3-x64.msi 下载地址: https ...

  8. .Net Core,VUE,VS Code,Sql Sugar,Element UI学习笔记

    1..Net Core的目的是跨平台,并主要目标是作为服务端开发使用.从3.0开始,引入了Winfrom和WPF. 2..Net Core可以引用.Net Framework生成的dll和exe,不限 ...

  9. vue+element 构建的后台管理系统项目(1)新建项目

    1.运行 vue init webpack demo   这里的demo是你项目的名字 2.npm run dev 查看项目启动效果 3.安装Element cd 项目 cmd  运行 npm i e ...

随机推荐

  1. TCP概述\三次握手四次挥手\报文首部,常用熟知端口号

    06.26自我总结 1.TCP概述 TCP把连接作为最基本的对象,每一条TCP连接都有两个端点,这种端点我们叫作套接字(socket),它的定义为端口号拼接到IP地址即构成了套接字,例如,若IP地址为 ...

  2. Spark学习之RDD

    RDD概述 什么是RDD RDD(Resilient Distributed Dataset)叫做弹性分布式数据集,是Spark中最基本的数据抽象,它代表一个不可变.可分区.里面的元素可并行计算的集合 ...

  3. TP框架基础(四)----添加数据

    [数据添加] add() 该方法返回被添加的新记录的主键id值 两种方式实现数据添加 1. 数组方式数据添加 $goods = D(“Goods”); $arr = array(‘goods_name ...

  4. HTML--网页练习--(360导航首页的一部分)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. linux初学者-文件的归档和传输

      1.文件归档 因为linux系统都是以文件的形式存在,所以在处理文件时有时候因为文件太多导致传输速度慢等问题,为了提高方便并且提高效率,常把文件归档,文件归档就是把多个文件变成一个归档文件. 文件 ...

  6. 程序员的长安十二时辰:Java实现从Google oauth2.0认证调用谷歌内部api

    最近公司在做一个app购买的功能,主要思路就是客户在app上购买套餐以后,Google自动推送消息到Java后端,然后Java后端通过订单的token获取订单信息,保存到数据库. Java后端要获取订 ...

  7. Go语言圣经习题练习_1.7. Web服务

    练习 1.12: 修改Lissajour服务,从URL读取变量,比如你可以访问 http://localhost:8000/?cycles=20 这个URL,这样访问可以将程序里的cycles默认的5 ...

  8. [ PyQt入门教程 ] PyQt5环境搭建和配置

    PyQt入门系列教程主要目的是希望通过该系列课程学习,可以使用PyQt5工具快速实现简单的界面开发,包括界面设计.布局管理以及业务逻辑实现(信号与槽).简单说就是可以使用PyQt5工具快速画一个控件摆 ...

  9. C++判断图像中一点是否在矩形中

    需要判断出四条之间组成的矩形的范围,其中矩形的边缘可能是倾斜不平行于x或者y轴. 考虑和很久,参考博客http://blog.csdn.net/dapengbusi/article/details/5 ...

  10. 模块购物商城和ATM机代码:

    http://outofmemory.cn/python/video/let-us-python/ python为程序员服务  快来加入群[python爬虫交流群](群号570070796),发现精彩 ...