Vue粗略笔记

项目结构

1.  最开始运行main.ts

2.  1.vue 2.vue 汇聚成App.vue

3.  vite.config.ts打包文件

App.vue

   script--ts代码

   template--html

   style--css样式

vue项目的搭建以及运行

1.创建项目：npm create vite

2.项目命名：my-project

3.进入项目：cd my-project

4.安装项目：npm install

5.运行项目：npm run dev

（当你准备将应用发布到生产环境时，请运行：npm run build）

ts+组合式API+setup语法糖

`Vite`项目中，`index.html`是项目的入口文件，在项目最外层。

vue在vscode里需要的插件：`Vue-Official`,`Vue 3 Snippets`

## 1.创建命令

npm create vue@latest

## 2.具体配置

## 配置项目名称

√ Project name: vue3_test

## 是否添加TypeScript支持

√ Add TypeScript?  Yes

## 是否添加JSX支持

√ Add JSX Support?  No

## 是否添加路由环境

√ Add Vue Router for Single Page Application development?  No

## 是否添加pinia环境

√ Add Pinia for state management?  No

## 是否添加单元测试

√ Add Vitest for Unit Testing?  No

## 是否添加端到端测试方案

√ Add an End-to-End Testing Solution? » No

## 是否添加ESLint语法检查

√ Add ESLint for code quality?  Yes

## 是否添加Prettiert代码格式化

√ Add Prettier for code formatting?  No

一个vue文件分为三块

template为页面显示内容，也就是html

script为功能实现区，主要写ts或js代码，

style为样式设计区，主要是css样式选择区

写完一个页面（components/**.vue）需要在App.vue中引入使用，在script中加入引用，在template中结束。

get和set，什么时候读数据就用get,什么时候改数据就用set