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!