vue-cli4.5创建Vue3.x引入element-ui

最近要写登录界面,但要求是用ElementUI,所以去官网看了一下,也遇到了挺多的问题,所以在此和大家分享一下,

首先,我的脚手架和vue版本是最新的,

由于elemnetui目前完美支持Vue2.0,所以vue3要用,就需要用到plus版本了,我去官网看了,

# NPM
$ npm install element-plus --save

我安装完,问题好多,在node_modules里显示是已经安装好elementui了,但是还是报错

去查了一下,网上说,把theme_default改成theme_chalk,等于白说,我这本身就是后者,然后我就觉得我打开的方式不对,果然是这样的。

正确的打开方式是:

1.创建vue工程,初始化项目后,

2.开始安装elementui

//执行安装命令
vue add element

接着会让你选择是全部引入还是按需,为了让工程更加简洁,建议还是按需。

然后就是区域选择, 

  • How do you want to import Element? -->选择 Import on demand (关键)
  • Choose the locale you want to load–>选择 zh-CN

接着就是等待自动加入,完成之后,会出现一个plugins的文件夹 ,里面有一个js文件,之后所有的element组件全部在这进行引入,同时,在main.js里引入了配置

 npm run serve 之后,会发现自动添加了一个按钮,作为示例,

Last but not least,在项目初始化后,如果要使用elementui,就直接引入,不要中途添加,它会让你的App.vue回到当初的模样,就像这样

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
      <p>
        If Element is successfully added to this project, you'll see an
        <code v-text="'<el-button>'"></code>
        below
      </p>
      <el-button>el-button</el-button>
    </div>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

如果有不对的地方,感谢留言指出!!! 

猜你喜欢

转载自blog.csdn.net/m0_46833693/article/details/121719660