首页 前端笔记 正文
  • 本文约733字,阅读需4分钟
  • 121
  • 0

手把手教你安装Vue脚手架

第一步:安装Node.js

这里我不过多进行演示了,以往发过教程,去看就行

安装node.js

第二步:安装vue脚手架

1. 通过win+R键 输入cmd 进入命令行 / win终端都可以

2. 输入 node -v 查看node的版本

手把手教你安装Vue脚手架

3. 我们默认的下载地址是国外的,很慢。所以我们切换淘宝镜像 大家复制命令就行了

npm config set registry=http://registry.npm.taobao.org

4. 输入下方命令 安装vue脚手架

npm install -g @vue/cli

5. 安装结束后 输入 vue 提示以下内容就代表安装成功了

手把手教你安装Vue脚手架

第三步:创建脚手架

1. 首先切换到你想要创建,脚手架的文件夹,文件夹中右键在终端中打开。或者在路径中输入 cmd 就可以进入

手把手教你安装Vue脚手架

2. 创建脚手架文件

1. 利用下方命令 来创建脚手架文件

2. vue create 文件名(中文) 可以自定义

vue create vue_code1

3. 下一步的话,就会提示你下面提示的内容,你用的是vue2还是vue3版本由你自己选择就行了

手把手教你安装Vue脚手架

4. 之后系统就会自动安装脚手架,因为我们之前切换过淘宝的镜像 所以下载速度会比较快

5. 出现 Successfully 和下面这个命令就说明成功了,下面的两行代码 ,任意一行都可以执行vue 的程序

cd vue_test
npm run serve

第四步:运行Vue脚手架文件

1. 在 Vscode 中打开刚才 下载的自定义脚手架文件,然后里面会有一个 src 文件夹,里面的内容大差不差,不用太在意

手把手教你安装Vue脚手架

2. 鼠标右键 点击 src 文件 在集成终端中打开

3. 输入 npm run serve 命令 会提示下图

手把手教你安装Vue脚手架

4. 浏览器中输入 上面两个任何一个地址就行,就可以看到 我们默认的 vue 页面了

PS:样式我就不分享了,留给大家一个惊喜吧 来创建自己第一个 vue 文件吧~

标签:前端笔记
温馨提示:本文最后更新于2024年3月28日 20:28,若内容或图片失效,请在下方留言或联系博主。
评论