1. 安裝 Element UI（在文件夾最上面輸入cmd進(jìn)入dos窗口，然后輸入安裝指令?npm install element-ui --save）

2.在main.js文件全局引入(main.js文件負(fù)責(zé)? 全局注冊?)，在該文件注冊的所有組件在其他文件都能直接調(diào)用，一般不需再次引入（對于自定義的組件，不論在main.js文件里是否全局引入，在router文件夾的index文件里面好像必須要重新寫一遍組件導(dǎo)入，才能用）

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);

3.在views文件夾下創(chuàng)建文件index.vue(沒有views文件夾就自己建一個(gè))

<template><el-input  v-model="input" placeholder="請輸入內(nèi)容"></el-input></template><script>
export default {name: 'BookInfo', data() {return {input: '' // 用于綁定輸入框的值};} 
}
</script><style scoped></style>

?

4.在App.vue文件引入該組件（App.vue是程序入口界面，程序在執(zhí)行時(shí)先執(zhí)行main.js和App.vue文件）

<template><div id="app"><BookInfo></BookInfo></div>
</template><script>
import BookInfo from './views/index'export default {name: 'App',components: {BookInfo}}
</script><style>#app{font-size:80px;color:red;text-align: center;}
</style>

5.執(zhí)行結(jié)果

如果想讓輸入框小一些，就加個(gè)?style樣式

<el-input style="width: 200px;" v-model="input" placeholder="請輸入內(nèi)容"></el-input>?

6.注意：

正常情況下不會(huì)在App.vue文件直接引入某個(gè)組件，而是把動(dòng)態(tài)路由引入，因?yàn)楝F(xiàn)在只寫一個(gè)界面，就沒有使用動(dòng)態(tài)路由，實(shí)際生產(chǎn)必須改成動(dòng)態(tài)路由。

只把第4步的第3行改成<router-view/>，就能用路由的方式（路徑）引入很多界面

<template><div id="app"><router-view/></div>
</template>