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. 【记录】linux 常用命令梳理

    命令梳理 下载文件 [wget 是一个十分常用命令行下载工具,多数Linux发行版本都默认包含这个工具] wget -c [zip路径等] #断点续传,如果下载中断,那么连接恢复时会从上次断点开始下载 ...

  2. shell数组变量

  3. linux学习总结--linux100day(day1)

    写在前面:我是一名在学习linux的小学生,最近在学习python时,我的老师推荐了github上的一本教材“python100day”,100day里面的内容由浅入深,且都具备详细的例子,对于我这个 ...

  4. mysql-视图及索引简介

    一.视图的创建.作用及注意事项 1.创建:create view 视图名 as select 语句: 2.删除:drop view 视图名 3.作用: 数据库视图允许简化复杂查询 数据库视图有助于限制 ...

  5. Java 注解处理器

    在Android开发中常用到一些第三方注解框架来简化代码.加快开发,如ButterKnife,androidannotations. 虽然常会用到,但没研究过其生成代码的原理,趁年后不忙,又温习了注解 ...

  6. 几种任务调度的 Java 实现方法与比较(定时任务)(转)

    转自:http://blog.csdn.net/javafay/article/details/8031269 综观目前的 Web 应用,多数应用都具备任务调度的功能.本文由浅入深介绍了几种任务调度的 ...

  7. mysql查找字段空、不为空的方法总结

    1.不为空 Select * From table_name Where id<>'' Select * From table_name Where id!='' 2.为空 Select ...

  8. PHP FILTER_SANITIZE_EMAIL 过滤器

    定义和用法 FILTER_SANITIZE_EMAIL 过滤器删除字符串中所有非法的 e-mail 字符. 该过滤器允许所有的字母.数字以及 $-_.+!*'{}|^~[]`#%/?@&= N ...

  9. flutter duplicate symbol '_GetDirectoryOfType' in:

    ld: warning: directory not found for option '-F/Users//codingProject/vipidea-app/ios/Runner/SuperPla ...

  10. solidity代码

    http://www.tryblockchain.org/ 教你如何舒服的看solidity代码 最近智能合约随着区块链技术的发展越发收到广大技术人员的重视! 其中最被看好的以太坊就是一个提供智能合约 ...