vue-cli3.0安装element-ui组件及按需引入element-ui组件

Posted 2023-04-22

参考技术A 在之前最好是备份APP.JS里面的东西 因为不知道为什么会改变APP.JS里面的东西

1,在 命令行输入   vue add element

2,How do you want to import Element? -->选择 Import on demand （关键）按需引入

❯ Fully import  全局引入

Choose the locale you want to load–>选择 zh-CN

3, 会自动 写入不用管

src/plugins/element.js

    babel.config.js

    jsons.json

    package-lock.json

    package.json

    src/App.vue

    src/main.js

4，不知道为什么会改变APP.JS里面的东西

会变成下面这样不知道为什么

<div id="app">

    <img src="./assets/logo.png">

        If Element is successfully added to this project, you'll see an

<code v-text="''">

        below

      <el-button>el-button

    <HelloWorld msg="Welcome to Your Vue.js App"/>

import HelloWorldfrom './components/HelloWorld.vue'

export default

name:'app',

  components:

HelloWorld





#app

font-family:'Avenir', Helvetica, Arial, sans-serif;

  -webkit-font-smoothing:antialiased;

  -moz-osx-font-smoothing:grayscale;

  text-align:center;

  color:#2c3e50;

  margin-top:60px;



我项目正确的

  <div id="app">

<style lang="less">

  html,body,#app

margin:0;

    padding:0;

    width:100%;

    height:100%;

 

#app

min-width:1200px;

    font-family:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;

 

.ct

width:1200px;

    margin:0 auto;

 

5,OK了 大功告成了 

用vue-cli导入Element UI组件

首先第一步,现在命令行中输入npm i element-ui,如:

接着在mian.js 中添加

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

如:=>

最后在命令行输入npm run dev打开自己创建的项目就可以使用了