（1）vue-cli2 搭建vue项目

本文主要是介绍（1）vue-cli2 搭建vue项目，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

- 前言
- - 一、准备工作
  - - 1. 下载node.js
    - 2. 打开cmd窗口，查看是否安装成功
    - 3. 配置淘宝 NPM 镜像
    - - 1)第一种方式：
      - 2)第二种方式
  - 二、安装vue脚手架 vue-cli2
  - 三、一切就绪，开始构建VUE项目
  - - 1. 初始化vue项目
    - 2. 运行项目
    - 3. 浏览器访问http://localhost:8080，出现vue页面即创建成功

前言

   无论是使用vue-cli2还是vue-cli3来搭建vue项目，都需要安装node.js以及npm（node.js中带有npm）说明：npm（node package manager）nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）

一、准备工作

1. 下载node.js

下载地址：https://nodejs.org/zh-cn/download/
选择长期支持版本，默认安装

ps:本文安装的windows x64系统版本 node-v12.14.1-x64.msi

2. 打开cmd窗口，查看是否安装成功

查看安装版本 node -v
查看npm版本 npm -v （现在版本的nodejs已经集成npm所以无需安装）
在这里插入图片描述

3. 配置淘宝 NPM 镜像

默认的镜像地址下载依赖速度很慢，建议换成淘宝的地址，操作如下（我用的第一种）：

1)第一种方式：

打开cmd命令窗口，输入

npm config set registry https://registry.npm.taobao.org

验证是否成功：

npm config get registry

如果返回https://registry.npm.taobao.org，说明镜像配置成功。

2)第二种方式

通过安装cnpm设置

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

cnpm -v 来测试是否成功安装，
安装了cnpm，就可以用cnpm install xxx来下载依赖

二、安装vue脚手架 vue-cli2

npm install -g vue-cli

通过vue -V 来查看是否安装成功（注意命令中的V是大写）

三、一切就绪，开始构建VUE项目

1. 初始化vue项目

先打开命令行窗口，然后cd到要创建的目录下
或者直接在对应目录下，按住shift+鼠标右键选择在此处打开PowerShell窗口

例如创建vue01项目

vue init webpack vue01

#按提示选择如下图
在这里插入图片描述
解释：

          Project name 项目名称Project description 项目名描述Author 作者Vue项目构建：运行+编译还是仅运行是否安装vue-router?Use ESLint to lint your code? 是否需要ESlist语法检查Setup unit tests? 是否需要单元测试Setup e2e tests with Nightwatch? 是否需要e2e测试是否在项目创建成功后自动执行“npm install”安装依赖