vue 项目中 Element UI 如何实现按需加载
一、Element UI 按需加载通过vue create element_test命令创建一个vue的项目通过npm i element-ui -S命令下载element ui到这个 vue的项目中通过npm i babel-plugin-component -D命令下载按需加载所需要的插件在babel.config.js文件中,代码如下所示:module.exports = {presets:
·
一、Element UI 按需加载
-
通过
vue create element_test
命令创建一个vue
的项目 -
通过
npm i element-ui -S
命令下载element ui
到这个vue
的项目中 -
通过
npm i babel-plugin-component -D
命令下载按需加载所需要的插件 -
在
babel.config.js
文件中,代码如下所示:module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: [ [ 'component', { libraryName: 'element-ui', styleLibraryName: 'theme-chalk' } ] ] }
-
在
main.js
文件中,代码如下所示:import Vue from 'vue' import App from './App.vue' // import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import { Button, Message} from 'element-ui' // Vue.use(ElementUI) Vue.component(Button.name, Button) Vue.prototype.$message = Message Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')
-
在
App.vue
中,代码如下所示:<template> <div id="app"> <el-button @click="show">按钮</el-button> </div> </template> <script> export default { name: 'app', methods: { show () { this.$messag('element-ui 提示') } } } </script> <style> </style>
-
通过
npm run build
命令进行项目的打包,看一下按需加载前后的项目体积大小,如下所示:
- 未按需加载,如下所示:
- 按需加载,如下所示:
更多推荐
已为社区贡献26条内容
所有评论(0)