在vue項目中引入element-ui

我在往期文章《純手工擼一個Vue框架》中介紹了怎麼從零一點點地搭建一個vue框架，這篇文章，我將在當時建立好的框架上手動引入element-ui，而不是使用官方的element-starter腳手架

已搭建好的vue框架的文件結構

引入element-ui

• 經過如下命令添加element-ui依賴

npm i element-ui

• 修改main.js的代碼，使element-ui生效，修改成以下

import Vue from 'vue'
import App from './App.vue'
import router from './router.js'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'; //引入element-ui的樣式文件
Vue.use(ElementUI)//經過這個命令使全部的element-ui標籤(<el-*></el-*>)可被解析
new Vue({
    el: "#app",
    router: router,
    render: render => render(App)
})

• 修改helloworld.vue文件，引入一個element-ui標籤，修改成以下

<template>
  <div>
    Hello World!
    <el-input v-model="input" placeholder="請輸入內容"></el-input>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      input: "這是一個element-ui的輸入標籤",
    };
  },
};
</script>

• 運行npm run serve看一下效果

至此，我已經成功引入element-ui了，下篇文章，我將基於這個vue-element-ui框架，經過手動的方式引入electron，而不是使用electron-vue腳手架

原文《在vue項目中引入element-ui》