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