Introduction to vue series (1)-vue project creation

Brief introduction:

The main purpose of this series is to sort out the knowledge learned before, and have a systematic summary. Throughout the study and practice of Vue, I found that the mechanism and principles of Vue are still not sufficiently understood. When this series is finished, start filling the previous pit ==, and the beginning of the source code interpretation series is also a rough idea for the next Direction, rush rush rush.

Project Background:

The compiler used in this series is vscode, which uses webpack to build the project.

basic configuration:

vscode : click to download ⚆_⚆
ps: install vscode is basically done next (predecessor said'◡')
vscode plug-in configuration : click here to quickly configure (ノ`⊿´)ノ
node.js : click to download❆ (main The purpose is to use npm integrated in node)

Upgrade npm

Use npm -g install npm command
Insert picture description here

Convert to Taobao mirror (to prevent foreign resources from being restricted)

使用npm install -g cnpm --registry=https://registry.npm.taobao.org
Insert picture description here

Install Vue-cli scaffolding

Scaffolding can be compared to the scaffolding we see on daily construction sites. It helps us build the basic development environment, which is the basic structural engineering directory. After the shelf is built, it can be used to complete the directory structure, local debugging, unit testing, hot loading and Code deployment, etc.

Use cnpm install -g vue-cli (-g stands for global) to install Vue-cli scaffolding
Insert picture description here vue-list to view the templates that can be used

Use templates to build Vue projects

Create a new project based on the Webpack template here
Use the cd command to switch to the directory where the project is to be placed
Insert picture description here
Use the vue init webpack xxx (project name) command to create a new Vue project

Insert picture description here Here is a brief introduction to two project running methods:
1. Use the cd command to switch to the project root directory and then npm run dev to run the project. Preview of
successful running
interface (input localhost:8081 or 127.0.0.1:8081 with the browser)
Insert picture description here 2. Use vscode to open the project

Here is a supplementary note that npm run build is used when the project is packaged.

At this point, a new vue project has been initially established. The next chapter will start with the project structure of vue with some simple configuration (ง ˙o˙)ว in development.