Web Front-end
JS Tutorial
Implementation method of introducing components using vue+elementUI part
Implementation method of introducing components using vue+elementUI part
The UI component library of vue.js has multiple projects on git. The ones I see more users are iView and Element. Both component libraries have rich components. This article mainly introduces you to the relevant information about using vue+elementUI to implement some imported components, and introduces the solution to the error when vue introduces elementUI. The article introduces it in detail through the example code. Friends who need it can refer to it. Below are the small Let’s learn together.
Official website introduction
iView: A set of high-quality UI component libraries based on Vue.js
Element, one A set of component libraries based on Vue 2.0 prepared for developers, designers and product managers, providing supporting design resources to help your website quickly take shape.
Both have their own advantages and disadvantages, so I won’t comment too much. Based on my own needs, I finally used Element. Because the company recently developed a small backend project, I considered introducing some components of element. Because I have no experience in introducing it alone for the first time, I read a lot on the Internet and there are such and such problems. I personally feel that the official website did not explain it to me clearly (maybe My level is too low), so I studied it myself and tested it myself. If there are any mistakes, please point them out.
Implementation method
1. Install vue-cli
npm install -g vue-cli
2. Create a project projectName is the name of your project
npm install webpack projectName
3. Enter the project directory
cd projectName
4. Initialize the project installation dependencies
npm install
5. Install elementui
npm install element-ui --save -dev
6. First determine the project Are there style-loader and babel-plugin-component? If there is no npm one
npm install xxx --save -dev
7. To be simple and crude, find .babelrc, delete all the original file contents, and paste the following code
{ "presets": [["env", {
"modules": false,
"targets": {"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]}
}],
"stage-2"],
"plugins": [
"transform-runtime",
["component",[
{
"libraryName":"element-ui",
"styleLibraryName":"theme-default" //1.4的老项目用这个，2.0的用theme-chalk，假设没效果看看官网又把默认的主题改 成那个了 跟着改一下应该就可以了
}
]]
],
"comments":false,
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["istanbul"]
}
}
}8. Add the following sentence in webpack.base.conf.js
{
test: /\.css$/,
loader: 'style-loader'
},9. Introduce
import { Button,Input } from 'element-ui'
Vue.use(Button)
Vue.use(Input)10 in main.js, and then you can Using Button and Input
vue introduced elementUI and reported an error
Introduced import 'element-ui/lib/theme-default/index.css' into main.js and reported an error, unable to start the project. This is to change the webpack in package.json to "webpack": "beta", reinstall it, and then you can start it
Related recommendations:
Vue2.0 , ElementUI realizes table page turning
vue Element-ui input remote search example detailed explanation
Use VUE element-ui to write a reply Use Table component
The above is the detailed content of Implementation method of introducing components using vue+elementUI part. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1377
52
How to install the Windows 10 old version component DirectPlay
Dec 28, 2023 pm 03:43 PM
Many users always encounter some problems when playing some games on win10, such as screen freezes and blurred screens. At this time, we can solve the problem by turning on the directplay function, and the operation method of the function is also Very simple. How to install directplay, the old component of win10 1. Enter "Control Panel" in the search box and open it 2. Select large icons as the viewing method 3. Find "Programs and Features" 4. Click on the left to enable or turn off win functions 5. Select the old version here Just check the box
How to implement calendar component using Vue?
Jun 25, 2023 pm 01:28 PM
Vue is a very popular front-end framework. It provides many tools and functions, such as componentization, data binding, event handling, etc., which can help developers build efficient, flexible and easy-to-maintain Web applications. In this article, I will introduce how to implement a calendar component using Vue. 1. Requirements analysis First, we need to analyze the requirements of this calendar component. A basic calendar should have the following functions: display the calendar page of the current month; support switching to the previous month or next month; support clicking on a certain day,
VUE3 development basics: using extends to inherit components
Jun 16, 2023 am 08:58 AM
Vue is one of the most popular front-end frameworks currently, and VUE3 is the latest version of the Vue framework. Compared with VUE2, VUE3 has higher performance and a better development experience, and has become the first choice of many developers. In VUE3, using extends to inherit components is a very practical development method. This article will introduce how to use extends to inherit components. What is extends? In Vue, extends is a very practical attribute, which can be used for child components to inherit from their parents.
Angular components and their display properties: understanding non-block default values
Mar 15, 2024 pm 04:51 PM
The default display behavior for components in the Angular framework is not for block-level elements. This design choice promotes encapsulation of component styles and encourages developers to consciously define how each component is displayed. By explicitly setting the CSS property display, the display of Angular components can be fully controlled to achieve the desired layout and responsiveness.
How to open the settings of the old version of win10 components
Dec 22, 2023 am 08:45 AM
Win10 old version components need to be turned on by users themselves in the settings, because many components are usually closed by default. First we need to enter the settings. The operation is very simple. Just follow the steps below. Where are the win10 old version components? Open 1. Click Start, then click "Win System" 2. Click to enter the Control Panel 3. Then click the program below 4. Click "Enable or turn off Win functions" 5. Here you can choose what you want to open
Let's talk about how Vue dynamically renders components through JSX
Dec 05, 2022 pm 06:52 PM
How does Vue dynamically render components through JSX? The following article will introduce to you how Vue can efficiently dynamically render components through JSX. I hope it will be helpful to you!
Vue component practice: paging component development
Nov 24, 2023 am 08:56 AM
Vue component practice: Introduction to paging component development In web applications, the paging function is an essential component. A good paging component should be simple and clear in presentation, rich in functions, and easy to integrate and use. In this article, we will introduce how to use the Vue.js framework to develop a highly customizable paging component. We will explain in detail how to develop using Vue components through code examples. Technology stack Vue.js2.xJavaScript (ES6) HTML5 and CSS3 development environment
How to handle dynamic loading and switching of components in Vue
Oct 15, 2023 pm 04:34 PM
Handling dynamic loading and switching of components in Vue Vue is a popular JavaScript framework that provides a variety of flexible functions to handle the dynamic loading and switching of components. In this article, we will discuss some methods of handling dynamic loading and switching of components in Vue, and provide specific code examples. Dynamically loading components means dynamically loading components at runtime as needed. This improves the performance and loading speed of your application because relevant components are loaded only when needed. Vue provides async and awa
