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. 出现异常: 非介入式客户端验证规则中的验证类型名称必须唯一。下列验证类型出现重复: required

    在将web.config文件中的<add key="ClientValidationEnabled" value="false" /> 设为fals ...

  2. aarch64 架构 交叉编译 tcpdump

    1. 下载 tcpdump 源码 地址 :http://www.tcpdump.org/    (4.9.2) tcpdump 依赖 libpcap  源码 地址 : http://www.tcpdu ...

  3. Hession实现远程通讯(基于Binary-RPC协议)

    一.开发工具 1.jdk1.6 64位 百度网盘地址:https://pan.baidu.com/s/1Zwqfmi20X4ANNswZzPMzXQ 提取码:k50r 2.apache-maven-3 ...

  4. Ecshop商品浏览历史样式修改方法

    想要修改ECSHOP的浏览历史样式,发现 history.lbi 中不能修改. 需要修改的文件:includes\lib_insert.php,找到函数:function insert_history ...

  5. SQL SELECT TOP, LIMIT, ROWNUM

    SQL SELECT TOP, LIMIT, ROWNUM SQL SELECT TOP 子句 SELECT TOP 子句用于指定要返回的记录数量. SELECT TOP子句在包含数千条记录的大型表上 ...

  6. linux IPC的信号量

    信号量相关函数原型 获得一个信号量ID #include <sys/types.h> #include <sys/ipc.h> #include <sys/sem.h&g ...

  7. JSON.NET与LINQ序列化示例教程

    1.手动创建JSON对象和数组 JSON格式主要包括对象和数组两种形式,在JSON.NET中分别用JArray和JObject表示,属性用JProperty表示,属性值用 JValue表示,这些对象都 ...

  8. 51nod-1515 明辨是非——并查集

    给n组操作,每组操作形式为x y p. 当p为1时,如果第x变量和第y个变量可以相等,则输出YES,并限制他们相等:否则输出NO,并忽略此次操作. 当p为0时,如果第x变量和第y个变量可以不相等,则输 ...

  9. AMS算法

    #include<stdio.h> #include<stdlib.h> #include<time.h> #define N 1000//采样点的个数 #defi ...

  10. CSS:CSS 边框

    ylbtech-CSS:CSS 边框 1.返回顶部 1. CSS 边框 CSS 边框属性 边框样式 边框样式属性指定要显示什么样的边界.  border-style属性用来定义边框的样式 border ...