At the beginning, many people who just started vue.js will pick up open source projects on GitHub, but find that they don't know how to run open source projects on GitHub, which is embarrassing. By consulting the online tutorial, the project environment has been successfully built, and at the same time, I have a hazy understanding of the front-end engineering, so I will share the environment construction process with everyone.
First, list what we need:
node.js环境（npm包管理器）
vue-cli 脚手架构建工具
cnpm npm的淘宝镜像
Install node.js
Download and install node from the node.js official website. The installation process is very simple, and you can go to the "next step" all the way (fool installation).
After the installation is complete, open the command line tool and enter node -v, as shown in the figure below. If the corresponding version number appears, the installation is successful.
The npm package manager is integrated in node, so directly entering npm -v will display the version information of npm as shown in the following figure.
OK! The node environment has been installed, and the npm package manager is also available. Due to the fact that some npm resources are blocked or foreign resources, it often leads to failure when installing dependent packages with npm, so I also need the domestic mirror of npm---cnpm.
install cnpm
Enter npm install -g cnpm --registry= http://registry.npm.taobao.org in the command line and wait, the installation is completed as shown below.
After that, we can use cnpm instead of npm to install dependencies. If you want to know more about cnpm, check Taobao npm mirror official website .
Install the vue-cli scaffolding build tool
Run the command cnpm install -g vue-cli in the command line and wait for the installation to complete. (Note that cnpm is used here instead of npm, otherwise the speed is super slow, which will cause it to get stuck there.)
After the above three steps, the environment and tools we need to prepare are ready, and then we will start using vue-cli to build the project.
Build the project with vue-cli
To create a project, first we have to select the directory, and then change the directory to the selected directory on the command line. Here, I choose the desktop to store the new project, then we need to cd to the desktop first, as shown below.
In the desktop directory, run the command vue init webpack firstVue in the command line. Explain this command. This command means to initialize a project, where webpack is the build tool, that is, the entire project is based on webpack. Where firstVue is the name of the entire project folder, this folder will be automatically generated in the directory you specify (in my example, the folder will be generated on the desktop), as shown below.
When running the initialization command, let the user input several basic options, such as project name, description, author and other information, if you don't want to fill in, just press Enter and default.
Open the firstVue folder and the project file looks like this.
This is the directory structure of the entire project, where we mainly make changes in the src directory. This project is still just a structural framework, and the dependent resources required by the entire project have not been installed, as shown in the figure below.
Install the dependencies required by the project
To install the dependencies, first cd to the project folder (firstVue folder), then run the command cnpm install and wait for the installation.
After the installation is complete, there will be an additional node_modules folder in the firstVue folder of our project directory, and here are the dependency package resources needed by our project.
After installing the dependencies, you can run the entire project.
run the project
In the project directory, running the command npm run dev will run our application in hot-loading mode. Hot-loading allows us to see the modified effect in real time without manually refreshing the browser after modifying the code.
Here is a brief introduction to the npm run dev command, where "run" corresponds to the dev in the scripts field in the package.json file, which is a shortcut for the node build/dev-server.js command.
After the project runs successfully, the browser will automatically open localhost:8080 (if the browser does not open automatically, you can enter it manually). After running successfully, you will see the interface as shown below.
If you see this page, the project runs successfully.
Part of the content of this article is borrowed from https://segmentfault.com/a/1190000009871504