Use vue-cli + element-ui to quickly build a project and learn about it

In terms of front-end architecture, we need to learn to use vue-cli element-ui to build projects. The content of the article is compact, and I hope everyone will study patiently.

1. Foreword

vue2.0The arrival of vue2.0 has become very popular in China with its easy to learn, complete API Chinese documentation, and rich ecosystem. The front-end MVVM
framework,

element-ui is the ui framework based on vue2.0

, Developed and maintained by the Ele.me team, it is currently the most popular framework in vue’s UI library

element-ui official website

vue special website

You can see the popularity of each ui framework

in the vue topic

2. Code operation

Usevue -cli element-ui

There are two ways

Option 1: ①First use vue-cli
to build the project, ② Then use npm install
corresponding modules and plug-ins, ③Go to webpack.conf.js
to configure the loader of various files, ④Go to .babelrc

to configure the plug-in

If the project has not been started yet, do not use option one. If the project has been started for a while, then you have to click Each step of the above points must be handled well. If you are not careful, an error will be reported. Here is the second option, which is to use a template provided by element-ui

Option two: ① Use git command git clone https://github.com/ElementUI/element-starter.git
Download the official template
(If git is not installed on your local computer, you can enter https://github.com/ElementUI/element-starter, click the green Clone or download button, and click Download ZIP to download the template) ② Use cnpm intsall in the project root directory to download dependent modules (if there is no Taobao mirror cnpm, you can use npm install
) ③ Use npm run dev

in the project root directory to run the project. The basic structure of the

template is as follows - basically the same as the project built using vue-cli

scaffolding. There is no difference, very clean

After running the project, you can see a simple page - just like the page of the project built using vue-cli There is one more element-ui

button component

Then you can use the element-ui

library~

ElementUI's simple application can be like the following article, click the link to enter

Use vue2.0 to quickly build a background addition, deletion, modification and query management interface

3. Others

install parameters

1. Write dependencies

npm install module_name -S

npm install module_name --save

2. Write devDependencies

npm install module_name -D

npm install module_name --save-dev

3. Global installation (command line use)

npm install module_name -g

Related recommendations ：

How to use vue-cli to import Element UI components

How to implement import and export in vue element-ui

###

The above is the detailed content of Use vue-cli + element-ui to quickly build a project and learn about it. For more information, please follow other related articles on the PHP Chinese website!