「这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战」
前言
因vue玩转的差不多了，日常开发也满足了，打算学习下前端的另一个框架，react，在此 把日常开发用到的创建vue项目，以及现在才出来不久的vite vue3项目，和vite react 项目的创建过程，都记录一下，插个眼，方便以后来翻看。
创建vue项目(工作中还用vue2，别问，问就是求稳)
关于旧版本
Vue CLI 的包名称由vue-cli改成了@vue/cli。 如果你已经全局安装了旧版本的vue-cli(1.x 或 2.x)，你需要先通过npm uninstall vue-cli -g或yarn global remove vue-cli卸载它。
Node 版本要求
Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
安装
yarn global add @vue/cli
用这个命令来检查其版本是否正确：
vue --version
升级脚手架
如需升级全局的 Vue CLI 包， 像我，新建项目的时候，提示我本地的版本不是最新的了，我可以选择升级一下
ps:日常工作中，还是使用vue2，求稳，很多插件在vue2中是稳定运行的，贸然换到vue3，怕出问题
yarn global upgrade --latest @vue/cli
创建一个项目
vue create hello-world
你的电脑第一次创建vue项目，会是这样的
你可以选择默认的配置，也可以自定义选择，要添加哪些配置
如果你已经不是第一次创建vue项目了，并且之前也做过配置了，那么你再创建vue项目，就是这样的界面
创建 vite vue3 项目
因为后来，出现了vue3，vite
Vite，它是尤雨溪在发布 Vue 3.0 时，同步推出的一款前端构建工具。它不光服务于 Vue，同时也对其他的框架如 React、Svelte、Preact 都有一定的支持
Vite 是什么
我们引用官方的一句话来介绍它，“下一代前端开发与构建工具”。
它有以下几个特点：
1、 快速启动，Vite 会在本地启动一个开发服务器，来管理开发环境的资源请求。
2、相比 Webpack 的开发环境打包构建，它在开发环境下是无需打包的，热更新相比 Webpack 会快很多。
3、原生 ES Module，要什么就当场给你什么。而 Webpack 则是先将资源构建好之后，再根据你的需要，分配给你想要的资源。
- 我们现用vite 来创一个vue项目
npm init @vitejs/app
或
yarn create @vitejs/app
- 利用 Vite 安装 Vue3.0 项目
# npm 6.x
npm init @vitejs/app my-vue-app --template vue
# npm 7+, 需要额外的双横线：
npm init @vitejs/app my-vue-app -- --template vue
# yarn
yarn create @vitejs/app my-vue-app --template vue
- 安装依赖运行项目
cd projectName //进入工程项目文件夹
npm install //安装项目依赖
或 yarn
npm run dev //运行项目
或 yarn dev
创建 vite react项目
- 同样是
vite，我们来创建一个react项目
# npm 6.x
npm init @vitejs/app my-react-app --template react
# npm 7+, 需要额外的双横线：
npm init @vitejs/app my-reactapp -- --template react
# yarn
yarn create @vitejs/app my-react-app --template vue
- 还有一个
react标配，也要安装下，别忘了，react-router-dom
npm i react-router-dom -S
或
yarn add react-router-dom
- 最后安装依赖运行项目，同上面
cd projectName //进入工程项目文件夹
npm install //安装项目依赖
或 yarn
npm run dev //运行项目
或 yarn dev
