使用Vite创建Vue3项目

为啥选vite创建，请看vite官网给出的解释，我只是一个不想记忆的咸鱼。

使用npm搭建项目，要求 Node.js 版本 >= 14.18.0。

1. 报上名来创建：在命令行输入npm -v检查版本，然后根据版本做选择，真的很快！！！

# npm 6.x版本，使用这个
npm init vite@latest <project-name> --template vue

# npm 7版本以上，要多加两条杠
npm init vite@latest <project-name> -- --template vue

我的npm版本是7以上，输入以下命令进行创建项目，然后根据步骤安装依赖包，运行服务

npm init vite@latest <project-name>（项目名任取） -- --template vue

2. 深藏功与名创建：npm init vite@latest

图片上WARN提示我的node版本有点低，不过也能创建成功，输入项目名，选择vue，然后选择vue-ts，当然也可以选择另一个，然后根据步骤安装依赖包，运行服务

通过浏览器打开页面显示如下：

总结：

这两种方式也就是用不用ts的区别，如果不用ts，哪种安装方式都可以。

下图为文件夹目录：左边使用第一种安装方式，右边使用第二种安装方式。

.
├── public  // 存放静态资源
│   └── vite.svg
├── src    
│   ├── assets // 存放可编译的静态资源
│   │   └── vue.svg
│   ├── components // 存放组件
│   │   └── HelloWorld.vue
│   ├── App.vue  // 全局组件
│   ├── main.ts  // 全局ts文件
│   ├── style.css
│   └── vite-env.d.ts
├── .gitignore
├── index.html  // 入口文件
├── package-lock.json
├── package.json  // 项目描述文件
├── README.md
├── tsconfig.json
└── vite.config.ts  // vite配置文件