大前端学习之旅（8）-本地搭建VUE开发环境（vite+vue-cli）

Vue.js是现在比较优秀的Web前端框架，下面开始从零开始搭建一个Vue3项目。流程如下：

一、安装node.js
1.进入node.js官网下载相应安装包：https://nodejs.org/en/

注：这里建议选择14.17.5 版本。

安装过程没有什么要注意的地方，直接安装到自己想安装到的目录里面就可以了

二、确认Nodejs 是否安装成功

1、打开命令行，输入node -v 来判断是否安装成功

2、在安装node的时候，npm包管理器会自动安装，我们在命令输出 npm -v 看看是否安装成功

3、安装vue-cli 脚手架

yarn global add @vue/cli
# 或
npm install -g @vue/cli

安装完成后，使用vue-V(注意是大写V)查看是否安装成功

三、使用vite2和cue-cli创建本地项目

1、创建项目文件夹

2、进入项目文件夹，在地址栏输入CMD 调出命令窗口

3、使用一下命令开始安装

npm init vite 

4、配置项目名称-需要注意的是，项目名称需要小写

5、输入名称后回车进入下一步，通过上下键移动到vue 上，空格选中

6、选择是否使用TS，建议选择TS，空格选中，完成初始化配置

7、根据命令，一次执行，开始本地化安装

在安装过程中，需要下载，耐心等待即可

安装完成截图

启动本地项目,等待项目启动完成，可以看到项目的访问地址

8、访问页面，可以看到页面正常访问，到此项目初始化搭建完成