学习vue3的搭建

Vue3 + Vite项目构建

环境准备

1. NodeJs安装

安装NodeJs，安装成功后，以管理员身份打开命令行，输入命令

node -v

查看NodeJs版本；输入命令

 npm -v

查看npm版本。

2. 安装cnpm

因为npm是国外的，下载资源的时候会翻墙，这会降低下载速度，所以使用cnpm。输入命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

等待安装完成，然后查看 cnpm 版本

cnpm -v

3. 安装vue-cli

执行命令

cnpm install -g @vue/cli

安装完成后，输入命令注意最后一个是大写的V

vue -V

显示vue的版本。

4. 安装 yarn

执行命令

npm  install -g yarn

配置yarn 下载的国内淘宝镜像

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

查看 yarn 镜像

 yarn config get registry

Vue项目搭建

1. 创建web文件夹

通常创建一个web文件夹（如web-projects）来管理自己的web项目，方便自己查看和管理，切记路径中不能有中文

2. 打开命令行

进入web文件夹，这里以web-projects为例

3. 使用yarn + vite 创建vue项目

在命令行中执行命令

yarn create vite 项目名称 --template vue

创建成功后，进入创建的项目目录，然后 执行 yarn 命令进行依赖的安装

5. 启动项目

执行命令

yarn dev

启动项目，出现如下界面表示启动成功

6. 浏览器中访问

打开浏览器，输入

http://127.0.0.1:5173/

访问