Vue——Vue脚手架安装的详细教程

 

文章目录

• 前言
• 一、前期准备工作
  • 1.安装 Node.JS
• 二、安装Vue/cli  脚手架
  • 1.配置淘宝镜像
  • 2.检查淘宝镜像是否配置成功
  • 3. 安装  vue/cli
  • 4. 使用vue脚手架创建一个项目
• 总结

---

一、前期准备工作

1.安装 Node.JS

Node.js 安装包及源码下载地址为：https://nodejs.org/zh-cn/download/。

安装过程如下图所示

如果你看到这里，那恭喜你，你大概已经完成了Node.js 的下载，那么怎么知道安装成功了呢？我们这就来试试看！

注意 ————  以下在命令窗口中的操作所对应的路径尽可能的不要出现中文，以免后续可能会出现一些问题！！！！

1. 使用 win + R 打开命令窗口并输入 Node -V  查看Node.js 的安装版本。

2.如果出现了对应的版本号，那安装Node.js 这一关卡就顺利通关啦！！

---

二、安装Vue/cli  脚手架

1.配置淘宝镜像

依旧使用 win + R 打开命令输入命令行   ——

npm config set registry https://registry.npm.taobao.org

2.检查淘宝镜像是否配置成功

输入命令行    ——    npm config get registry

如果如下以下提示说明配置成功了！

3. 安装  vue/cli

输入命令行——    npm i -g @vue/cli

接着依旧检查 vue/cli 脚手架是否安装成功！

输入命令行——     vue -V

我这里以我下载的版本号为例：

4. 使用vue脚手架创建一个项目

输入命令行 ——  vue create  a     (此处的a是你的项目名称，可自拟)

接着会出现以下选项，可根据需求自行选择！！!

此时，你所选择的路径中，应该已经出现了你所创建的项目文件。接着你可以选择在命令窗口中启动项目或者在相应的编辑器中 启动项目，这里以VScode 编辑器为例。  

1. 将你所创建的项目在vscode中打开。
2.  在菜单栏中选择 “终端”——“新建终端”
3.  确认路径无误后，输入命令  npm run  serve  以来启动项目
4. 当出现以下提示时，代表你的项目已经成功启动啦！

---

总结

好了，就此停笔吧，如果以上的分享可以帮助到你我很荣幸。最后，依旧诚挚祝福屏幕前的你健康