【手把手擼vue項目】element安裝



element作為常用的基于vue2.0的組件庫，能幫助開發者快速的搭建項目。
下面開始正式的安裝教程

1、安裝

cmd，在項目路徑下輸入：

npm i element-ui -S
2、引入

在main.js中，對element進行引入（目前采用完整引入，按需引入請參考官方文檔）
https://element.faas.ele.me/#/zh-CN/component/quickstart
添加以下三行代碼

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

效果如圖所示：

image.png

完成以上步驟之后，恭喜您，已經完成element的安裝了。

接下來我們來進行一個簡單的測試：

  1. 在components文件夾下新建ElementTest.vue
    將element官網的樣例代碼粘入其中：
<template>
  <div class="test-cont">
    <el-input v-model="input" placeholder="請輸入內容"></el-input>
    <div>{{input}}</div>
  </div>
</template>

<script>
export default {
  name: 'ElementTest',
  data() {
    return {
      input: ''
    }
  }
}
</script>
<style scoped>
</style>

  1. 配置路由
    在router/index.js中引入ElementTest
    并將其添加進routes中。


    image.png
  2. 測試
    在url中輸入：http://localhost:8080/#/test
    image.png

    使用成功！
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。