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腳手架時很容易出錯，搞得很多人包括我自己都摸不着頭腦。這里有個教訓就是，報錯要學會耐心的看調試模式下提示的錯誤，不懂就去百度，對於英語較為好的這里有比較大的好處，怎么提示錯誤就怎么解決錯誤，就是這么簡單。