Vue/Cli Creating a project

1. Download the node. Js

Download it from nodejs.org/zh-cn/ and choose a long-term support version or the latest version.

2. Installation node. Js

After the download is complete, double-click to start the installation.

3. Use NPM in Node.js to install @vue/ CLI scaffolding

Run win+r and enter CMD to enter the command line mode. Since the NPM source is located abroad, use Taobao NPM image to speed up the download. Enter the following command:

npm config set registry=http://registry.npm.taobao.org
Copy the code

4. Use NPM to install @vue/ CLI

Enter the following command:

npm install -g @vue/cli
Copy the code

To check whether the @vue/ CLI installation is complete, run the following command:

vue -V
Copy the code

5. Use @vue/ CLI to create an app

Enter the following command in the command line, and fill in the project name according to your own needs. I fill in ‘Hellovue’ here:

Vue create Project nameCopy the code

Next, you will be asked to select the Vue version number. We will select the Vue2 version in the textbook, which is to press enter.

Be patient for a while, NPM is starting to initialize the project

6. Modify the code in the project to complete the job requirements of the first Vue

After initialization, the command line interface displays as follows, and we can see a ‘Hellovue’ folder in the user directory.

Modify Component HelloWord to add student id, class, and name.

7. Run the project to check whether the result meets expectations.

First go to the project directory

CD project name // for example CD HellovueCopy the code

Then enter the following command on the command line to start running the project deployed on the server:

npm run serve
Copy the code

Preview in the browser

Project released

1. Package projects

After the dist project is packaged, you can see the release file in the root directory of the project by entering the following command.

npm run build
Copy the code

2. Upload the project to the pagoda

Select add website from the pagoda website function card and fill in the following content. The domain name can only be resolved after being put on record.

!!!!!!!!! ★★★★★★★ If no record is registered, you can enter the server IP address in the domain name field. !!!!!!!!!

Upload all contents in dist directory to the root directory of the website (select Dist folder), open dist folder in the middle of the server page and cut the contents to the home directory of the website (that is, the same directory as dist folder).

The root directory of the website is as follows:

3. Add domain name resolution

Here take Ali Cloud as an example, find the domain name resolution in the console, add the domain name resolution to your website, I choose to resolve to vue. Cy0u.top (here the secondary domain name is filled in according to their own needs, the primary domain name is their own application).

4. Visit the published website

Enter the domain name. If the domain name cannot be accessed, check whether the server security group configuration or domain name resolution takes effect.