ElementUI安装

正式开始

1. 根据官方指引，构建项目框架

    # 安装vue
    $ npm install vue@2.1.6
    # 全局安装 vue-cli
    $ npm install --global vue-cli
    # 创建一个基于 webpack 模板的新项目my-project
    $ vue init webpack my-project
    # 进入项目目录
    $ cd my-project
    # 安装依赖，走你
    $ npm install
    # 运行项目
    $ npm run dev

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

normal.png

3. 根据<a href="#content ">项目结构</a>,构建项目目录

menu.png

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

4. 搭建项目的首页

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

后台管理系统封面.png

4.1 安装element-ui

  $ npm i element-ui@1.0.9

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

4.2 引入element-ui

在main.js引入element-ui，然后就可以在其他任何页面中使用了

    import Element from 'element-ui'
    import 'element-ui/lib/theme-default/index.css'
    Vue.use(Element)

作者：拯救地球一号
链接：http://www.jianshu.com/p/d87d7140944e
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。