安装vue3环境

npm init vite@latest

Need to install the following packages:
  create-vite@4.1.0
Ok to proceed? (y) y
✔ Project name: … vite-demo
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript

  cd vite-demo
  npm install
  npm run dev

我们进入目录在package.json里边我们可以看到。

"scripts": {
  "dev": "vite",           // 启动命令
  "build": "vue-tsc && vite build",   // 打包命令
  "preview": "vite preview"   // 预览生产环境命令
},

开发模式我们使用npm run dev就可以跑起来。访问http://localhost:5173/就可以看到如下页面。

当然也可以按照另一种方式构建npm init vue@latest这里就不再叙述了。

简单介绍目录文件

• assets 存放一些图片
• components 存放一些组件
• App.vue 全局入口文件
• main.ts 全局ts文件
• index.html 入口文件它是通过type model作为引入的做一些处理做一些拦截
• tsconfig.json 是ts的一些配置文件
• vite.config.ts 这里是vite的一些配置文件,plugins: [vue()]这里边放vue的一些解析

App.vue 简单说明

这里边分为三个部分

• 这里边存放一些ts代码，setup模式只能有一个
• <template...> 这里边存放一些标签代码的，单文件中只能有一个template
• 这里边存放一些样式的