How to run projects in vue.js

How to run the project: 1. Install node and cnpm; 2. Install vue-cli; 3. Initialize a project; 4. Use the cd command to enter the project folder and use the "cnpm install" command to install dependencies; 5. Use the "npm run dev" command to run the project.

The operating environment of this tutorial: Windows 7 system, vue2.9 version, this method is suitable for all brands of computers.

Related recommendations: "vue.js Tutorial"

At the beginning, many people who just started vue.js would pick up the open source projects on GitHub, but found that they didn’t know how to do it. Running open source projects on GitHub is awkward. By consulting online tutorials, I successfully built the project environment and gained a vague understanding of the front-end engineering, so I will share the environment building process with everyone.

First, list what we need:

• node.js environment (npm package manager)

• vue -cli Scaffolding construction tool

• cnpm npm Taobao image

Install node.js

Download from the node.js official website And install node, 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, so if you directly enter npm -v, npm will be displayed as shown below. version information.

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.

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 completion, we can use cnpm instead of npm to install dependent packages. If you want to know more about cnpm, check out the Taobao npm mirror official website.

Install the vue-cli scaffolding build tool

Run the command in the command line,

cnpm install -g vue-cli

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 parts, the environment and tools we need to prepare are ready, and then we can start using vue -cli to build the project.

Build the project with vue-cli

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 in the command line

vue init webpack firstVue

Explain this command, this command means initialization A project in which 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 don’t want to fill in it directly Just press Enter and the default will be fine.

Open the firstVue folder, the project file is as follows.

This is the directory structure of the entire project, among which 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.

Install the dependencies required for the project

To install the dependency package, first cd to the project folder (firstVue folder), Then run the command and

cnpm install

wait for installation.

安装完成之后，会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹，这里边就是我们项目需要的依赖包资源。

安装完依赖包之后，就可以运行整个项目了。

运行项目

在项目目录中，运行命令，

 npm run dev

会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

这里简单介绍下 npm run dev 命令，其中的“run”对应的是package.json文件中，scripts字段中的dev，也就是 node build/dev-server.js命令的一个快捷方式。

项目运行成功后，浏览器会自动打开localhost:8080（如果浏览器没有自动打开，可以手动输入）。运行成功后，会看到如下所示的界面。

如果看到这个页面，说明项目运行成功了。

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程教学！！

The above is the detailed content of How to run projects in vue.js. For more information, please follow other related articles on the PHP Chinese website!