关于vue.js:vue项目elment按需导入

11次阅读

共计 647 个字符,预计需要花费 2 分钟才能阅读完成。

vue 我的项目 elment 按需导入

1. 开发环境 vue+element
2. 电脑系统 windows10 专业版
3. 在应用 vue+element 开发的的过程中, 咱们可能只是应用 element-ui 的几个组件, 如果咱们把整个 element-ui 引入的话, 就会导致我的项目过大。上面是 element-ui 按需导入的办法, 心愿对你有所帮忙。
4. 在终端执行命令:

npm add element-ui
npm install babel-plugin-component -D

5. 在 babel.config.js 增加如下代码:

module.exports = {
  presets: ['@vue/app'],
  "plugins":[
    [
      "component",
      {
        "librayName":"element-ui",
        "styleLibraryName":"theme-chalk"
      }
    ]
  ]
}

6. 在 main.js 中增加如下代码:

import {Button,Progress} from 'element-ui';
Vue.use(Button);
Vue.use(Progress);

7. 在 vue 模板中应用:

<el-button type="success" round> 胜利按钮 </el-button>
    <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>


8. 本期分享到了这里就完结啦, 是不是很 nice, 心愿对你有所帮忙, 让咱们一起致力走向巅峰!

正文完
 0