如何用vue-cli快速搭建一个vue项目

如何用vue-cli快速搭建一个vue项目
vue-cli是vue的脚手架。脚手架就是工地上为了保证各施工过程顺利进行而搭设的工作平台,vue-cli用来快速搭建一个vue项目。

1.下载Node.js

node.js是一个环境。下载这个环境后我们就可以npm包管理器,去下载很多别人写好的包。http://nodejs.cn/

2.创建一个文件夹,使用vs code打开该文件夹

我在桌面创建一个vuetest文件夹,然后用vs code打开该文件夹
在这里插入图片描述

3.安装vue-cli。

ctrl 加 ~键打开终端,输入npm -v 查看node.js是否安装成功,如下图:在这里插入图片描述
输入npm install -g vue-cli,全局安装vue-cli,如下图:
在这里插入图片描述
待安装完成后,可以输入vue -V(注意这个V是大写),查看是否安装成功,如下图:
在这里插入图片描述

4.创建vue项目

1.vue init webpack project(你的项目名称)
在这里插入图片描述
2.之后vue会配置一些文件,可以一路回车确认。在出现ESlint(这是检查语法规则的,才开始学习vue项目时可以关闭)。在这里插入图片描述

5.cd 进入你的项目名称的文件夹,运行项目

在项目初始化好后
输入cd test
然后输入npm run dev,如下图
在这里插入图片描述

6.成功生成项目

成功生成项目就可以打开浏览器,输入http://localhost:8080
在这里插入图片描述
就会出现vue的欢迎界面,如下图:
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值