Element UI 框架搭建

Element UI 框架搭建

一、webpack 全局安裝

npm install -g webpack

二、淘寶鏡像cnpm安裝

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

三、vue腳手架全局安裝 -- 用於生成vue模板

npm install -g vue-cli

四、使用腳手架構建vue項目 -- 一路回車就好了

vue init webpack

目前可用的模板介紹

browserify–全功能的Browserify + vueify，包括熱加載，靜態檢測，單元測試。
browserify-simple–一個簡易的Browserify + vueify，以便於快速開始。
webpack–全功能的Webpack + vueify，包括熱加載，靜態檢測，單元測試。
webpack-simple–一個簡易的Webpack + vueify，以便於快速開始。

五、element-ui安裝

npm i element-ui

六、依賴安裝，這裏用cnpm安裝，由於依賴太多否則，否則讓你等的蛋疼 -- 會在項目中生成一個node_modules文件

cnpm install

大功告成，這裏能夠運行了

npm run dev

vue項目的構建到如今就算完成了，那麼如今就引入element-ui組件模塊

這裏以radio組件爲例

一、在\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>

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

 

import radio from '@/components/radio' //引入剛建立的組件
//設置路由
{
      path: '/radio',
      name: 'radio',
      component: radio
}

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