html中引入vue_在vue项目中引入element-ui

最新推荐文章于 2024-04-12 17:03:28 发布

weixin_42462382

最新推荐文章于 2024-04-12 17:03:28 发布

阅读量714

点赞数

文章标签： html中引入vue

本文链接：https://blog.csdn.net/weixin_42462382/article/details/113451722

版权

我在往期文章《纯手工撸一个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>