Vue ????? ??? ????? ?? UI ?????? ???? ??

Vue? ??? ?????? ???? ? ?? ???? ?? ?? JavaScript ????????. Vue ??????? ???? ??? ?????? ???? ??? ?? ?? UI ?????? ???? ?? ??? ????. ? ????? Vue ?????? ??? ????? ?? ?? UI ?????? ???? ??? ??? ???? ?? ?? ??? ?????.

1??: ?? UI ????? ??

?? npm?? ??? ?? UI ?????? ???? ???. ? ????? Element UI? ?? ?? ??? ??? ????.

npm install element-ui --save

? ??? Element UI ?????? ?????? ???? ????? ???? ?????.

2??: ?? ?? ?? ??

??? ??? ? Vue ?? ??? ?? ?? UI ?? ??? ???? ???. ???? ?? ??(?? main.js)? ?? ??? ?????.

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

? ??? import ?? ?? Element UI ?????? ???? Vue.use()? ?? Vue? ?? ?? ??? ?????. ??.

3??: ?? UI ?????? ?? ?? ??

?? Vue ?? ???? Element UI?? ???? ?? ??? ??? ? ????. ?? ?? Vue ?? ???? Element UI ?? ?? ??? ??? ? ????. ?? ??? ??? ????.

<template>
  <button type="primary">Primary Button</button>
</template>

<script>
export default {
  
}
</script>

<style>

</style>

? ????? Element UI? ?? ?? ??? ???? type ??? ?? ?? ???? ???? ??????. Element UI ??? ??? ?? ?? ? ???? ?? ??? ??? ??? ??? ??? ? ????.

4??: ??? ???? ??

?? UI ?????? ?? ?? ?? ??? ??? ????? ?? ?? ??? ?????. ?? ?? Element UI??? Container, Row, Col? ?? ???? ?? ??? ???? ??? ??? ????? ??? ? ????. ?? ??? ??? ????.

<template>
  <el-container>
    <el-aside width="200px">
      <!-- 側(cè)邊欄內(nèi)容 -->
    </el-aside>
    <el-main>
      <!-- 主要內(nèi)容 -->
    </el-main>
  </el-container>
</template>

<script>
export default {
  
}
</script>

<style>

</style>

? ????? Element UI? Container, Aside, Main ?? ??? ???? ??? ??? ????? ??????. ????? ??? 200px?? ?? ???? ??? ??? ?????. ??.

?? ??? ??? ???? ?? ?? ??? ?? UI ?????? ????? ??? ???, ?? ??, ?? ?? ?? ?? ???? ?? ?? ? ???? ?????.

??

? ????? Vue ????? ??? ????? ?? ?? UI ?????? ???? ??? ???? ???? ?? ??? ??????. ?? UI ?????? ?? ??? ???? ?????? ???? ??? ??? ????? ??? ??? ? ????. ? ??? Vue ????? ??? ????? ?? UI ?????? ???? ? ??? ??? ????.

? ??? Vue ????? ??? ????? ?? UI ?????? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!