初始化项目
vue3官方提供了两种初始化项目的方式，分别是Vite和vue-cli，两个都可以作为Vue3项目的脚手架工具来帮助我们快速创建项目，Vite对比vue-cli或者各类基于webpack的脚手架工具来说，最大的优点就是快速的服务器预编译能力和热更新能力，不用在开发时每修改一个地方刷新需要等上半天，所以在以下的项目中我们会选择Vite作为脚手架工具。
-
Vite: 是基于浏览器原生ES modules （import / export）实现的开发服务器，在开发环境下，使用浏览器端解释imports，服务器端按需编译返回，跳过了打包的概念，这种思路的实现得益于浏览器端对于ES modules 日渐成熟的支持，而最后的生产环境则使用 Rollup 来进行打包(关于为什么使用Rollup？)。
-
vue-cli: 是基于webpack来实现模块化编译打包。
关于Vite的更多详细介绍可以查看Vite官网。
章节内容：
- 安装项目
- 安装依赖
安装项目
通过Vite安装项目
# npm 6.x
npm init @vitejs/app ctcode-vue3 --template vue
# npm 7+
npm init @vitejs/app ctcode-vue3 -- --template vue
或者
yarn create @vitejs/app my-vue-app --template vue
这里作者使用的是
npm 6.x的命令，后续涉及安装依赖都使用npm。
查看项目项目创建完毕后的目录结构
- ctcode-vue3
- public // 公共资源文件夹
- src // 主要开发目录
- .gitgnore // git忽略文件
- index.html // app首页
- package.json // 项目配置文件
- vite.config.js // vite配置文件
安装依赖
接下来安装项目依赖的第三方包，进入项目目录
cd ctcode-vue3
下载安装所有依赖包
npm install
或者
yarn install
启动项目
npm run dev
项目启动后默认端口是 :3000，可以打开 http://localhost:3000 查看效果啦~！
到这里项目就创建成功了。
查看代码：
git clone https://github.com/chitucode/ctcode-vue3.git (已下载可直接checkout)
git checkout v1.0
好友微信号
添加大佬微信 和上千同伴一起提升技术交流生活
hsian_`
最后
码字不容易 你的点击关注点赞留言就是我最好的驱动力
