1.运行 vue init webpack demo   这里的demo是你项目的名字

2.npm run dev

查看项目启动效果

3.安装Element

cd 项目

cmd  运行

npm i element-ui -S

4.在main.js  引入element

  1. // The Vue build version to load with the `import` command
  2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  3. import Vue from 'vue'
  4. import App from './App'
  5. import router from './router'
  6. import ElementUI from 'element-ui'
  7. import 'element-ui/lib/theme-chalk/index.css'
  8.  
  9. Vue.config.productionTip = false
  10.  
  11. Vue.use(ElementUI);
  12. /* eslint-disable no-new */
  13. new Vue({
  14. el: '#app',
  15. router,
  16. components: { App },
  17. template: '<App/>'
  18. })

  注意这里有个坑

我本来引入的代码是

  1. import 'element-ui/lib/theme-default/index.css'

  npm 运行保错

通过修改为

  1. import 'element-ui/lib/theme-chalk/index.css'

  就运行成功

下面看看运行起来的效果

效果:

vue+element 构建的后台管理系统项目(1)新建项目的更多相关文章

  1. vue+element搭建的后台管理系统

    最近工作不是很忙,自己在学习vue,在网上找了一个简单的项目练练手..... 这是本人的gitHub 上的项目地址:https://github.com/shixiaoyanyan/vue-admin ...

  2. 在微信框架模块中,基于Vue&Element前端的后台管理功能介绍

    微信开发包括公众号.企业微信.微信小程序等方面的开发内容,需要对腾信的微信API接口进行封装:包括事件.菜单.订阅用户.多媒体文件.图文消息.消息群发.微信支付和企业红包.摇一摇设备.语义理解.微信小 ...

  3. Vue + Element UI 实现权限管理系统

    Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html

  4. 基于VUE实现的新闻后台管理系统-一

    基于VUE实现的新闻后台管理系统 前段时间拿到一个关于新闻后台的API,测试数据库使用SQLite,Restful服务是用Go写的,只要运行特定环境下的脚本(run.*)就会启动一个服务,依次后台为接 ...

  5. 基于electron+vue+element构建项目模板之【创建项目篇】

    1.概述 electron:使用javascript.css.html构建跨平台的桌面应用程序 vue:数据驱动视图中的一款渐进式的javascript框架 element:基于vue的桌面端UI组件 ...

  6. 基于VUE实现的新闻后台管理系统-三

    开始coding啦 ¶分析项目 根据展示效果我们可以分析出,Web页面有两个,一个用于登录,一个用于系统内容控制,我们分别将其命名为Login和Cms,然后进行路由配置. 在src/page下新建Lo ...

  7. vue中如何实现后台管理系统的权限控制

    vuejs单页应用的权限管理实践 一.前言 在广告机项目中,角色的权限管理是卡了挺久的一个难点.首先我们确定的权限控制分为两大部分,其中根据粒的大小分的更细: 接口访问的权限控制 页面的权限控制 菜单 ...

  8. Vue + Element UI 实现权限管理系统 前端篇(十一):第三方图标库

    使用第三方图标库 用过Elment的同鞋都知道,Element UI提供的字体图符少之又少,实在是不够用啊,幸好现在有不少丰富的第三方图标库可用,引入也不会很麻烦. Font Awesome Font ...

  9. Vue + Element UI 实现权限管理系统(第三方图标库)

    使用第三方图标库 用过Elment的同鞋都知道,Element UI提供的字体图符少之又少,实在是不够用啊,幸好现在有不少丰富的第三方图标库可用,引入也不会很麻烦. Font Awesome Font ...

随机推荐

  1. Elastic-Job分布式任务调度

    任务调度是指系统为了自动完成特定任务,在约定的特定时刻去执行任务的过程,有了任务调度即可解放更多的人力由系统自动去执行任务. 多线程方式实现: Timer方式实现: ScheduledExecutor ...

  2. javascript 中的函数

    /*   第二天   */ 函数 函数是js里最有趣的东西了,函数实际上就是对象,每个函数Function类型的实例,函数名实际上是指向函数对象的指针.不带圆括号的函数时访问函数的指针,带圆括号的是调 ...

  3. 关于Ring3层的注册表监控

    最近一直想做远程操作的注册表,将客户端的注册表发送到主控端,遇到两个问题: 1.不能每次点击TreeControl都是一次请求的发送,太浪费资源. 2.在客户端的注册表监控效果也不是很好.(驱动不稳定 ...

  4. python_django_celery的初步使用

    celery学习:http://docs.jinkan.org/docs/celery/ 什么是celery? Celery 是一个简单.灵活且可靠的,处理大量消息的分布式系统,并且提供维护这样一个系 ...

  5. 路由网关--spring cloud zuul

    路由网关--spring boot Zuul 1.为什么需要Zuul? Zuul Ribbon 以及 Eureka 相结合,可以实现智能路由和负载均衡的功能, Zuul 能够将请求流量按某种策略分发到 ...

  6. mysql 100%占用的解决

    早上客户反应,其网站无法访问,无限转圈 上服务器,查看磁盘空间df -h,内存使用率free -m,网络流量iftop均正常 然后使用top查看时,发现mysql的cpu使用率上升到200%. 解决过 ...

  7. vmware下搭建openwrt

    最近闲来无事,想研究下openwrt, 所以尝试着自己搭建一个来玩玩, 当然这里不是以源码编译的形式,那样太耗时. 首先官网下载已有的系统image,  路径如下 : https://archive. ...

  8. Windows cmd 打开面板

    { 打开控制面板的命令是:“control”  打开控制面板  命令: rundll32.exe shell32.dll,Control_RunDLL  结果: 显示控制面板窗口.  例子:  Cal ...

  9. 欧拉降幂,基本计算定理——cf615D

    用基本算数定理求约数和的思想来计算, 首先用pi,ci来表示第i个质数,指数为i,然后对于每个pi,pi^2...都有指数为mul{(c_1+1)(c_2+1)(c_i-1+1)(c_i+1+1).. ...

  10. AcWing 196. 质数距离(筛法+离散化)打卡

    给定两个整数L和U,你需要在闭区间[L,U]内找到距离最接近的两个相邻质数C1和C2(即C2-C1是最小的),如果存在相同距离的其他相邻质数对,则输出第一对. 同时,你还需要找到距离最远的两个相邻质数 ...