Before, a friend asked me to help find an easy introduction to VUE. I went all over the Nuggets and still couldn’t find anything. Thanks to an interest in interface testing. Use Vue to create a front-end interface testing tool (similar to postMan on the browser side). The first step is to build a handy development environment. This includes node installation, vuE-CLI installation, editor installation, project initialization, and ESLint configuration.

Ps: The construction of the environment in this paper is based on MAC, if you need help with WIN and friends. Please leave a message in the comment section and fill in the part under WIN environment when I go to the Internet cafe

First, install Node

  • Log in firstThe node’s official website

    Concise official website comes into view, the huge green button makes people can’t help but want to point him, do not restrain the inner thoughts, click ^_^.

  • If the following page appears, the installation package is real ~.
  • The next step is to clickContinue toContinue all the way to Rome.
  • The final step is to verify the Node installation. Open any terminal you like and typenode -vPress enter to

    If the terminal displays this, congratulations on your successful installation. If the installation fails small partners do not be discouraged, canThe baidu

Next, install vuE-CLI

  • Execute the commandnpm i -g vue-cliIf downloading the NPM package takes too long, you are advised to run the following command to switch the Taobao image
#Set the NPM image to Taobao image
npm config set registry https://registry.npm.taobao.org
#Restore the NPM image to the official image
npm config set registry https://registry.npmjs.org
Copy the code
  • Run the download command on the clivueThe following figure shows that the installation is successful

Then, install the editor

Front-end development can theoretically use a variety of editors, but Visual Studio Code is recommended for consistency, why use this?? Let’s talk about it in detail

Again, the project is initialized

  • The terminal switches to the project directory
  • Create the project as shown in the following figure

    In case the giFs are too large, the entire process will not be recorded here.

  • When the installation is complete, execute the traditional commandnpm run dev

After executing NPM run dev, open your browser and open localhost:8080 and you will see a large V in your browser.

eslint

Finally, ESLint is configured

The ESLint configuration was detailed in step 2, setting up a development environment, in my previous article [Lift you up a scaffolding hand in hand], so I won’t repeat it here. Through the configuration of this article, we can do js file error identification and automatic repair. For those who are interested, open the main.js file in the project directory

Command + s

npm run dev

On closer inspection, it is not difficult to find that the contents of the command line error are ***. Vue files, that is simple.

  1. Use vscode to open the project directory
  2. Press the combination keyCommand + .Enter preferences
  3. Enter in the input boxeslint.validateEnter, hitEdit in setting.jsonNext move your mouse to the left as shown in the picture, click on the pencil, and copy to Settings.
  4. Add a line to the companion configuration pasted on the left{ "language": "vue", "autoFix": true } Remember to save
  5. Go back to app. vue and the red wave is displayed normally. Press againCommand + sTry 😄

At this point, the development environment is set up. If you have any questions, please comment in the comments section.

Next set: After setting up the development environment, the next step is to draw the front-end page based on Element-UI. Welcome to preview ~