Vue3快速入门（一）环境配置与项目创建

开发环境：

• vue 版本：vue3
• node 版本：18.3 以上 淘宝镜像配置
• 开发工具：VsCode

目录

1、node下载

node官网：https://nodejs.cn/download/

2、vue-cll 安装

3、淘宝镜像配置

4、VsCode 的下载安装

5、安装 Chrome 浏览器

6、万事俱备，开始创建vue3项目

（1）vite 的安装

（2）项目文件夹创建

（3）创建 vue3+Ts 项目

（4）安装依赖运行vue3项目

---

1、node下载

• node官网：https://nodejs.cn/download/

2、vue-cll 安装

• vue 官网：https://cn.vuejs.org/guide/quick-start.html

//安装vue脚手架
npm install -g @vue/cli  

vue -V  //查看版本信息,能够查看到就说明安装成功了

3、淘宝镜像配置

• 将npm默认的registry修改为淘宝registry
• npm 默认的 registry ,下载 npm 包时会从国外的服务器下载，国内下载会很慢，可以更换为国内镜像：
• https://registry.npm.taobao.org（官方已更换域名） https://registry.npmmirror.com。
• 相关文档：Node.js安装与配置（详细步骤）_nodejs安装及环境配置-优快云博客

1、查看当前镜像路径
npm config get registry

2、更换npm为国内镜像
// npm config set registry https://registry.npm.taobao.org （旧的已废弃）
npm config set registry https://registry.npmmirror.com （新的）

3、检查镜像是否配置成功
npm config get registry

4、VsCode 的下载安装

• 官方下载地址：Visual Studio Code - Code Editing. Redefined
• VsCode 中文网：Vscode中文网 vscode中文网 下载 Visual Studio Code
• Vue - Official插件（官方的vue插件，支持语法高亮、代码提示、代码模板等功能）

5、安装 Chrome 浏览器

• （1）Chrome浏览器下载地址：Google Chrome 网络浏览器

• （2）插件工具下载与安装：

6、万事俱备，开始创建vue3项目

（1）vite 的安装

• 官网地址：开始 | Vite

Vite 需要 Node.js 版本 >= 12.0.0。

//全局安装vite 
npm install -g vite
//查看版本
vite -v

（2）项目文件夹创建

（3）创建 vue3+Ts 项目

npm create vue@latest //创建vite 工程项目

（4）安装依赖运行vue3项目

• 此时vue3+TS+vite的项目已经创建完成

更多Vue3相关文档:

• 从入门到精通：Vue3一篇文章搞定！-优快云博客
• https://cn.vuejs.org/guide/quick-start