Home>Article>Web Front-end> How to start a vue.js project
Method: 1. Install node.js; 2. Install the vue-cli scaffolding building tool; 3. Use the "vue init webpack project name" command to build the project; 4. Use the "cnpm install" command to project dependencies; 5. Use the "npm run dev" command to run the project.
The operating environment of this tutorial: windows7 system, vue2.9.6 version, Dell G3 computer.
Related recommendations: "vue.js Tutorial"
First, list what we need:
Installation node.js
Download and install node from the node.js official website. The installation process is very simple, just "next step" all the way (foolish installation).
After the installation is completed, open the command line tool and enter node -v, as shown below. If the corresponding version number appears, the installation is successful.
The npm package manager is integrated in node. Therefore, directly entering npm -v will display the npm version information as shown below.
OK! The node environment has been installed, and the npm package manager is also available. Because some npm resources are blocked or are foreign resources, it often fails when using npm to install dependency packages. Therefore, I also need npm's domestic mirror---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 completion, we can use cnpm instead of npm to install dependent packages.
Run the command cnpm install -g vue-cli in the command line, and then wait for the installation to complete.(Note that cnpm is used here instead of npm, otherwise the speed will be super slow and will cause it to get stuck)
Through the above three steps, the environment and tools we need to prepare are ready. Next, start using vue-cli to build the project.
To create the project, first we need 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 the directory 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. Among them, 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, the user will be asked to enter several basic options, such as project name, description, author and other information. If you do not want to fill in the fields, just press Enter to default.
Open the firstVue folder, the project file is as follows.
This is the directory structure of the entire project. Among them, we mainly make changes in the src directory. This project is still just a structural framework, and the dependent resources required for the entire project have not yet been installed, as shown below.
To install the dependency package, first cd to the project folder (firstVue folder), and then run the command cnpm install, Waiting for installation.
After the installation is completed, there will be an additional node_modules folder in the firstVue folder of our project directory, which contains the dependency package resources required by our project.
#After installing the dependency packages, you can run the entire project.
In the project directory, run the command npm run dev, which will run our application using hot loading. Hot loading allows us to modify the code without manually refreshing the browser. See the effects of modifications in real time.
Here is a brief introduction to the npm run dev command. The "run" corresponds to the dev in the scripts field in the package.json file, which is node. A shortcut for the 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 shown below.
If you see this page, it means the project is running successfully.
For more programming-related knowledge, please visit:Introduction to Programming! !
The above is the detailed content of How to start a vue.js project. For more information, please follow other related articles on the PHP Chinese website!
