一、首先使用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. C#3.0新增功能06 对象和集合初始值设定项

    连载目录    [已更新最新开发文章,点击查看详细] 使用 C# 可以在单条语句中实例化对象或集合并执行成员分配. 对象初始值设定项 使用对象初始值设定项,你可以在创建对象时向对象的任何可访问字段或属 ...

  2. python虚拟环境管理 Pipenv 使用说明

    安装 pip install pipenv 检查是否安装成功 pipenv --version 创建虚拟环境(在工程文件夹下) pipenv install 默认下,Pipenv统一管理所有虚拟环境 ...

  3. [leetcode] 559. Maximum Depth of N-ary Tree (easy)

    原题链接 思路: 简单bfs class Solution { public: int maxDepth(Node *root) { int depth = 0; if (root == NULL) ...

  4. [翻译] .NET Core 3.0 Preview 7 发布

    原文: Announcing .NET Core 3.0 Preview 7 今天,我们宣布推出 .NET Core 3.0 Preview 7 .我们的工作已经从创建新功能过渡到打磨版本.预计剩余的 ...

  5. Windows环境下main()函数传入参数

    最近几天在写一个模仿windows自带的ping程序,也从网上找过一些源码,但大都需要向主函数main中传入参数,这里简单总结一下向主函数中传参的方法. 方法一:项目->属性->调试-&g ...

  6. python requests、xpath爬虫增加博客访问量

    这是一个分析IP代理网站,通过代理网站提供的ip去访问CSDN博客,达到以不同ip访同一博客的目的,以娱乐为主,大家可以去玩一下. 首先,准备工作,设置User-Agent: #1.headers h ...

  7. 重复造轮子系列——基于FastReport设计打印模板实现桌面端WPF套打和商超POS高度自适应小票打印

    重复造轮子系列——基于FastReport设计打印模板实现桌面端WPF套打和商超POS高度自适应小票打印 一.引言 桌面端系统经常需要对接各种硬件设备,比如扫描器.读卡器.打印机等. 这里介绍下桌面端 ...

  8. 使用secureCRT上传下载

    secureCRT 的 下载 http://pan.baidu.com/s/1c1Mz1ks 下载完成后,输入yum install lrzsz,安装这个东西, 然后就可以直接在secureCRT中输 ...

  9. 关于object对象转换为int类型

    注意:不能强制转换!!! Object a; int b = Integer.parseInt(String.valueOf(a));

  10. 【Android】Genymotion 模拟器 Unable to create virtual device

    安装 Genymotion 模拟器的时候报了这个错误,如下: 后来找到了解决方法,见下图: 在 Setting -> Network, 勾选 Use HTTP Proxy, HTTP Proxy ...