How to create a VUE project (super simple)

Table of contents

1. Install node.js 

2. Build the vue environment

1. Install the @vue/cli module package globally

2. Execute the command

3. Check whether the installation is successful

3. Create a vue project

1. Create a project

 2. Select the template and package manager, and wait for the project to be created

4. Start the vue project

1. Execute the command

2. Browse the project page

Five, the meaning and function of the vue project directory file

6. Modify the port number

7. Clean up the welcome interface

Supplement: Solution App.vue code is black and white

---

1. Install node.js 

1. Download node.js

 Download link: Download | Node.js (nodejs.org)

 2. Installation

 

 

 

 

 

 3. Check whether the installation is successful

 Open the cmd window to check whether the installation is successful: node -v (if the version number is displayed, the installation is successful)

2. Build the vue environment

1. Install the @vue/cli module package globally

Vue official website: https://cn.vuejs.org/

2. Execute the command

Switch Alibaba Cloud mirror

npm config set registry https://registry.npm.taobao.org

install @vue/cli -g

npm install -g @vue/cli

3. Check whether the installation is successful

vue -V

3. Create a vue project

1. Create a project

Select a folder where you want to create a project, open the control terminal and execute the following command

vue create project name

Note: The project name cannot have capital letters, Chinese and special symbols

 2. Select the template and package manager, and wait for the project to be created

(The blue font indicates the currently selected one, press the up and down keys on the keyboard to select)

After selecting the template, wait for the project to be created

4. Start the vue project

1. Execute the command

        After the project is created, the control page will be as shown in the figure above. At this time, we only need to execute the relevant commands according to the prompt content in the figure above.

cd project name// enter the file directory of the project

npm run serve // ​​Start the built-in webback local hot update development server

2. Browse the project page

After executing the above startup project command, the console page will look like this:

 If the browser does not pop up automatically, manually copy and enter the domain name + port prompted. Access it in your browser

Five, the meaning and function of the vue project directory file

 6. Modify the port number

There is no webpack.config.js file in the project, because the vue.config.js used by the vue scaffolding project.

Create a new vue.config.js in the src parallel directory, fill in the following configuration, and finally restart the server to modify the port number

module.exports = {
    devServer: { // 自定义服务配置
    port: 3000, // 修改的端口号
    open: true
}

7. Clean up the welcome interface

        For our own development, there are many files in the new vue project directory that are unnecessary and can be cleaned up directly

Delete everything under the assests and components folders (don't leave the default welcome page).

        src/App.vue has a lot of content by default, you can delete them all and leave the template, script and style boxes

Supplement: Solution App.vue code is black and white

Just download a vetur plugin

         After installing vetur, the code can be displayed in color, and you can also use a variety of shortcut commands. For example, in the .vue file, directly enter the command vue, and you can directly open the template, script and style boxes.