Transfer:

This article is used to record how to build an element project through VUE-CLI4, and some of the problems encountered in the middle of the processing method

1. Construction steps

1. Install the node

Verify that node environment variables are configured and node and NPM commands are available

2. Install vue-CLI globally

Install the latest version vuE-CLI

npm install -g @vue/cli
Copy the code

After the installation is successful, you can use the vue command. You can use vue –version to view the vUE – CLI version installed. I have installed version 4.1.2.

3. Create a VUE project

  • Use vue create < project name > to create the project

    vue create vue-demo

  • Wait a short while for the VUE template selection to appear. Default is the default and manually select features is the manual selection

  • For example, manually select a module and use the space bar to select or delete a module. After selecting a module, press Enter to continue:

  • Then all the choices, all the choices are made, and the template is downloaded:

  • After the installation is complete, you can test start:

    cd vue-demo npm run serve

If this page is displayed, the VUE project is successfully started:

4. Install element – the UI

After vue-cli@3, Element prepared a corresponding Element plug-in for vue-CLI, which we can use to quickly install Element-UI. Just go to the project root directory and run vue Add Element:

vue add element
Copy the code
  • Waiting for the plug-in to download:

  • For convenience, select import all:

  • Continue to select and press Enter at last:

  • The installation is complete

As you can see, the plugin automatically updates our dependencies to include Element dependencies and automatically introduces Element into our code, which is very convenient

If the. SVN or. Git file is not accessed, it will generate an operation not permitted error. I’ve had this error with.svn folders, so it’s best to install Element before doing any version control.

  • Test whether Element is installed successfully

    npm run serve

The addition of el-Button on the page indicates that the Element-UI has been successfully installed and the project framework is now complete.

End of the 5.