从0-1开发一个Vue3前端系统页面-1.创建项目

前言：

        本系列将从0-1完成一个Vue3的前端系统页面，本项目为demo级，可供自学Vue前端或做毕设、课设的同学进行参考。

 1.node环境安装

1.去官网下载：Node.js — 在任何地方运行 JavaScript

2.一镜到底安装(Next)

3.找到文件路径新建两个文件夹：node_global、node_cache如图:

4.配置环境变量

5.配置系统变量

点击下方系统变量新建

新建完成后找到系统变量里面的Path

如图新建

6.配置用户变量

配置完系统变量后配置用户变量，新建同上，最终效果如图选中

然后同上在用户变量找到Path然后添加如图选中的变量

保存配置完成，Win+R打开命令窗口输入cmd再输入node -v和npm -v如图则证明变量配置成功

cd e:      即去E盘再次查询，或cd除C以外的任何盘：

结果同上即证明全局配置成功。

2.Vue脚手架安装

1.选择一个存放项目的文件夹

2.在文件夹除右键终端打开

3.输入npm config get registry查看当前镜像源

4.配置淘宝镜像源(2024最新)

npm config set registry https://registry.npmmirror.com

若报错：

该错误说明淘宝镜像许可证过期，即镜像源链接已更新，那么就需要自己去网上找最新的镜像源了

5.配置完成后安装脚手架

npm install -g @vue/cli

 6.安装成功后如图

7.验证是否安装成功

Win+R打开命令行输入cmd,再输入vue -V，安装成功后结果如图

3.创建Vue项目

1.在建好的文件目录下右键打开终端

 2.输入vue create 你的项目名 回车，这里选择第三项

3.按↓到Linter / Formatter 按空格去掉绿色的选中

4.回车确定后选择自己要创建的项目类型Vue2/Vue3

5.这里是选择配置文件单纯一个文件还是统一放在package.json里面，这里回车确定选择单独放置

6.输入n，这里的意思是是否将此模版作为以后的模版，所以我们选择no        

 7.回车项目创建成功

4.项目运行

1.输入cd demo1

2.输入npm run serve结果如图

3.按住Ctrl点击Local后面的链接，进入页面

4.直接创建项目完成。