In the recommendation of the brother, it is very embarrassing that I don’t know how to run the open source project on GitHub. Through consultation online tutorials, successfully build project environments, and have a cognition of the previous engineering, so share the environmental build process to everyone.
You can look at my github: https://github.com/padipata, there is some Vue project that I have learned, work.
First, the things we need:
- Node.js environment (NPM package manager)
- VUE -Cli Scaffolding Tool
- CNPM NPM Taobao mirror
Install node.js download and install Node.js official website, the installation process is very simple, all the way “Next” Yes (fool-mounted). After the installation is complete, open the command line tool, enter Node -V, as shown below, if the corresponding version number appears, the installation is successful.
NPM package manager is integrated in Node, so directly input NPM -V will display NPM version information as shown below.
OK! The Node environment has been installed, and the NPM package manager has. Since some NPMs are shielded or foreign resources, they often lead to failure when using NPM installation and dependent packages, all I also need NPM domestic mirror — cnpm.
Enter npm install -g cnpm –registry = http://registry again in the command line and then waiting, installation After the following figure
, we can use CNPM instead of NPM to install the dependent package. If you want to learn more about CNPMView Taobao NPM mirror official website.
Installing the Vue-Cli Scaffolding Tool
Installing the Vue-Cli Scaffolding Tool Run the command CNPM Install -G Vue-CLI in the command line, then wait for the installation to complete . (Note, here CNPM is used to replace NPM, otherwise the speed is super slow, which will cause the card to pass through the above three, the environment and tools we need to prepare are ready, and then start using the Vue-CLI to build the project.
Use Vue-CLI to build project
Build a project with Vue-CLI to create a project, first we want to select a directory, then transfer the directory to The selected directory. Here, I chose the desktop to store new projects, then we need to put the directory CD to the desktop, as shown below
In the desktop directory, run commands in the command line Vue Init Webpack FirstVue. Explain this command, this command means to initialize a project, where webpack is a build tool, that is, the entire project is based on WebPack. WherefirstVue is the name of the entire project folder, this folder automatically generates in the directory you specify (in my instance, it will generate this folder on the desktop), as shown below.
When running the initialization command, let the user enter several basic options, such as project name, description, author, etc. If you don’t want to fill it directly, you will be free.
Open the firstvue folder, the project file is as follows.
This is the directory structure of the entire project, where we are mainly modified in the SRC directory. This project is now just a structural framework, and the dependent resources needed throughout the project have not been installed, as shown below.
The dependence required to install the project
Depending on the installation project to install the dependent package, first CD to the project folder (FirstVue folder), then run the command CNPM Install, wait for the installation.
After the installation is complete, it will be more than a Node_Modules folder in our project directory firstvue folder, which is the dependent package resource required by our project.
After the relying on the package is installed, the entire project can be run.
Run the project in the project directory, run the command NPM Run DEV, run our application in a hot-loaded manner, hot load can make us After modifying the code, you can see the modified effect in real time after you can see the browser.
Here is a brief introduction to the npm run dev command, “Run” corresponds to the DEV in the scripts field in the package.json file, that is, Node Build / Dev A shortcut for the -server.js command. After the project is running, the browser will automatically open localhost: 8080 (if the browser is not automatically opened, you can manually enter). After running is successful, you will see the interface as shown below.
If you see this page, the project run is successful.
The above is how to operate the Vue project for detailed explanation, I hope that if you have any questions, please reply to everyone in a timely manner. Thank you very much for your support of Tumi Cloud Website!