Vue3+script setup+ts+Vite+Volar搭建项目

目录

• 使用 Vite 创建 vue + ts 项目
• Vue 3 的三种语法
  • Option API
  • Composition API
  • script setup（Composition API 的语法糖）
• 安装 Volar
• 结尾

好久没有写了，最近看到Vue3.2 发布了，害，又要开始卷了么。
其实我自己本身还没有使用过Vue3 做过实际的项目开发，然鹅又出新东西了……，
新时代农民工真的是左手工作，右手游戏，还要用jio去学习呢。

什么？ 你说谈对象？ xswl，我特么一个农民工也配谈对象？

不卷不行啊，我踏马再看看自己盆友圈发的什么玩意？嗯 ，还是永劫无间香

好了，废话不多说，我们直接开始吧~

使用 Vite 创建 vue + ts 项目

参考 Vite 官方指南

执行执行，创建项目模板

	$ npm init vite@latest
	√ Project name: ... v3_demo
	√ Select a framework: » vue
	√ Select a variant: » vue-ts
	
	Scaffolding project in C:UsersadminDesktopv3_demo...
	
	Done. Now run:
	
	  cd v3_demo
	  npm install
	  npm run dev

项目目录结构说明

	
	├── public                  # 不需要打包的静态资源
	│   └── favicon.ico
	├── src
	│   ├── api                 # 后台 API 接口封装
	│   ├── assets              # 需要打包的静态资源
	│   ├── components          # 公共组件
	│   ├── composables         # 通用的组合式 API
	│   ├── layout              # 页面布局模板
	│   ├── plugins             # 插件
	│   ├── router              # 路由
	│   ├── store               # Vuex 存储
	│   ├── styles              # 样式
	│     └── index.scss        # 全局通用样式
	│   ├── utils               # 工具模块
	│   ├── views               # 路由页面
	│   ├── App.vue             # 根组件
	│   ├── main.ts             # 入口模块
	│   ├── shims-vue