使用vue.js2.0 + ElementUI开发后台管理系统详细教程一

@H_404_0@1. 根据<a target="_blank" href="https://vuefe.cn/v2/guide/installation.html"&gt;官方指引,构建项目框架


<div class="jb51code">
<pre class="brush:js;">

安装vue

$ cnpm install [email protected]

全局安装 vue-cli

$ cnpm install --global vue-cli

创建一个基于 webpack 模板的新项目my-project

$ vue init webpack my-project

进入项目目录

$ cd my-project

安装依赖,走你

$ cnpm install

运行项目

$ cnpm run dev

2. 运行项目之后,会看到以下界面,恭喜你,项目环境搭建成功

normal.

3. 根据项目结构,构建项目目录

src/page/ -------------存放视图页面的目录 activeManage/ --------------------活动管理 index.vue ------------------------活动管理列表页 detail.vue ------------------------活动管理详情页 page1/2/3/4/5 -------------------分别对应:活动管理/报名管理/签到/数据统计/评价管理 activePublic/ -----------------------活动发布 index.vue -----------------------活动发布首页 step1/2/3/4 --------------------分别对应:步骤一/二/三/四

4. 搭建项目的首页

项目首页由顶部导航栏,左侧导航栏,中间内容区构成,如图

4.1 安装element-ui

建议固定vue和element-ui的版本,避免将来版本升级后产生冲突

4.2 引入element-ui

在app.vue引入element-ui,然后就可以在其他任何页面中使用了

<div class="jb51code">
<pre class="brush:ps;">
import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(Element)

4.3 使用element-ui

将app.vue改为以下内容

4.4 预览项目,看到如图所示页面,项目的首页就搭建好了

在下篇文章小编给大家介绍使用敬请关注!

@H_404_0@以上所述是小编给大家介绍的使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

相关文章

el-menu 有个属性 :default-active="curActive"...
基础用法1<el-inputv-model="input1"palcehode...
 1.安装element-uinpminstallelement-ui-S 2.在main.js中i...
layout布局通过基础的24分栏,可进行快速布局基础布局使用单...
 今天做一个选择年份的功能,直接调用了ElementUI里面的Dat...
  that.end 即为结束日期