手把手教你学习vue.js。 搭建vue.js框架(一)

本文详细介绍如何使用vscode和node.js搭建Vue.js开发环境,并创建首个Vue项目,适合前端初学者快速上手。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

创作介绍
这几年前端出了很多前端框架比较火。比如 vue.js 、 Angular.js 和 Ext.js,小编也学习了一下。小编了解得不多,也没很深入得学习啥。就在实际项目中简单得运用了一下下。今天想重新打磨一下基础得。准备从头在搞一遍,特写记录下我得学习过程,希望能帮助想要了解的或者想学习的初学者。
小编这个里就写的是vue.js。因为这个听的比较多吧!个人爱好而已了。

首先我是要选一个开发者工具,这个网上有很多。比如说WebStorm 、 vscode等等,这些工具都没得一定的,据小编的了解这两个是大部分人在用的。小编习惯性用vscode。个人比较觉得vscode比较轻量级,内存不大。

先从官网下载vscode然后直接安装。
vscode:https://code.visualstudio.com/download
在这里插入图片描述
这个仅仅是开发工具而已,还需要安装一个就是node.js。
node.js: https://nodejs.org/en/download/
在这里插入图片描述

这个两个下载好了然后直接双击安装。都是直接下一步下一步了,小编在这里就不一一截图了。
nodejs安装完后,或者想查一下本机有没有安装成功。直接Windows + R 键,输入cmd,直接回车
然后出现dos命令窗体,直接输入node -v 查询当前版本。
在这里插入图片描述
如果安装成功了 这边就显示node的版本。vscode安装完后桌面会有一个图标,也有默认打开一个窗口。
在这里插入图片描述
这就是安装vscode成功并启动的界面。接下来我们就直接搭建一个vue的框架。
好了废话不多说了这里直接开始了。
首先打开dos命令窗口。然后可以用dos命令到指定文件夹里面这里文件夹就是项目文件夹。
我这边设置的是d盘的project文件夹。

在这里插入图片描述
如图这里两个命令第一个是安装高手架,安装这个就可以了。后面安装文件包都是通过npm去安装的。
这个我就不多做解释了。
那接下来怎么创建一个项目工程呢?接下来看!!!
在这里插入图片描述
如图直接创建一个vue的项目了,这个时候你按照上面输入自己的项目名称,作者啥的信息。
其他的不知道的就直接默认就行了。然后就一路回车下去,然后就等待,等看到下图
在这里插入图片描述
在这里插入图片描述

等看到这个时候就表示已经创建成功了。这个时候就可以去对应的文件夹里面查看我们的项目
在这里插入图片描述
这是成功后生成的项目结构。
这个时候我们是不是想启动一下原始项目是啥样子的?大家可以直接输入dos命令 npm run dev。回车
然后就可以看到如下信息:
在这里插入图片描述

看到了最后有一个连接地址是http://localhost:8080. 直接复制这个地址。然后在浏览器里面粘贴并转到。这个时候我们就可以看到一个原始的界面
在这里插入图片描述

这个时候说明我们项目创建成功了。
好了第一篇就写到这里了,下一篇给大家介绍一下项目结构吧 ,然后我们该怎么去写自己的东西/

若是有啥不懂得,可以私信给小编,小编看到了定会及时回复得。
小编在微信公众号中会有一写c#开发基础,从零开始学习c#开发。也欢迎大家关注一下哦。需要什么工具得也可以找小编哦。

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值