Element UI 框架搭建

Posted 冯叶青

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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脚手架时很容易出错,搞得很多人包括我自己都摸不着头脑。这里有个教训就是,报错要学会耐心的看调试模式下提示的错误,不懂就去百度,对于英语较为好的这里有比较大的好处,怎么提示错误就怎么解决错误,就是这么简单。

以上是关于Element UI 框架搭建的主要内容,如果未能解决你的问题,请参考以下文章

Element-ui

(一)基于 vue-element-admin 前端与后端框架搭建

koajsAdmin已经开源了,element-ui + koa + mongodb 全栈搭建后台管理系统

Vue + Element UI:搭建开发环境

使用vuejs2.0和element-ui 搭建的一个后台管理界面

使用vuejs2.0和element-ui 搭建的一个后台管理界面