VUE-3 环境搭建

最近学习前端webgis，准备使用vue-3作为脚手架，中间踩了不少坑，今天总结一下

首先安装node.js ，版本最好高一点，这样可以适配vue3，这个安装比较简单，就不做阐述

不知道自己版本的可以win + r进入cmd 输入 node -v

新建一个文件夹，以这个文件夹为目录进入命令面板

npm init vue@latest

在终端中输入此命令 

Need to install the following packages:
create-vue@3.10.4
Ok to proceed? (y) y

输入y回车确定。 

请输入项目名称：  vue-base 

可以自定义项目名称

 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否 / 是

这里都勾选否，后面继续学习的时候可以自己去勾选

 后面会提示初始化完成

项目初始化完成，可执行以下命令：

  cd vue-base
  npm install
  npm run dev

 

依次运行，这里出现warning不要担心，不报错就行

PS D:\webgis\test01_vue3搭建> cd vue-base
PS D:\webgis\test01_vue3搭建\vue-base> npm install

added 31 packages in 38s

4 packages are looking for funding
  run `npm fund` for details
PS D:\webgis\test01_vue3搭建\vue-base>  npm run dev

> vue-base@0.0.0 dev
> vite

出现以上结果。

 VITE v5.4.2  ready in 446 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

最后会出现一个local网站，复制到浏览器中打开即可。 

出现此结果则安装完成。