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月前
|
人工智能 自然语言处理 运维
基于阿里云云联络中心:智能云客服与普通在线客服架构深度对比,附 RAG/NLU 完整代码实战与落地踩坑优化方案
多数企业分不清传统在线客服规则引擎与阿里云云联络中心 LLM+RAG 智能架构,盲目上线智能客服后投诉上涨、服务效率反向下滑。本文从底层架构、代码实战、落地场景多维度拆解两类系统差异,附 4 段可直接运行的 Python 代码,复盘 8 大高频踩坑点,输出标准化灰度上线与知识库迭代方案,助力技术人员完成客服系统选型与二次开发。
236 1
|
2月前
|
人工智能 安全 Java
MCP 扩展机制:OpenCode 如何通过 Model Context Protocol 接入外部工具
MCP(Model Context Protocol)是连接AI编程助手与外部工具的开放协议,如数据库、API、Jira、Salesforce等。它通过标准化“插头”式接口,支持本地/远程服务器接入,实现安全、灵活、按需调用。OpenCode已深度集成MCP,助力AI真正落地业务场景。
|
2月前
|
存储 人工智能 API
2026年内网RPA离线部署实战:从打包EXE缺依赖到7×24无人值守,8个踩坑记录与完整避坑方案
物理隔离、U盘过安检、服务器不让装Python——内网跑RPA的真实环境远比想象苛刻。本文从一个交付顾问三年二十余个内网项目的实战经验出发,完整梳理了内网离线部署RPA的八大核心难题:真离线与假离线的辨别方法、EXE打包依赖缺失的根治方案、多机脚本同步的管控机制、7×24无人值守的服务器配置、企业批量分发的统一管控、Python依赖嵌入打包的标准流程、离线环境下AI功能的三种替代路径、以及流程源码加密与授权保护的商业交付底线。文末附十项选型对照清单,覆盖API触发、指纹浏览器适配、Agent智能控制、本地OCR、元素智能抓取等差异化能力,帮助个人开发者、工作室及中小企业在零成本起步的前提下
595 0
|
3月前
|
自然语言处理 API
SkillOpt 让你的 Skill 实现自进化
SkillOpt是微软开源的文本空间优化器,专为优化Agent的自然语言技能文档(如Markdown格式的skill.md)而设计。它不修改模型参数,而是通过“执行-反思-更新-验证”闭环,自动迭代出更鲁棒的`best_skill.md`,让技能持续适配真实任务,提升Agent在复杂流程、多源判断、跨项目迁移等场景中的稳定性与准确性。
391 0
SkillOpt 让你的 Skill 实现自进化
|
3月前
|
监控 固态存储 Java
Maven 本地仓库优化:SSD+ 目录结构调整最佳实践
本文深入讲解了 Maven 本地仓库优化的完整方案,包含 SSD 迁移、目录结构规划、清理策略、多版本管理等企业级最佳实践。通过真实案例展示了如何将 50GB 仓库优化到 20GB(减少 60%),构建时间从 12 分钟缩短到 2 分钟(提升 6 倍)。提供完整的迁移脚本、清理工具和监控方案,帮助开发者解决磁盘空间不足、I/O 性能瓶颈等问题。适合 Java 开发者、DevOps 工程师阅读。
|
3月前
|
数据采集 边缘计算 安全
边缘计算与云端协同:老旧注塑机如何通过VBOX实现全量数据上云?
本文介绍智象九维VBOX注塑机边缘网关,首创非侵入式旁路部署技术,无需停机破线,安全监听RS-485/CAN等总线;内置2000+协议解析引擎,支持海天、弘讯等多品牌老旧设备;结合云边协同架构,实现高频数据滤波、特征提取、断点续传,并无缝对接阿里云IoT平台与TSDB,构建高可靠工业数据底座。(239字)
488 8
|
2月前
|
人工智能 前端开发 API
开源「仓颉.Skill」2.0,你现在可以蒸馏任何视频!
感谢大家支持,仓颉.skill(cangjie-skill)1.3K Star了!
1016 3
|
2月前
|
缓存 开发框架 Java
阿里云千问大模型Qwen3.7-Max功能、试用、计费、配置说明
阿里云Qwen3.7-Max是通义千问系列的纯文本旗舰大模型,专为智能体工作流、复杂推理与高强度编程场景设计,具备百万级上下文、深度思考与长周期自主执行能力,同时提供个人免费、新用户试用、按量计费与团队订阅等多元方案,适配个人、团队与企业全场景需求。
1136 0
|
2月前
|
人工智能 JSON 自然语言处理
阿里云百炼工作流搭建中小学教材生成系统完整实操教程
依托阿里云百炼可视化工作流编排能力,无需深度代码开发,即可搭建标准化教学内容生成引擎。教师仅输入教材名称与适配学段,系统自动完成目录规划、章节正文撰写,产出贴合义务教育课程标准的完整教学材料,大幅压缩备课周期,缓解基层教师内容创作压力,助力区域教育资源均衡。整套方案采用低代码画布拖拽搭建,依托Qwen3.7-Max大模型承载内容生成能力,完整拆解节点设计、提示词配置、流程串联、测试发布全流程,同时拓展多类教育延伸应用场景
339 1
|
2月前
|
人工智能 移动开发 安全
Night Plan 夜间算力特惠来袭!Qoder+Meoo 双产品 Qwen3.7 夜间低至 2 折
阿里云Night Plan上线!每晚22:00-次日8:00,Qwen3.7模型低至2折,算力成本直降80%。Qoder全系(含Desktop/CLI/Work)与Meoo秒悟均享优惠,试用/付费用户自动生效,无需开通。夜间挂机跑任务,白天专注调试,降本增效一步到位。