(笔记整理)第一个vue创建-步骤总结(5)

1、node.js
Vue项目通常通过webpack工具来构建,而webpack命令的执行是依赖node.js的环境的,
所以首先要安装node.js。 (安装步骤见前几节笔记)
1、安装node.js
安装完毕之后,在命令行下验证是否安装成功:
2、进入命令行
开始-运行- cmd

3、查询node版本
输入 npm -v
显示版本信息就表示node.js安装成功。
在这里插入图片描述
4、 cnpm
安装完node之后,npm包含的很多依赖包是部署在国外的,为了加快依赖包的加载速度,开发中一般选择使用国内的镜像。cnpm是淘宝对npm的镜像服务器,
输入 cnpm
在这里插入图片描述

5 vue-cli安装
vue-cli是vue官方提供的一个命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需一分钟即可启动带热重载、
保存时静态检查以及可用于生产环境的构建配置的项目。安装命令如下:
  cnpm install -g vue-cli
安装完后,检查是否安装成功,输入vue(或者使用vue -v查看版本信息),出现相关的帮助信息则说明安装成功。

6、新建项目
新建一个项目文件夹(如 vue)(忘记没建),cd到此文件夹,输入init命令新建一个vue项目:
vue init webpack vue-demo(vue-demo 是项目名称)

在这里插入图片描述

血和泪:
vue init webpack vue-demo(vue-demo 是项目名称)
为什么一直强调 vue-demo 是项目名称,就是因为在建立项目初期
只会照猫画虎,一步步操作,没太看明白,还以为 vue-demo 是命令中的参数,在命令中经常也会用到 -参数的格式对吧,所以这里在不明白的情况下,当成了命令的一部分,写成了一个空格,也怪自己看的不够仔细,就这一个错误,一直就过不去,始终报错还找不到原因
现在看来只是觉得这错误犯的有够幼稚。
在这里插入图片描述
7、安装依赖
接下来,cd到vue-demo 文件夹下,执行命令安装项目依赖包:
cnmp install

要在项目的文件夹下,安装项目依赖包

8、启动项目
接下来,在命令行里输入命令:
cnpm run dev
执行完成后启动项目,浏览器出现以下接结果,说明启动成功。
在这里插入图片描述
9、打开浏览器,输入网址:http://localhost:8080/#/

在这里插入图片描述

迈向成功的第一步成功。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值