在vue项⽬中引⼊element-ui
我在往期⽂章《纯⼿⼯撸⼀个Vue框架》中介绍了怎么从零⼀点点地搭建⼀个vue框架，这篇⽂章，我将在当时创建好的框架上⼿动引⼊element-ui，⽽不是使⽤官⽅的element-starter脚⼿架
已搭建好的vue框架的⽂件结构
引⼊element-ui
electron vue教程
通过以下命令添加element-ui依赖
npm i element-ui
修改main.js的代码，使element-ui⽣效，修改为如下
importVuefrom'vue'
importAppfrom'./App.vue'
importrouterfrom'./router.js'
importElementUIfrom'element-ui'
import'element-ui/lib/theme-chalk/index.css';//引⼊element-ui的样式⽂件
Vue.use(ElementUI)//通过这个命令使所有的element-ui标签(<el-*></el-*>)可被解析
newVue({
el:"#app",
router:router,
render:render=>render(App)
})
修改helloworld.vue⽂件，引⼊⼀个element-ui标签，修改为如下
<template>
<div>
Hello World!
<el-inputv-model="input"placeholder="请输⼊内容"></el-input>
</div>
</template>
<script>
exportdefault{
data:function() {
return{
input:"这是⼀个element-ui的输⼊标签",
};
},
};
</script>
运⾏npm run serve看⼀下效果
⾄此，我已经成功引⼊element-ui了，下篇⽂章，我将基于这个vue-element-ui框架，通过⼿动的⽅式引⼊electron，⽽不是使⽤electron-vue 脚⼿架
原⽂《在vue项⽬中引⼊element-ui》

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。