入门
vite
vite是什么
vite是一个开发工具，用于构建前端项目
vite对比webpack
- vite基于webpack，但是vite的配置更简单，更易用
- vite基于ES6模块化，但是webpack支持CommonJS模块化
创建项目
创建
vue
npm create vite@latest vite -- --template vue框架对比
| 框架 | 特点 | 适用范围 |
|---|---|---|
| Vanilla | ||
| Vue | ||
| React | ||
| Preact | ||
| Lit | ||
| Svelte | ||
| Solid | ||
| Qwik | ||
| Angular | ||
| Marko | ||
| Others |
选择
| 语言 | 特点 | 适用范围 |
|---|---|---|
| TypeScript | ||
| JavaScript | ||
| Offical Vue Starter | ||
| Nuxt | ||
| Vike |
目录结构
- .vscode: vscode配置文件
- src: 源代码目录
- public: 公共目录
- node_modules: 项目依赖包目录
- package.json: 项目依赖包配置文件
- package-lock.json: 项目依赖包版本信息文件
- README.md: 项目说明文件
- vite.config.js: vite配置文件
- index.html: 项目入口文件
- main.js: 项目入口文件
- style.css: 项目样式文件
- App.vue: 项目根组件
- index.css: 项目样式文件
- App.vue: 项目根组件
- index.js: 项目入口文件
- index.css: 项目样式文件
vue3版本的改进
- 性能更好
- 代码更清晰灵活
- 打包体积小
- 更新渲染快
- 类型推断强
- 模板更灵活
数据如何绑定
- 文本插值：
- 属性绑定：
v-bind或: - 事件绑定：
v-on或@ - 双向绑定：
v-model
vue前端页面的优势
- 项目快速启动与迭代
- 学习成本低
- 代码逻辑清晰
- 交互丰富、视图清晰
- 灵活性与开箱即用
v-bind与v-model
v-if与v-show
v-text与v-html
待办事项
属性和方法
不能在setup中使用this，因为还未初始化