How to build a vue.js development environment

Building the vue.js development environment: first install [vue.js]; then install the npm package manager, modules, webpack and vue scaffolding respectively; finally start to initialize the Vue environment and install project dependencies, go to Vue here The development environment is set up.

[Recommended tutorial: Vue.js tutorial]

Environment preparation

Node.js Javascript runtime environment

npm Package management tool under Node.js

webpack front-end resource modular management and packaging tool

vue-cli scaffolding construction tool

cnpm npm’s Taobao mirror

Vue.js installation

1. The installation of Node.js is very easy. First download the version of the operating system you need from the official website, and then continue to the next step.
After the installation is completed, type node -v on the command line. If the corresponding version number appears, the installation is successful.

2. npm is a package management tool installed along with Node.js. You can check whether the installation is successful by typing npm -v directly on the command line.

Although the npm package manager is available, because the server address of the package that npm download needs to depend on is abroad, access to many resources will be very slow. So we can install Taobao’s domestic mirror.
3. Type npm install -g cnpm --registry=http://registry.npm.taobao.org on the command line.
In this way, you can use the cnpm command to install the module:

cnpm install [name]

4. Install webpack

cnpm install webpack -g

5. Install vue scaffolding

npm install vue-cli -g

Initialize a Vue .js environment

Create a new folder on your computer to store our code. Then use the command line to enter the cd directory path of this folder.
After that, use the command

vue init webpack name

to initialize a vue environment. This command means to initialize a project, in which webpack is the build tool, that is, the entire project is based on webpack. There will be some initialization settings during the installation process. We can use the default configuration and press Enter all the way.

We can also see from the picture above that vue very thoughtfully told us the command to quickly start (To get started)

Installation Project dependencies

must be installed from the official warehouse. The npm server is abroad, so the installation speed of this step will be very slow.

npm install

Do not install from the domestic mirror cnpm (it will result in missing many dependent libraries later)

cnpm install

Install the vue routing module vue-router and the network request module vue-resource

cnpm install vue-router vue-resource --save

Start the project

npm run dev

After successful operation, he will tell you the ip and port number

##Visit this address

If the above picture appears. Congratulations, you are ready to start your Vue.js journey.

The above is the detailed content of How to build a vue.js development environment. For more information, please follow other related articles on the PHP Chinese website!