本人新入手一台电脑，需要安装各种环境配置，顺便把过程记录一下，方便自己以后查看，也欢迎大家参考交流。

目录

一、环境搭建：

1.Node.js安装

2.国内淘宝镜像设置

3.安装vue 环境

二、新建vue项目

1.vue脚手架新建项目

2.命令行运行启动项目

3.查看运行结果以及测试修改信息

---

首先查看自己开发环境 也可参考：vue从零开始配置-CSDN博客

一、环境搭建：

1.Node.js安装

：Node.js — 下载 Node.js® 安装后win+r 命令行查询出现版本号 就表示安装成功了。npm不用单独安装，node安装之后就会附带npm一起安装的

2.国内淘宝镜像设置

命令行执行代码配置：npm config set registry https://registry.npmmirror.com

可参考：npm国内淘宝镜像registry镜像过期-CSDN博客

输入cnpm -v 查询到cnpm版本号说明安装成功了

3.安装vue 环境

命令行输入 cnpm i -g vue @vue/cli 安装

安装成功后 vue -V 出现对应的版本号即表示安装成功，环境安装好了，现在我们来新建一个vue项目。

vue项目编码必备插件参考：必备插件自取 vue3.0 在vscode提升编码效率-CSDN博客

二、新建vue项目

1.vue脚手架新建项目

在命令行输入 vue create todolist 其中 todolist 是你所新建的项目名称，安装包下载成功界面如图所示。

现在我们用vscode编辑器 打开刚刚新建的vue项目 ，可以看到项目结构目录。

vscode安装配置可参考：vscode下载安装配置一步到位超简单-CSDN博客

2.命令行运行启动项目

打开命令行输入npm run serve运行项目。

根据项目运行结果提示 访问本地地址。

3.查看运行结果以及测试修改信息

运行结果默认是vue的初始页面

我们把页面中显示的welcome to Your Vue.js App 信息改成 Hello world！信息，保存后可以看到页面信息已经变化。

现在我们已经成功新建了一个vue项目了。欢迎大家参考交流，谢谢。

如需学习react可参考：React 开发环境搭建 超详细 全面 推荐-CSDN博客