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。先把基础盘稳住,比一开始追求“企业级模板”更靠谱

目录
相关文章
|
4天前
|
人工智能 JSON 自然语言处理
让教学更智慧:用阿里云百炼工作流,自动生成中小学教材内容#小有可为#有温度的AI
通过可视化工作流编排,将大模型推理能力转化为标准化的教学内容生成引擎。教师只需输入教材标题和适用学段,即可自动获得结构完整、符合课程标准的章节内容,大幅降低备课门槛,助力教育资源均衡化。
447 122
|
6天前
|
人工智能 定位技术 SEO
我学 GEO 第 15 天:终于知道AI GEO该如何做?
我是暴走的莉莉酱,边旅行边研究AI GEO的数字游民。专注普通人如何提升“AI可见度”——让AI在回答用户问题时准确识别、理解并推荐你。不讲玄学,只做可测、可调、可持续的GEO实践。
430 125
|
8天前
|
机器学习/深度学习 人工智能 调度
🐴 HappyHorse 1.1 现已上线阿里云百炼!快来查收模型使用指南,现在调用享 6 折~
HappyHorse 1.1 是新一代视频生成大模型,全面升级动态表现力、角色一致性、指令遵循、视觉质感与音画协同能力。支持I2V/T2V/R2V三类生成,适配短剧、电商广告、品牌营销等场景,提供高质、流畅、可控的AI视频生产力。
719 5
🐴 HappyHorse 1.1 现已上线阿里云百炼!快来查收模型使用指南,现在调用享 6 折~
|
6天前
|
缓存 人工智能 运维
阿里云618百炼大模型Qwen3.7-Max功能、免费试用、订阅计费、配置接入详解
Qwen3.7-MAX是阿里云百炼平台推出的通义千问3.7系列旗舰大语言模型,专为智能体时代复杂任务打造,依托阿里云全域算力与自研技术,在逻辑推理、长文本处理、代码工程、长周期自主执行等领域达到行业顶尖水平。2026年618期间,该模型推出多重免费试用权益、按量计费5折、订阅套餐优惠等专属福利,覆盖个人开发者、团队与企业全场景需求,以下从核心功能、免费试用、订阅计费、配置接入四方面展开详细解析。
430 123
|
4天前
|
人工智能 自然语言处理 API
阿里云Token Plan团队版解析:功能、三档套餐与省钱订阅指南
阿里云百炼平台推出的Token Plan团队版,是面向企业与团队的AI大模型订阅服务,以Credits为统一计量单位,整合文本与图像生成模型,提供团队管理、数据安全、多工具兼容等核心能力,解决团队零散订阅AI服务的管理混乱、成本失控、数据安全等痛点。本文将从核心定位、套餐详情、计费规则、团队管理、工具兼容、便宜订阅技巧等方面,全面解析Token Plan团队版,帮助企业与团队高效、低成本地使用AI服务。
317 108
|
14天前
|
Linux 程序员 数据格式
【2026最新】Notepad++下载、安装和使用一篇搞定(附中文版安装包)
Notepad++ 是一款免费开源、轻量高效的 Windows 文本编辑器,支持 C/Python/HTML 等 80+ 语言语法高亮、代码折叠、正则替换、编码转换及插件扩展,专为程序员与文本处理用户打造,完美替代系统记事本。(239字)
|
5天前
|
存储 人工智能 数据可视化
别再手动复制 Skill 了:多 Agent 时代的 Skill 管理方案
多 Agent 场景下 Skill 的统一管理与同步。
274 125
|
8天前
|
存储 人工智能 监控
QoderWork完全指南:从入门到精通,把“AI实习生”变成你的全能工作搭档
阿里云2026年推出的桌面端AI工作助手QoderWork,不止聊天,更可动手干活:本地运行、安全可控,支持文件整理、数据分析、PPT生成、网页开发等;内置专家套件、多Agent协作与自定义Skills,让AI真正成为你身边的“AI实习生”。