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. LeetCode Array Easy 217. Contains Duplicate

    Description Given an array of integers, find if the array contains any duplicates. Your function sho ...

  2. svnadmin - Subversion 仓库管理工具

    SYNOPSIS 总览 svnadmin command /path/to/repos [options] [args] OVERVIEW 概述 Subversion 是一个版本控制系统,允许保存旧版 ...

  3. case ...esac判断 function方法 循环loop,while do done,until do done

    就类似于其他语言中的case语句 用法 要点 第一 开始结束  case  esac 正好相反 第二  每段程序段需要用  两个:号结束. 例: } in "hello") ech ...

  4. 2018-2019 ACM-ICPC, Asia Seoul Regional Contest K TV Show Game 2-sat

    题目传送门 题意: 有n个人,k盏灯,灯有红蓝两种颜色,每个人都猜了三种灯的颜色,问如何安排灯的颜色,使得每个人猜的灯至少有两个是对的. 思路: 很容易想到2-sat,但是显然枚举每个人猜对的情况是不 ...

  5. C# System.Windows.Forms.Panel

    UserControl 定义的界面 输出到panel 实现界面切换

  6. python操作pymysql

    #_author:来童星#date:2019/12/19import pymysql#1.打开数据库连接db=pymysql.connect('localhost','root','root','te ...

  7. 如何修改magento分类页面的产品的显示个数

    经常的有客户问,怎么修改分类页面的产品的个数 这个是magneto后台操作的设置问题 打开后台,在英文状态下: system-->configuration 进入后,点击catalog Prod ...

  8. fastDFS配置文件 fdfs_client.conf

    # connect timeout in seconds# default value is 30sconnect_timeout=30 # network timeout in seconds# d ...

  9. 编辑bbs文章 获取前端标题内容 和前端内容的方法

  10. ios获取软键盘完成事件

    ios获取软键盘完成事件,通过判断input的onBlur事件即可