从0到1搭建vue3项目 vite+ts+vue3

### 创建 Vue 3 项目并集成 Vite 和 TypeScript 为了设置一个包含 Vite、TypeScript 和 Vue 3 的新项目，可以遵循以下方法： #### 安装 Node.js 和 npm 确保本地环境已安装最新版本的 Node.js 及其包管理工具 npm。 #### 初始化项目结构 使用终端执行命令来创建新的工作目录，并初始化基础配置文件 `package.json`: ```bash mkdir my-vue-app && cd $_ npm init --yes ``` #### 添加 Vite 构建工具支持 利用 npm 来安装 Vite CLI 工具作为全局依赖项以便后续操作更加便捷；对于特定项目的开发，则推荐将其设为局部 devDependencies 类型的依赖项之一： ```bash npm install vite @vitejs/plugin-vue vue-tsc --save-dev ``` 这里引入了三个主要组件： - **Vite**: 提供快速冷启动性能以及按需编译等功能； - **@vitejs/plugin-vue**: 支持 .vue 单文件组件解析； - **vue-tsc**: 增强版 tsc 编译器插件用于更好地兼容 Vue 特性[^1]。 #### 更新 package.json 脚本字段 编辑生成后的 `package.json` 文件，在 scripts 字段下新增如下条目以定义常用的任务指令集： ```json { "scripts": { "dev": "vite", "build": "vite build", "serve": "vite preview" } } ``` 这些脚本允许开发者轻松地启动开发服务器 (`npm run dev`) 或者打包生产资源 (`npm run build`) 并预览最终效果(`npm run serve`)。 #### 设置 tsconfig.json 配置文件 在根路径下新建名为 `tsconfig.json` 的 JSON 文档，用来声明 TypeScript 编译参数。针对 Vue 应用场景建议至少包含以下几个关键属性： ```json { "compilerOptions": { "target": "ESNext", "module": "ESNext", "strict": true, "jsx": "preserve", "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "useDefineForClassFields": true, "baseUrl": ".", "paths": { "@/*": [ "src/*" ] }, "types": ["vite/client"] }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], "exclude": ["node_modules"] } ``` 此配置启用了严格模式和其他最佳实践选项，同时也指定了源码查找范围和别名映射规则[@/* -> src/*][^1]。 #### 准备 main.ts 主入口文件 于 `/src` 下建立 `main.ts` ，这是整个应用程序逻辑起点的地方。在此处导入必要的模块和服务端渲染辅助函数等： ```typescript import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') ``` 上述代码片段展示了如何实例化一个新的 Vue 实例并将它挂载到页面上的 DOM 元素上。 #### 开发第一个单文件组件 (SFC) 同样位于 `/src/components/HelloWorld.vue` 内编写简单的 SFC 结构，这有助于理解 HTML/CSS/JSX 如何共存于一体化的 `.vue` 文件之中： ```html <template> <div class="hello"> {{ msg }} </div> </template> <script lang="ts"> export default defineComponent({ name: 'HelloWorld', props: { msg: String } }) </script> <style scoped> .hello { color: red; } </style> ``` 这段示例中的 `<script>` 标签特别之处在于设置了 `lang="ts"` 属性指示内部采用的是 TypeScript 语法而非普通的 JavaScript 表达方式。 #### 启动应用测试成果 完成以上准备工作之后就可以尝试运行一次完整的构建流程看看是否一切正常啦！ ```bash npm run dev ``` 如果顺利的话应该可以在浏览器里看到预期的结果界面了！此时便成功搭建起了基于 Vite + Vue 3 + TS 技术栈的新一代前端工程框架。