Vue actual combat notes (2) introduction of element plus

Half rainbow 2021-05-03 20:52:51
vue actual combat notes introduction


Element Plus It's for adaptation Vue3 And yes Element UI The front-end component library generated after refactoring , Contains rich basic components

Post it first Official documents , The introduction has been very comprehensive and detailed , You can find the answers to many of the questions you have met


Let's say we've used vue-cli 4 The tool creates a Vue3 project , Then how to introduce Element Plus Well ?

Be careful , It has to be used here vue-cli 4 Created Vue3 project , Otherwise, it will report an error later , First of all, let's introduce the directory structure generated by default

+ demo
+ node_modules( Store third party modules )
+ public( Store static files )
- favicon.ico( Icon )
- index.html ( Page template )
+ src( The files we write are usually placed in this folder )
+ assets( Store resource files )
+ components( Store public components )
+ router.js( Routing management :Router)
+ store.js ( State management :Vuex)
+ views( Store view components )
- App.vue( Page entry file )
- main.js( Program entry file )
- package.json( Project profile )
- package-lock.json( Project profile )
- babel.config.js(babel The configuration file )
- README.md( Project description document )
- ...( Other configuration files )
 Copy code 

\

1、 install Element Plus

npm yes Node Package management tools , We can go through npm install Element Plus

add --save Options , The configuration can be written to package.json Of dependencies Field ( The production environment depends on )

npm install --save element-plus
 Copy code 

\

2、 introduce Element Plus

stay Vue Introduction in Element Plus There are two ways , They are total introduction and local introduction , I'll introduce them one by one

(1) Introduce all

stay main.js Introduce and register all components in , You can use all the components directly in other pages

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// New code : Introduce all components and styles 
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
const app = createApp(App)
app.use(store)
app.use(router)
// New code : Register all components 
app.use(ElementPlus)
app.mount('#app')
 Copy code 

In this way of introduction , Regardless of the component used or not , Will all load in , Obviously not a good way

(2) Local introduction

stay main.js Introduce and register specific components in , Only specific components can be used in other pages

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// New code : Introduce specific components and styles 
import {
ElButton
} from 'element-plus'
import 'element-plus/lib/theme-chalk/el-button.css'
const app = createApp(App)
app.use(store)
app.use(router)
// New code : Register specific components 
app.component(ElButton.name, ElButton)
app.mount('#app')
 Copy code 

In this way of introduction , You can ensure that only the components you need are introduced ( Introduce on demand )

But every time a component is introduced , You need to manually import the corresponding style file at the same time , It's too much trouble

\

babel-plugin-import Plug ins can assist in this work , First installation babel-plugin-import plug-in unit

add --save-dev Options , Write the configuration to package.json Of devDependencies Field ( Development environment dependency )

npm install --save-dev babel-plugin-import
 Copy code 

And then in babel.config.js Configuration plug-ins

module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
// New code 
plugins: [
[
"import",
{
libraryName: 'element-plus',
customStyleName: (name) => {
return `element-plus/lib/theme-chalk/${name}.css`;
}
}
]
]
}
 Copy code 

And then main.js Introduce components as needed

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// New code : Introduce specific components 
// The corresponding style file will be automatically imported , There is no need to introduce them one by one manually 
import {
ElButton
} from 'element-plus'
const app = createApp(App)
app.use(store)
app.use(router)
// New code : Register specific components 
app.component(ElButton.name, ElButton)
app.mount('#app')
 Copy code 

Finally, remember to use npm run serve restart app , You can use specific components in other pages

\

3、 Use Element Plus

In the installation and introduction of Element Plus after , We can use it on the page Element Plus Components in

<template>
<div>
<el-button type="primary" @click="handleClick">Primary</el-button>
</div>
</template>
<script>
export default {
methods: {
handleClick: function (e) {
console.log('click', e)
}
}
}
</script>
 Copy code 

At this time , If you can see a blue button on the page , It means that the configuration is successful

And then you can enjoy it Element Plus Efficient development experience for you

版权声明
本文为[Half rainbow]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/05/20210503204933906w.html

  1. Analysis of MVC
  2. [middle stage] please stay and join me in the backstage
  3. Understanding front end garbage collection
  4. [continuous update] front end special style implementation
  5. Flutter product analysis and package reduction scheme
  6. XPath positioning
  7. 前端开发css中的flex布局的使用
  8. The use of flex layout in front end development CSS
  9. JQuery核心函数和静态方法
  10. JQuery core functions and static methods
  11. Node family - understanding of blocking and non blocking
  12. 热点微前端Microfrontend的讨论:谷歌AdWords是真实的微前端
  13. Vue source code analysis (2) initproxy initialization proxy
  14. What's TM called react diff
  15. Summary of common front end data structure
  16. Useeffect in hooks
  17. [encapsulation 02 design pattern] Command pattern, share meta pattern, combination pattern, proxy pattern, strategy pattern
  18. Front end notes: virtual Dom and diff of vue2. X
  19. The best code scanning plug-in of flutter
  20. The simplest plug-in for rights management of flutter
  21. 21. Object oriented foundation "problems and solutions of object traversal"
  22. Discussion on hot micro front end: Google AdWords is a real micro front end
  23. Usecallback and usememo for real performance optimization
  24. 【前端圭臬】十一:从规范看 JavaScript 执行上下文(下)
  25. [front end standard] 11: Javascript execution context from the perspective of specification (2)
  26. Hexagonal六角形架构ReactJS的实现方式 - Janos Pasztor
  27. Transaction of spring's reactive / imperative relational database
  28. The implementation of hexagonal hexagonal reactjs Janos pasztor
  29. HTTP状态码:402 Payment Required需要付款 - mozilla
  30. HTTP status code: 402 payment required - Mozilla
  31. Factory mode, constructor mode and prototype mode
  32. Build the scaffold of react project from scratch (Series 1: encapsulating a request method with cache function based on Axios)
  33. Cocos Quick Start Guide
  34. Comparison of three default configurations of webpack5 modes
  35. A case study of the combination of flutter WebView and Vue
  36. CSS: BFC and IFC
  37. A common error report and solution in Vue combat
  38. JS: this point
  39. JS: prototype chain
  40. JavaScript series -- promise, generator, async and await
  41. JS: event flow
  42. Front end performance optimization: rearrangement and redrawing
  43. JS - deep and shallow copy
  44. JavaScript异步编程3——Promise的链式使用
  45. JavaScript asynchronous programming 3 -- chain use of promise
  46. Vue.js组件的使用
  47. The use of vue.js component
  48. How to judge whether a linked list has links
  49. Element UI custom theme configuration
  50. Text image parallax effect HTML + CSS + JS
  51. Spring的nohttp宣言:消灭http://
  52. Vue3 intermediate guide - composition API
  53. Analysis of URL
  54. These 10 widgets that every developer must know
  55. Spring's nohttp Manifesto: eliminate http://
  56. Learn more about JS prototypes
  57. Refer to await to JS to write an await error handling
  58. A short article will directly let you understand what the event loop mechanism is
  59. Vue3 uses mitt for component communication
  60. Characteristics and thinking of ES6 symbol