Home  >  Article  >  Web Front-end  >  How to build vue development environment with vue-cli+webpack

How to build vue development environment with vue-cli+webpack

php中世界最好的语言
php中世界最好的语言Original
2018-04-13 17:23:121929browse

This time I will show you how vue-cli webpack builds a vue development environment. What are the precautions for vue-cli webpack to build a vue development environment. Here are practical cases. Let’s take a look. one time.

Here we need to download node first, because we need to use npm package download, which is based on node

Without further ado, let’s get straight to the point

Download node, and you need to download git at the same time. From now on, we will enter commands on git to build our vue environment

Git uses the linux command

Don't ask why, as long as it works, don't you think so?

Windows system, after downloading git, we right-click on the desktop and you will see git Bash, click on it, and then open git,

Git has many functions. At the same time, git can push your files to github. Github is a very good warehouse management tool

Okay, let’s start directly. After opening git,

will be displayed. Then we execute npm inst<a href="http://www.php.cn/wiki/1483.html" target="_blank">all</a> webpack

The latest version of webpack will be automatically downloaded

Here we go directly to the topic, how to use vue-cli to build a vue development environment

Here we need to install globallyvue-cli

Execute npm install vue-cli -g in git to install the vue command environment

Execute vue --verson to check whether the installation is successful,

Displaying the vue version means the installation was successful

This is a global installation

Now we enter vue init webpack-simple<template name on the command line, which is the name of your project>,

Here we use webpack-simple to build it, because it does not have strict specifications and is better than most programmers. I will not go into details about the difference between it and webpack here. If necessary, you can leave a message below. We share with you

My project name here is myvue

So I execute vue init webpack-simple myvue

There will be a myvue folder on the desktop

We execute cd myvue to enter our project

You will find these files in the folder. This is the environment that vue-cli automatically builds for us

We execute npm install

At this time we need to wait for a while, npm is downloading some files based on node for us,

Then you will find that there is one more node-modules file, which contains some modules of node

Then we execute npm run dev

on the command line vue automatically opened the browser and ran the vue project

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to implement Ajax request function in JS

Angular implements table filtering and deletion functions

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn