(transfer) Windows environment vue+webpack project construction

  1. First of all, vue.js is a front-end framework. Generally, using vue to create a project needs to be matched with the webpack project construction tool, and webpack relies on the environment of node.js when performing packaging and compression. Therefore, the development of the vue project is required. , we first have to install node.js. The official address of node.js is: https://nodejs.org/en/download/, after the download is complete, follow the general application of windows, you can install it successfully all the way to next, it is recommended not to install it on the system disk (such as C :).

  2. After installing node, we need to install cnpm. Since many npm packages are abroad, the installation is very slow, so we use Taobao's mirror server here to install the modules we depend on.

The installation command is: npm install -g cnpm --registry= https://registry.npm.taobao.org Then press Enter and wait for the command

  1. Then install the global vue-cli scaffolding to help build the required template framework

The command is: cnpm install -g vue-cli, press Enter, wait for installation

After the installation, you can enter vue and press Enter. If the information of vue appears, the installation is successful.

  1. Next, it's time to create a project, find a suitable place, create a new project folder, name it according to your needs, mine is my-vue, then open this folder, right-click git bash here, and navigate to In this folder, enter: vue init webpack my-vue (project folder name), press Enter, wait for a while, the items under 'git' will appear in turn, you can operate as follows:

    At this time, observe my-vue There is another vue-test folder under the folder, which is the folder of the vue project, as shown in the figure

  2. Then enter this folder through the command: cd vue-test, use the command: cnpm install, press Enter, wait for a while, go back to the project folder, you will find that there is an additional node_modules folder in the project structure (this file The contents are the dependencies installed before).

  3. Continue to enter cnpm run dev in the command line to test whether the environment is successfully set up. If the following figure appears, it means success:

    Enter localhost:8080 in the browser to view the page as follows:

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325008829&siteId=291194637