Vue 3 环境搭建与 Vite 项目初始化

简介: 本指南详解Vue 3 + Vite项目初始化:推荐`vue-ts`模板,精简起步,避免过早引入复杂依赖;强调`<script setup lang="ts">`语法、合理目录结构及必做生产构建验证,助你快速搭建稳健开发基础。(239字)

Vue 3 环境搭建与 Vite 项目初始化

Vue 3 新项目现在基本都会从 Vite 起步。它启动快,配置薄,和单文件组件配合自然。刚开始别急着装 UI 库、状态库、路由和一堆插件,先把项目骨架、类型检查和构建流程跑顺

创建项目:

npm create vite@latest my-vue-app -- --template vue-ts
cd my-vue-app
npm install
npm run dev

如果用 pnpm:

pnpm create vite my-vue-app --template vue-ts
cd my-vue-app
pnpm install
pnpm dev

入口通常是这样:

import {
    createApp } from "vue"
import App from "./App.vue"

createApp(App).mount("#app")

这是 Vue 应用最小启动过程。后面接 Router、Pinia、UI 库,也是在 createApp(App) 后面逐个 use(),最后再 mount

目录可以先保持简单:

src/
  assets/
  components/
  composables/
  pages/
  stores/
  App.vue
  main.ts

小项目没必要一上来就搞复杂分层。等页面多了,再把业务模块拆出来。过早建一堆空目录,只会让新人不知道代码该放哪

Vue 单文件组件建议直接用 <script setup lang="ts">

<script setup lang="ts">
const message = "hello vue"
</script>

<template>
  <h1>{
  { message }}</h1>
</template>

script setup 少了很多样板代码,类型推断也舒服。除非你在维护老项目,否则新组件可以默认这么写

初始化后一定跑生产构建:

npm run build
npm run preview

开发服务器能跑,不代表生产构建没问题。路径别名、静态资源、环境变量、类型检查,经常在 build 阶段才暴露

我的初始化清单是:Vue + TS 模板,跑通 dev/build/preview,删掉模板无关代码,确定目录约定,再接 Router 和 Pinia。先把基础盘稳住,比一开始追求“企业级模板”更靠谱

目录
相关文章
|
2月前
|
自然语言处理 API
SkillOpt 让你的 Skill 实现自进化
SkillOpt是微软开源的文本空间优化器,专为优化Agent的自然语言技能文档(如Markdown格式的skill.md)而设计。它不修改模型参数,而是通过“执行-反思-更新-验证”闭环,自动迭代出更鲁棒的`best_skill.md`,让技能持续适配真实任务,提升Agent在复杂流程、多源判断、跨项目迁移等场景中的稳定性与准确性。
311 0
SkillOpt 让你的 Skill 实现自进化
|
2月前
|
监控 固态存储 Java
Maven 本地仓库优化:SSD+ 目录结构调整最佳实践
本文深入讲解了 Maven 本地仓库优化的完整方案,包含 SSD 迁移、目录结构规划、清理策略、多版本管理等企业级最佳实践。通过真实案例展示了如何将 50GB 仓库优化到 20GB(减少 60%),构建时间从 12 分钟缩短到 2 分钟(提升 6 倍)。提供完整的迁移脚本、清理工具和监控方案,帮助开发者解决磁盘空间不足、I/O 性能瓶颈等问题。适合 Java 开发者、DevOps 工程师阅读。
|
3月前
|
开发框架 安全 Java
Java 长期支持版 JDK17 下载安装+详细配置步骤
JDK 17 是 Oracle 官方推出的长期支持(LTS)版本,具备高性能、高安全性、强兼容性与丰富新特性(如密封类、模式匹配等),广泛用于后端开发、微服务、大数据及教学实训,是企业级 Java 开发的主流稳定选择。(239字)
2497 0
|
1月前
|
人工智能 前端开发 API
开源「仓颉.Skill」2.0,你现在可以蒸馏任何视频!
感谢大家支持,仓颉.skill(cangjie-skill)1.3K Star了!
|
2月前
|
弹性计算 缓存 测试技术
7月:阿里云服务器配置价格表
阿里云服务器提供丰富的实例规格与灵活的计费方式,覆盖个人轻量应用、中小企业业务、企业级高并发场景等各类需求,不同配置与付费模式价格差异显著,可根据业务负载、使用时长与预算精准选择。
502 0
|
1月前
|
人工智能 运维 容灾
400 电话对接云客服深度技术拆解:中转对接与原生集成架构对比与落地选型最佳实践
在企业客服数字化落地过程中,400热线与云客服系统的打通是构建全渠道语音服务能力的核心环节。目前行业主流包含中转对接、原生集成两种技术实现模式,多数企业在落地时容易出现方案选错、话务卡顿、功能缺失、运维成本偏高、高并发承载不足等问题。 本文基于阿里云云联络中心技术架构,结合行业主流通信服务商的通用落地能力,系统化拆解400电话对接云客服的底层技术、两种对接模式的架构差异、优缺点、适配场景与落地选型标准,搭配实操FAQ与避坑要点,帮助企业技术负责人、运维、开发人员快速完成标准化技术选型与落地部署,内容适配阿里云社区收录、搜索引擎与AI知识库收录规范。
260 0
|
1月前
|
存储 人工智能 知识图谱
基于RAG架构的四标融合企业知识资产体系工程化建设:知识库、场景库、知识图谱与知识链接落地实践
本文提出“四标融合GEO工程方法论”,依托四项国标与ISO 42001,系统构建知识库、场景库、知识图谱、知识链接四大模块,适配RAG架构与大模型检索逻辑,解决企业知识“不可识别、不可检索、不可信赖”痛点,助力AI时代知识资产高效激活。(239字)
|
2月前
|
数据采集 边缘计算 安全
边缘计算与云端协同:老旧注塑机如何通过VBOX实现全量数据上云?
本文介绍智象九维VBOX注塑机边缘网关,首创非侵入式旁路部署技术,无需停机破线,安全监听RS-485/CAN等总线;内置2000+协议解析引擎,支持海天、弘讯等多品牌老旧设备;结合云边协同架构,实现高频数据滤波、特征提取、断点续传,并无缝对接阿里云IoT平台与TSDB,构建高可靠工业数据底座。(239字)
432 8
|
1月前
|
人工智能 IDE 数据挖掘
阿里云Qwen3.7-Max大模型使用活动:每晚22点到次日8点,Qoder与Meoo客户使用Qwen3.7-Max享2折、Plus享4折!
阿里云"Night Plan"夜间优惠计划于每晚22:00至次日08:00,为Qoder和秒悟Meoo用户提供旗舰模型超低折扣:Qwen 3.7-Max享2折、Qwen 3.7-Plus享4折,最高节省80%成本。Qoder全系产品已接入Qwen3.7,覆盖QoderWork CN办公与Meoo创意场景。配套订阅方案灵活多样:Qoder CN个人版59元/月,Teams版99元/月;AI Coding入门套餐69元/月、专业版257元/月,实现工具与算力一站式配置。秒悟Meoo另赠1万积分及每日2000积分,让开发者与创作者零压力享受顶级算力。
|
1月前
|
缓存 开发框架 Java
阿里云千问大模型Qwen3.7-Max功能、试用、计费、配置说明
阿里云Qwen3.7-Max是通义千问系列的纯文本旗舰大模型,专为智能体工作流、复杂推理与高强度编程场景设计,具备百万级上下文、深度思考与长周期自主执行能力,同时提供个人免费、新用户试用、按量计费与团队订阅等多元方案,适配个人、团队与企业全场景需求。
936 0

热门文章

最新文章