Element UI 框架搭建

Element UI 框架搭建

一、webpack 全局安装

1	npm install -g webpack

二、淘宝镜像cnpm安装

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

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

1	npm install -g vue-cli

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

1	vue init webpack

目前可用的模板介绍

1 2 3 4

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

五、element-ui安装

1	npm i element-ui

六、依赖安装，这里用cnpm安装，由于依赖太多否则，否则让你等的蛋疼 -- 会在项目中生成一个node_modules文件

1	cnpm install

大功告成，这里能够运行了

1	npm run dev

vue项目的构建到如今就算完成了，那么如今就引入element-ui组件模块

这里以radio组件为例

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

radio组件代码 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<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>

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

 

1 2 3 4 5 6 7

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

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

1 2 3

import ElementUI  from  'element-ui'  //element-ui的所有组件 import  'element-ui/lib/theme-chalk/index.css' //element-ui的css Vue.use(ElementUI)  //使用elementUI

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

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