vue+element 构建的后台管理系统项目(1)新建项目
1.运行 vue init webpack demo 这里的demo是你项目的名字
2.npm run dev
查看项目启动效果

3.安装Element
cd 项目
cmd 运行
npm i element-ui -S
4.在main.js 引入element
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip = false Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
注意这里有个坑
我本来引入的代码是
import 'element-ui/lib/theme-default/index.css'
npm 运行保错

通过修改为
import 'element-ui/lib/theme-chalk/index.css'
就运行成功
下面看看运行起来的效果

效果:

vue+element 构建的后台管理系统项目(1)新建项目的更多相关文章
- vue+element搭建的后台管理系统
最近工作不是很忙,自己在学习vue,在网上找了一个简单的项目练练手..... 这是本人的gitHub 上的项目地址:https://github.com/shixiaoyanyan/vue-admin ...
- 在微信框架模块中,基于Vue&Element前端的后台管理功能介绍
微信开发包括公众号.企业微信.微信小程序等方面的开发内容,需要对腾信的微信API接口进行封装:包括事件.菜单.订阅用户.多媒体文件.图文消息.消息群发.微信支付和企业红包.摇一摇设备.语义理解.微信小 ...
- Vue + Element UI 实现权限管理系统
Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html
- 基于VUE实现的新闻后台管理系统-一
基于VUE实现的新闻后台管理系统 前段时间拿到一个关于新闻后台的API,测试数据库使用SQLite,Restful服务是用Go写的,只要运行特定环境下的脚本(run.*)就会启动一个服务,依次后台为接 ...
- 基于electron+vue+element构建项目模板之【创建项目篇】
1.概述 electron:使用javascript.css.html构建跨平台的桌面应用程序 vue:数据驱动视图中的一款渐进式的javascript框架 element:基于vue的桌面端UI组件 ...
- 基于VUE实现的新闻后台管理系统-三
开始coding啦 ¶分析项目 根据展示效果我们可以分析出,Web页面有两个,一个用于登录,一个用于系统内容控制,我们分别将其命名为Login和Cms,然后进行路由配置. 在src/page下新建Lo ...
- vue中如何实现后台管理系统的权限控制
vuejs单页应用的权限管理实践 一.前言 在广告机项目中,角色的权限管理是卡了挺久的一个难点.首先我们确定的权限控制分为两大部分,其中根据粒的大小分的更细: 接口访问的权限控制 页面的权限控制 菜单 ...
- Vue + Element UI 实现权限管理系统 前端篇(十一):第三方图标库
使用第三方图标库 用过Elment的同鞋都知道,Element UI提供的字体图符少之又少,实在是不够用啊,幸好现在有不少丰富的第三方图标库可用,引入也不会很麻烦. Font Awesome Font ...
- Vue + Element UI 实现权限管理系统(第三方图标库)
使用第三方图标库 用过Elment的同鞋都知道,Element UI提供的字体图符少之又少,实在是不够用啊,幸好现在有不少丰富的第三方图标库可用,引入也不会很麻烦. Font Awesome Font ...
随机推荐
- 知识点整理01- 引用对象被子方法赋值后不改变;CheckBox 取消选择不可用问题
1. Class 实体是引用类型,但传入方法时是null的情况在子方法中不论怎么赋值当 FirstService.SetPerson(person,ref tempMsg); 执行后Person都是n ...
- 浅谈Java/Android下的注解
什么是注解 java.lang.annotation,接口 Annotation,在JDK5.0及以后版本引入. 注解是代码里的特殊标记,这些标记可以在编译.类加载.运行时被读取,并执行相应的处理.通 ...
- IDEA webapp文件夹不识别解决方案
使用IDEA 创建moudule 用的是的是maven archertype-quickstart ,自动生成并么有webapp目录,于是我从别的项目中拷贝了一个,发现webapp文件夹图标和普通文件 ...
- Spring Cloud服务保护
微服务虽然解决了传统单体式应用各个模块之间强耦合的缺点,但同时也引出了新问题,由于微服务各个服务之间是独立部署的,并且一般情况下一个服务往往会依赖多个其他服务,并且服务之间的调用更多的是依赖不稳定的网 ...
- vCenter 6.0 vsca 安装遇到的一些小问题
在安装vCenter 6.0 vsca的时候,安装插件到第二个的时候,会报出一个windows installer的错误.需要联系软件管理员或者技术支持的一个error. 经过多次的测试,我终于找到了 ...
- 多线程用this指针来传递参数(整理)
整理自CSDN的论坛中,地址:https://bbs.csdn.net/topics/390703249 1.不同的线程不是两个独立的程序:线程不是进程(process是你说的程序) 2.线程函数必须 ...
- elasticsearch依赖的jackson-jar包与jboss依赖的jackson-jar包“版本”冲突
elasticsearch依赖的jackson-jar包与jboss依赖的jackson-jar包“版本”冲突,导致elasticsearch相关功能在本地tomcat服务器正常,但是部署到jboss ...
- vue中watch简单使用
watch是一个对象,具有键值对:键指被监听的数据,值指处理方式. 值类型包括以下三个: 第一个handler:其值是一个回调函数.即监听到变化时应该执行的函数. 第二个是deep:其值是true或f ...
- fastDFS配置文件 fdfs_client.conf
# connect timeout in seconds# default value is 30sconnect_timeout=30 # network timeout in seconds# d ...
- Linux 软硬链接区别
一.“硬链接“和“软链接“ 链接的概念:链接简单说实际上是一种文件共享的方式,是 POSIX 中的概念,主流文件系统都支持链接文件. 链接的作用:可以将链接简单地理解为 Windows 中常见的快捷方 ...