一、首先使用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. python面向对象编程小程序- 选课系统

    选课系统 花了一晚上写的,可能还存在不足 1.程序框架 2.文件夹建立 D:/选课系统 |___api | |___common_api.py |___bil | |___common.py |___ ...

  2. [剑指offer] 3. 从头到尾打印链表

    题目描述 输入一个链表,按链表值从尾到头的顺序返回一个ArrayList. 思路: 利用容器,遍历一遍加入到一个新容器里,然后反置输出. vector 用 reverse stack 则直接一个个出栈 ...

  3. [leetcode]914. X of a Kind in a Deck of Cards (easy)

    原题 题目原意可转换为 两组有大于等于2的公因数 /** * @param {number[]} deck * @return {boolean} */ var hasGroupsSizeX = fu ...

  4. linux初学者-swap分区篇

    linux初学者-swap分区篇 swap是虚拟内存,是在硬盘中分区一块区域,当内存占满但是又急迫需要时临时当作内存使用,使用效率低于内存.本文将对linux系统中swap分区的建立做一个简要介绍. ...

  5. Android Studio电脑不支持HAXM的解决办法

    Intel HAXM is required to run this AVD. Your CPU does not support required features (VT-x or SVM). U ...

  6. 在ts+vue中实现前端批量下载打包二维码

    ---恢复内容开始--- 一.插件安装 首先是插件的安装与引入,这里我们用的是qrcode的这个插件,直接使用npm install qrcodejs2安装即可,但是这里要注意,如果你用的是ts进行开 ...

  7. VIM常用命令速查(转)

  8. 关于HTML的引入CSS文件问题

    一 html代码引用外部css文件时若css文件在本文件的父目录下的其他目录下,可使用绝对路径.此时路径要写为  “ ../ ”形式,如在tomcat下建立一个test文件,在该文件中建立两个文件 夹 ...

  9. java类加载器-Bootstrap、 ExtClassLoader、 AppClassLoader的关系

    1. 简单介绍 Bootstrap. ExtClassLoader.  AppClassLoader是java最根正苗红的类加载器. Bootstrap是本地代码编写的(例如C), ExtClassL ...

  10. JVM(二):画骨

    ### 概述 我们首先来认识一下`JVM`的运行时数据区域,如果说`JVM`是一个人,那么运行时数据区域就是这个人的骨架,它支撑着JVM的运行,所以我们先来学习一下运行时数据区域的分类和简单介绍. # ...