第一个Vue项目

1.搭建node环境

• 进入node.js官网，下载安装包
• 傻瓜式安装
• 输入如下命令进行测试

-- 查看node版本
node -v
-- 查看npm版本
npm -v

2.安装cnpm

由于防火墙的限制，npm从国外网站下载东西会受阻，所以选择cnpm（淘宝镜像）来代替npm，提高下载速度

• 输入如下命令进行安装

--安装cnpm，-g代表全局
npm install cnpm -g

• 输入如下命令进行测试

--查看当前的cnpm版本
cnpm -v

3.安装webpack

• 输入如下命令进行安装

npm install webpack -g

• 测试有没有安装成功

webpack -v

4.安装vue-cli

• 输入如下命令进行安装

npm install vue-cli -g

• 测试有没有安装成功

vue -V

• 上面的方式安装的是2.xxx版本，如果需要安装vue-cli 3 以上，那么首先需要全局卸载之前安装好的

npm uninstall vue-cli -g

• 再安装Vue CLI 3

npm install -g @vue/cli
（补充一条卸载Vue CLI 3 的命令：npm uninstall -g @vue/cli）

5.第一个vue项目（Vue CLI 2）

• 创建一个文件夹，并进入该文件夹下的命令行，输入如下命令创建项目，创建过程中，根据提示完成基本信息的录入

vue init webpack vue-project1

• 进入项目的文件夹下，安装依赖

cd vue-project1
cnpm install

• 启动项目

npm run dev

• 输入运行地址，如果出现vue的大图标，那么就说明项目创建成功了

localhost:8080

6.第一个vue项目（Vue CLI 3）

• 创建一个文件夹，并进入该文件夹下的命令行，输入如下命令创建项目，创建过程中可根据提示操作

vue create my-app

• 进入目录，启动项目

cd my-app
npm run serve

• 输入运行地址，如果出现vue的大图标，那么就说明项目创建成功了

localhost:8080