携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第1天,点击查看活动详情
前提条件
搭建环境需要使用到node,npm两个前提条件,并且还需要自己装vite环境,如果没有的话可以去搜索装一下,都很简单的,准备好前提条件后再开始以下操作
链接: Node.js官网
链接: Vite官网
创建命令及截图过程
进入需要装项目的文件夹下,在路径位置输入cmd打开命令行,如下图(当然你也可以win+R输入cmd打开命令行后cd转到该文件夹下)
1、创建项目npm init vite yourProjectName
名称一般都是全小写,这里的yourProjectName就是你自己要创建的项目的名称
2、选择你要用的框架
这里使用键盘上下↓键和回车键,选择vue即可
3、选择是否使用TS
我没有用ts,这我依旧选的vue,之后可以根据个人爱好选择使用ts
这样就会告诉你是否已经创建成功,可以看见下图
看到这个页面后就能在最开始打开命令行的文件夹下看到新创建的项目
4、cd yourprojectname进入项目根目录
根据命令行给出的提示进入项目根目录下
5、初始化项目npm install
这里可以在当前命令行,也可以使用编辑软件打开项目后新建一个终端,在编辑软件中进行项目的初始化
6、使用编辑软件打开项目
打开VSCode(当然其他的软件也可以),点击文件,点击打开文件夹,选择刚刚建立的项目文件夹
此时项目文件内容为下图
7、打开内置终端运行项目
在终端中输入npm run dev运行项目,这里能看到终端提示本地localhost可以访问,我们只需要把该链接复制在浏览器访问即可,
但是Networker没有显示,这时,我们需要打开项目的package.json文件,找到"dev": "vite"这行代码,在后面添加--host 0.0.0.0并保存
8、再次重新运行npm run dev项目
这时我们停止上一个运行状态(Ctrl+C),再次重新启动项目,就能够看到Networker了
9、使用浏览器访问http://localhost:3001/,出现下面这个就是成功了
到此为止这里就创建了一个很轻量vue3框架,后续需要各种的其他依赖都需要继续自己通过npm添加,详情可见下一篇博客