手把手教你使用vue-cli4搭建vue前端项目

1. 环境搭建

使用vue-cli脚手架创建vue前端项目首先需要搭建软件环境，这里需要安装node.js、配置npm镜像cnpm、安装vue-cli。

• 安装node.js

  node.js的官网地址：https://nodejs.org/en/，直接下载LTS版本的即可。如下图：

  下载之后双击安装即可。安装完成后打开命令行窗口输入：

  node -v

  可以检查node.js安装是否成功。安装成功命令行会显示node.js的版本号。

• 配置npm的镜像cnpm
  npm(Node Package Manager)是node.js的包管理工具，在安装node的时候已经顺带安装好了， 因为npm是远程将依赖包下载到本地来，所以我们为了下载速度更快，会配置一下国内的镜像地址，命令行输入以下命令：

    npm install -g cnpm --registry=https://registry.npm.taobao.org
  

• 安装vue-cli
  接下来我们用cnpm的命令安装vue-cli，命令如下：

   cnpm install -g @vue/cli
  

  安装完成之后，可以输入以下命令查看安装的vue-cli的版本号，注意是大写的V

   vue -V
  

本次教程中安装的vue-cli版本号为**@vue/cli 4.5.12**

2. 项目创建

上面环境配置好之后，就可以直接在命令行中使用vue命令创建vue项目啦。在要创建项目的目录下打开命令行窗口，输入以下命令：

	vue create hello-vue

hello-vue就是项目的名字，命令输入后回车，会看到下图界面：

可以使用上下箭头选择使用的Vue的版本，本次教程选择的Vue3版本。选择后直接回车即可。看到下图界面说明hello-vue的项目已经安装成功。

3.项目运行

按照上图提示，命令行输入以下命令即可将刚刚创建好的vue项目运行起来

	cd hello-vue
	cnpm run serve

如下图：


打开浏览器，输入http://localhost:8080/可以看到如下页面，说明vue项目启动成功。

4. 项目目录说明

创建好的项目可以使用IDE打开，此教程使用的idea，打开后截图如下：