Vite 官方文档:
****
下面演示创建一个名为`learn-vue3-vite`项目,步骤如下:
**1. 创建项目**
```shell
## 创建项目
> npm create vite@latest
* ? Project name: learn-vue3-vite --输入项目名
* ? Selecta framework:
* vue --选中vue
? Select a variant:
* vue-ts --选择vue-ts
## 然后就创建了 learn-vue3-vite 项目
Scaffolding project in D:\vue3_\learn-vue3-vite...
Done. Now run:
cd learn-vue3-vite
npm install
npm run dev
```
**2. 启动项目**
```shell
> cd learn-vue3-vite
> npm install
> npm run dev
```
访问 http://localhost:3000/ 看到下面页面说明项目创建并启动成功了。
![](https://img.kancloud.cn/77/c5/77c59ac37c834c562ed62208e0a72acb_780x397.jpg)
**3. 项目目录介绍**
```
|—— projectName
| |—— .vscode
| |—— node_modules #npm加载的项目依赖模块
| |—— public #公共资源目录
| | |—— favicon.ico
| |—— src #我们要开发的目录,基本上要做的事情都在这个目录里
| | |—— assets #放置一些图片,如logo等
| | | |—— logo.png
| | |—— components #目录里面放了一个组件文件,可以不用
| | | |—— HelloWorld.vue
| | |—— App.vue #项目入口文件
| | |—— env.d.ts
| | |—— main.ts #项目的核心文件
| |—— .gitignore
| |—— index.html #首页入口文件,你可以添加一些 meta 信息或统计代码啥的
| |—— package-lock.json
| |—— .babel.config.js
| |—— package.json #项目配置文件
| |—— README.md #项目的说明文档,markdown 格式
| |—— tsconfig.json
| |—— tsconfig.node.json
| |—— vue.config.ts
```
- nodejs
- 同时安装多个node版本
- Vue3
- 创建Vue3项目
- 使用 vue-cli 创建
- 使用 vite 创建
- 常用的Composition API
- setup
- ref
- reactive
- 响应数据原理
- setup细节
- reactive与ref细节
- 计算属性与监视
- 生命周期函数
- toRefs
- 其它的Composition API
- shallowReactive与shallowRef
- readonly与shallowReadonly
- toRaw与markRaw
- toRef
- customRef
- provide与inject
- 响应式数据的判断
- 组件
- Fragment片断
- Teleport瞬移
- Suspense
- ES6
- Promise对象
- Promise作用
- 状态与过程
- 基本使用
- 常用API
- async与await
- Axios