Install Node.js and NPM on your computer before building your own project. NPM is a package management tool for Node.

  • Step 1: Install Node. Download and install node from nodejs.org/en/. After the installation is complete, the installation will be successful as shown in the following figure

  • Step 2: install CNPM. CNPM is the operation command of the NPM library shared by Taobao

    npm install cnpm -g –registry=https://registry.npm.taobao.org

  • Step 3: install VUE -cli. Vue – CLI for vue scaffolding tools, help users quickly build their own scaffolding projects

    cnpm install -g vue-cli

  • Step 4: Initialize your project with VUe-CLI

After successful initialization, you can see the generated file in the directory, as shown below:

To introduce elementUI, first install CNPM install element-ui. Once installed, add the following code to your project main.js:

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Copy the code

Now that elementUI has been successfully introduced into our project, let’s try to use it in a page by adding the following code to the hellowWorld component file

<div> <el-button> Default button </el-button> <el-buttontype="primary"</el-button> <el-buttontype="success"</el-button> <el-buttontype="info"</el-button> <el-buttontype="warning"> Warning button </el-button> <el-buttontype="danger"</el-button> </div>Copy the code

Run NPM run Dev, as shown in the figure below, and you can see that the elementUI elements are correctly displayed on the page.

At this point, our scaffolding project is set up