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)新建项目的更多相关文章

  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. 下载文件时HttpServletResponse设置响应头的Content-Disposition属性

    Content-Disposition属性有两种类型 inline :将文件内容直接显示在页面 attachment:弹出对话框让用户下载 弹出对话框下载文件 resp.setHeader(" ...

  2. clip-path 加边框border

    最近些项目,需求是写一个箭头图案,想着就用clip-path来写,但是写到后来发现clip-path 无法加边框,最后用了个死办法写了出来,仅供参考 下图是设计图 如下是实现方案(就是写两层,外面一层 ...

  3. Java中super关键字的位置

    1.子类的构造函数如果要引用super的话,必须把super放在函数的首行. 例如: class Base  { Base()  {  System.out.println("Base&qu ...

  4. Apache Hadoop集群离线安装部署(二)——Spark-2.1.0 on Yarn安装

    Apache Hadoop集群离线安装部署(一)——Hadoop(HDFS.YARN.MR)安装:http://www.cnblogs.com/pojishou/p/6366542.html Apac ...

  5. Python 基础 4-1 字典入门

    引言 字典 是Python 内置的一种数据结构,它便于语义化表达一些结构数据,字典是开发中常用的一种数据结构 字典介绍 字典使用花括号 {} 或 dict 来创建,字典是可以嵌套使用的 字典是成对出现 ...

  6. Linux上的VirtualBox如何使用USB

    问题: VirtualBox设置中已经启用了"USB2.0(EHCI)控制器"选项,但是虚拟机中始终没有USB设备,右下角的状态也显示没有连接任何USB设备,看起来像是Virtua ...

  7. 例行性工作排程 (crontab)

    说白了,就是一些例行工作的日常执行的排序程序 Linux  工作排程的种类:  at,cron 鸟叔说,atd并不是在所有版本都是开启的,但是centos7默认是开启的 [root@localhost ...

  8. poj 2752 kmp的next数组

    题目大意: 求一个字符串中某一个既是前缀又是后缀的前缀的结尾下标: 基本思路: 从_next[len]开始找_next[_next[len]],再找_next[_next[_next[len]]],一 ...

  9. Windows添加右键新增.md文件

    因为习惯用Markdown来写文档, 所以常常需要新建.md文档,但由于Windows并不会自带把.md文档放入右键新建项中(像Word那样),所以方便起见,自己手动设置,其实就是把它写进Window ...

  10. rstrip

    ====== rstrip ====== Description Returns a copy of the string with trailing characters removed. Synt ...