How to use Element-UI in Vue.js in .net Core
Net Core in Vue.js how to use Element-UI, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.
Preface
Every time I try to use something new, I spend a lot of time really not in general. In the past, when I started to learn Vue, it was relatively simple to introduce ElementUI directly with VSCode. This project is because of the Vue front-end project generated by .net Core, and then it has been unavailable in the original way. After a day of trial and error, it can finally be introduced into the application.
Steps to introduce Vue into Element-UI in .net Core
In fact, using the introduction of Element-UI according to the normal process on the Internet should not be a big problem, but I also took a lot of detours and spent a lot of time because I was a beginner in Vue. Don't say much, just write down the steps.
Open the project directory and press Shift plus the right mouse button to select-- open the Powershell window here.
two。 Install the Loader module
Cnpm install style-loader-D cnpm install css-loader-D cnpm install file-loader-D
In fact, we already exist these three modules, but I have to install them again, which may be the latest version.
You can see that it originally exists, and after installation, the packages.json originally has a version number and also changes a link to http.
3. Install Element-UI
Cnpm install element-ui-save
4. Modify the configuration of webpack.base.conf.js
Find the webpack.config.js file, open it and see the original
We need to make some changes.
First, block the original third line test:/\ .css $/ .use: IsDevBuild, and then we write two sentences.
{
Test: /\ .css $/
Loader: 'styleMutual loader'
}
{
Test: /\. (eot | woff | woff2 | ttf) $/
Loader: 'file-loader'
}
And then save it. It's still relatively simple, but it took me a whole day to test back and forth, not to mention the pits I encountered, they were all tears.
Use effect
First of all, we introduce Element-UI into the home page app.ts
Import ElementUI from 'element-ui'
Import "element-ui/lib/theme-chalk/index.css"
Vue.use (ElementUI)
Then add two ordinary buttons to the app.vue.html, and then add two ElementUI buttons to it, as shown below
Let's see how it works.
You can see that there is a big difference between the ordinary button in the upper right corner and the button in ElementUI.
After reading the above, have you mastered how to use Element-UI in Vue.js in. Net Core? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!
