Use vue with UI Components

Create a project using Bootstrap

First, use scaffolding to build the basic framework of the project. For details, refer to the previous article.

1. Run the command to create a project: vue init webpack-simple Vue-Bootstrap

2. Download related dependencies: NPM Vue-Bootstrap

3. Start the project: NPM run Dev

This interface indicates that the project is successfully created.

Introduce Bootstrap

1. Before using Bootstrap, you must download Bootstrap from the project and execute the command: NPM install Bootstrap in the project root directory.

2. After the download is complete, introduce the relevant style in the index.html file.

Use Bootstrap

After we introduce this style file, we can normally use these styles by adding class classes to the elements.

First, delete the <template> default page element in APP. Vue, and then click the button to verify whether the reference is successful.

The bootstrap style file is successfully introduced. Others are similar. It should be noted that Bootstrap is based on jquery, so if necessary, it is best to introduce it in the project.

Download Code: click here

Elementui-completely introduce and create a project

This step is the same as above and will not be repeated.

Install and introduce element-UI

In the official website http://element.eleme.io above recommended use NPM for installation, so here also use NPM for installation.

Here, I is short for install;-S is short for -- save. We can also use-D to represent -- save-Dev for installation.

--saveIs the declaration of dependencies required for the production environment (frameworks and libraries used in Application Development), such as JQ, react, and vue.--save-devIs the declaration (build tool and test tool) of the dependencies required by the development environment, such as Babel and webpack, which are put in the current directory. In the package. JSON file, there are two storage module objects. -Save will be stored in "dependencies", while-save-Dev will be stored in "devdependencies ".

Execute the preceding statement in the project root directory.

After the installation is successful, we will introduce it globally in the entry file. For details about how to introduce it, see the official website. You only need to follow the instructions to introduce it.

After the project is re-run, an error is reported.

This type of error is mentioned earlier. CSS cannot be directly referenced in the previous section.CSS-loaderHere, the font icon cannot be introduced, and the solution is the same. When introducing external font iconsFile-loaderBecausePackage. JSONSo you can directlyWebpack. config. jsIf some versions do not exist, you need to download and configure them through NPM.

Then run the project again.

Use

After deleting the <template> default page element in APP. Vue, copy the code sample on the official website to check whether the reference is successful.

In this way, we have successfully introduced element-UI in the project.

Download Code: click here

Elementui-on-demand introduction

On the official website http://element.eleme.io also provided above also need to introduce the method, here also simple operation.

Create a project

This step is the same as above and will not be repeated.

 

On-demand introduction

For on-demand introduction, the official website has provided a very detailed introduction. You can proceed step by step in actual operations.

1. Download the UI component: NPM install element-ui-d

Like above, you also need to configure webpack. config. js

 

2. Install Babel-plugin-component in the project root directory:NPM install Babel-plugin-component-d

3. Modify. BabelrcFile

After completing the above steps, we can introduce relevant components as needed. Take the preceding button as an example.

First introduce the required components in Main. js.

Then use the component in APP. vue.

Use

Because it is introduced on demand, in the actual application process, we certainly will not use a single value to a certain component, so when the number of components increases, the main. adding a file to JS is not a good behavior. It is wise to create a file separately to introduce the component, and thenMain. js. In the following example, a newElement-ui.jsUsed to introduce components.

Download Code: click here

Mint-UI create a project

As before, continue to skip.

Install and introduce

Similarly, the official website of this UI componentHttp://mint-ui.github.ioThe above is also a very detailed introduction.

 

Press and hold the above prompt, first execute the installation command in the project root directory: NPM install mint-ui-s, and then introduce

In this case, OK.

 

Use vue with UI Components