Element UI 框架搭建

Element UI 框架搭建

1、webpack 全局安装

npm install -g webpack

2、淘宝镜像cnpm安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

3、vue脚手架全局安装 -- 用于生成vue模板

npm install -g vue-cli

4、使用脚手架构建vue项目 -- 一路回车就行了

vue init webpack

目前可用的模板介绍

browserify–全功能的Browserify + vueify,包括热加载,静态检测,单元测试。
browserify-simple–一个简易的Browserify + vueify,以便于快速开始。
webpack–全功能的Webpack + vueify,包括热加载,静态检测,单元测试。
webpack-simple–一个简易的Webpack + vueify,以便于快速开始。

5、element-ui安装

npm i element-ui

6、依赖安装,这里用cnpm安装,因为依赖太多不然,不然让你等的蛋疼 -- 会在项目中生成一个node_modules文件

cnpm install

大功告成,这里可以运行了

npm run dev

vue项目的构建到现在就算完成了,那么现在就引入element-ui组件模块

这里以radio组件为例

1、在\element-ui\src\components\新建个vue组件,组件名为radio

radio组件代码

<template>
  <el-radio-group v-model="radio2">
    <el-radio :label="3">备选项</el-radio>
    <el-radio :label="6">备选项</el-radio>
    <el-radio :label="9">备选项</el-radio>
  </el-radio-group>
</template>

<script>
  export default {
    data () {
      return {
        radio2: 3
      };
    }
  }
</script>

2、在element-ui\src\router.js中设置路由

import radio from ‘@/components/radio‘ //引入刚创建的组件
//设置路由
{
      path: ‘/radio‘,
      name: ‘radio‘,
      component: radio
}

3、在\element-ui\src\main.js中加入element-ui的js和css

import ElementUI from ‘element-ui‘ //element-ui的全部组件
import ‘element-ui/lib/theme-chalk/index.css‘//element-ui的css
Vue.use(ElementUI) //使用elementUI

大功告成,运行后的效果就是这个样子

总结:在使用初学vue脚手架时很容易出错,搞得很多人包括我自己都摸不着头脑。这里有个教训就是,报错要学会耐心的看调试模式下提示的错误,不懂就去百度,对于英语较为好的这里有比较大的好处,怎么提示错误就怎么解决错误,就是这么简单。

时间: 2024-11-05 18:40:42

Element UI 框架搭建的相关文章

UI框架搭建DAY1

分析:UI框架主要是为了用户(使用框架的程序猿)更快捷.方便地开发UI,UI框架的好处还在于解耦,使得程序更具有灵活性. UI框架的核心是窗口的管理,窗口管理的主要任务就是显示窗口和关闭窗口. 因为窗口的类型多样,比如弹出式窗口,固定位置窗口,隐藏其他窗口(打开这个窗口会覆盖整个屏幕),模态窗口等等. 这里我目前把窗口分为三大类型:普通窗口.弹出式窗口.隐藏其他窗口,而位置固定.是否模态作为窗口的属性. 1.为了更易于复用和拓展,我设计了一个基类BasePanel, NormalPanel, P

Vue框架Element UI教程(二)

原文:https://www.jianshu.com/p/1704b5935a8 [时间选择器] Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN github地址:https://github.com/ElemeFE/element 前一篇已经安装好了Element UI环境,现在开始来实际操作框架提供的一些组件的运用了. 在准备好以下文章里面的内容

前端随心记---------vuejs流行的UI框架

一:Element element ui框架的按钮组件,这款由饿了么前端开源的UI框架,一经面世,就收获大量程序员的芳心.在github 上更是高达29.8k的star早已说明一切.用于开发PC端的页面还是绰绰有余的.如果说你是用vue开发者,却没用过element UI,那你肯定不是合格的vue开发者. 文档地址:http://element-ui.cn 二:iview iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品.使用单文件的 Vue 组件化

新浪微博项目技术之一UI主框架搭建

一.项目整体框架搭建 二.UI主框架结构及知识点 1>.代码封装思想 封装前的代码:(四个标题需要重复写四次,重复代码较多) HomeViewController *HomeVC = [[HomeViewController alloc] init]; UINavigationController *HomeNV = [[UINavigationController alloc] initWithRootViewController:HomeVC]; //tabBarItem标题文字设置 Hom

从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件

一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页面: 技术博客风格: 详情页风格: 详情页留言风格: 1.3后台风格: 表格风格: 博客发布风格: 以上看到的系统页面是目前系统完成的风格,以后页面设计都参考这些页面风格. 二.使用前端web框架以及插件说明 2.1选择前端web框架,我找了很多框架,以前学过自学过bootstrap觉得对于没有前端

ASP.NET MVC搭建项目后台UI框架—7、统计报表

ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET MVC搭建项目后台UI框架—4.tab多页签支持 ASP.NET MVC搭建项目后台UI框架—5.Demo演示Controller和View的交互 ASP.NET MVC搭建项目后台UI框架—6.客户管理(添加.修改.查询.分页) ASP.NET MVC搭建项目后台UI框架—7.统计报表 本节,我将通

ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持

目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET MVC搭建项目后台UI框架—4.tab多页签支持 ASP.NET MVC搭建项目后台UI框架—5.Demo演示Controller和View的交互 在点击左侧菜单中的选项时,我希望有Extjs.EasyUI等中类似的tab页签功能,因为这样可以支持多个页面的浏览,有时候我们可能需要同时打开多个页

ASP.NET MVC搭建项目后台UI框架一

准备做一个新的项目,从网页设计师手中拿到了html静态页面(没有一行js),但是都一个个零散的界面,我需要做的是: 1.  把这些零散的html界面连接起来 2.  自己编写js或者jquery实现菜单效果 3.  把html页面集成在我们的MVC Razor视图中 本想着使用第三方的UI框架 如Jquery EasyUI.ExtJs.MiniUI等来搭建框架,但是上面要求必须做得和美工给的html页面样式一致,不能用这些比较复杂的UI框架.作为非前端工程师,我只有硬着头皮上了.经过差不多2天的

ASP.NET MVC搭建项目后台UI框架—2、菜单特效

目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 上一篇,已经把整个项目的框框给搭建好了,但是还没有任何js效果实现.这一节,我就来说下关于菜单的特效实现.我需要的效果如下: 需求总结: 点击顶部菜单模块,左侧显示不同模块下面的菜单列表 点击左侧菜单选项,展开下面的子菜单,并折叠其它菜单模块,菜单图标折叠显示为+,展开显示为-. 1.先看下Top视图中代码: 2.在Top视图的head中添加如下js: <script sr