VUE.JS+KOA2 Mobile e-commerce combat-1

Building the front-end environment　Front-end development environment construction

The development model, which uses a front -end separation , is the JSON interface provided by the front-end invocation backend, so that Vue and Koa2 's code has no coupling. So the development environment is completely separate, you can even deploy to two servers to run after the development is complete.

　　1. Create a front-end folder

mkdir Smilevue

　　2. Build the project directory using VUE-CLI

Using VUE-CLI is very convenient and fast, it can generate a basic Vue project structure for us.

• Detect NPM version, enter in Terminal npm -v , try to use more than 5.x version.
• Global Install VUE-CLI, enter in Terminal, npm install vue-cli -g .
• Enter in the terminalvue init webpack

When all of these are properly installed, we need to verify that our installation is successful.

3. The test environment is installed successfully

• Use npm run dev to open the test environment.
• Enter the test in the browser http://localhost:8080 .

When you open a page in a browser and the normal page of Vue appears, your project has been initialized successfully. We will be able to program happily in the next lesson.

The importance of a readme.md

It is very important in a real project, especially in open source projects.
So we're going to create a readme.md file, and this is the documentation for your project.

VUE.JS+KOA2 Mobile e-commerce combat-1