一、首先使用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. Spark学习之RDD

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

  2. TinycoreLinux的安装使用

    下载 http://www.tinycorelinux.net/7.x/x86_64/release/ distribution_files/ 05-Apr-2016 07:29 - src/ 24- ...

  3. c++ 动态规划(数塔)

    c++ 动态规划(dp) 题目描述 观察下面的数塔.写一个程序查找从最高点到底部任意位置结束的路径,使路径经过数字的和最大. 每一步可以从当前点走到左下角的点,也可以到达右下角的点. 输入 5 13 ...

  4. 校园表白墙、微信表白墙、校园墙 微信小程序 JAVA 开发记录与分享

    目录 最新版表白墙博客地址 1.微信小程序前台展示 2.功能介绍 3.后台管理 4.后端语言采用 JAVA 开发 5.体验此微信小程序 扫描下方二维码 6.如何联系我或需要源码进行联系 最新版表白墙博 ...

  5. 使用腾讯云提供的针对Nuget包管理器的缓存加速服务

    继阿里巴巴开源镜像站(https://opsx.alibaba.com/).华为云镜像站点(https://mirrors.huaweicloud.com/ )之后,腾讯也已于近日上线了类似的服务,官 ...

  6. 【iOS】The filename 未命名.ipa in the package contains an invalid character(s)

    提交 APP 到苹果官网审核时遇到了这个问题,如图: 其实就是不支持中文,随便换个英文名就行了. 参考:http://blog.csdn.net/u011439689/article/details/ ...

  7. 命令用法习题,yum仓库的创建 chapter02 - 03 作业

    1.  分别用cat \tac\nl三个命令查看文件/etc/ssh/sshd_config文件中的内容,并用自己的话总计出这三个文档操作命令的不同之处? [root@localhost /]# ca ...

  8. 浅谈NodeJS多进程服务架构基本原理

    阅读目录 一:nodejs进程进化及多进程架构原理 二:node中child_process模块实现多进程 三:父子进程间如何通信? 四:理解cluster集群 回到顶部 一:nodejs进程进化及多 ...

  9. Activiti6系列(5)- 核心API

    前言 本来想把<疯狂工作流讲义-activiti6.0>这本书里面的实例拿过来,但是这本书我看完后,认为里面编写的activiti6的核心API代码片段不是很清晰,有不少需要雕琢的地方才好 ...

  10. java 学习路线、java 入门、java自学、java 教程

    以前学习知识都是用到什么学什么,不是很系统.今天看到一个网站感觉挺不错的,分享给大家. 这个页面是学习路线功能的简介,如下图 ​ 点击选择学习路线 ​ 进入后可以选择循序渐进或者由终至始 ​ 上图标出 ...