第二十一讲 vue环境搭建以及入门

本章主要介绍vue的开发环境搭建以及vue项目的创建

（vue我也只会照葫芦画瓢，不是太会，所以这一方面你自己看一些资料吧）

一、node.js安装

1、Vue项目通常通过webpack工具来构建，而webpack命令的执行是依赖node.js的环境的，所以首先要安装node.js。node.js的官方地址为：https://nodejs.org/en/download/，下载相应版本(64位)。

1.png

2、安装完毕之后，在cmd命令行下验证是否安装成功：输入npm，显示如下就表示安装成功。

image.png

二、cnpm的安装

安装完node之后，npm包含的很多依赖包是部署在国外的，在天朝，下载速度是超级慢。我们可以安装cnpm，cnpm是淘宝对npm的镜像服务器，这样依赖的包安装起来就快多了。
安装命令为：npm install -g cnpm --registry=https://registry.npm.taobao.org

三、vue-cli的安装

vue-cli是vue官方提供的一个命令行工具，可用于快速搭建应用框架。
安装命令为：cnpm install -g vue-cli，回车，安装。
安装完后，检查是否安装成功，输入vue，出现以下提示表示安装成功。

image.png

四、新建一个Vue项目

1、新建一个项目文件夹，命名为 vue-demo，cd到此文件夹，输入:vue init webpack vue-demo，回车，按照如下操作进行初始化(默认按回车即可，碰到YES/NO，按照如下图输入Y或者N即可)

image.png

2、初始化完成之后，会有如下提示，表示无问题。并且告诉了我们如何运行当前项目：npm run dev

3、cd到vue-demo 文件夹，执行cnpm install，安装依赖包，安装完成之后，项目目录下多了node_modules
4、运行项目：npm run dev
命令行中出现以下提示，表示运行成功

5、浏览器中访问：http://localhost:8080/