第一个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
posted @ 2020-07-11 10:00  Kefi123  阅读(275)  评论(0编辑  收藏  举报