Element UI 框架搭建
阿新 • • 發佈:2017-12-04
提示 效果 sim 教訓 reg sha group -c cli
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 框架搭建