Vue3初始化代码最简模板|完整示例+常见坑规避直接抄

import { ref } from ‘vue’;
// 响应式数据直接写，不用return
const message = ref(‘Vue3最简模板，直接抄！’);

.app { font-size: 24px; margin: 20px; }

<!-

为什么要这么极简？我跟你说，刚开始学Vue3，重点是搞懂“响应式数据”“组件通信”这些核心逻辑，不是折腾配置文件。我之前帮朋友删了那些没用的插件后，他说“原来Vue3这么简单，之前是被配置吓到了”。真的，最简模板能帮你把注意力放在该放的地方。

初始化时最容易踩的3个坑，我帮你踩过了

我做了3个Vue3项目，初始化时踩的坑能装一筐，挑最常见的3个给你讲，省得你再掉进去。

坑1：setup语法糖漏写，变量全是“隐身”的

我第一次写Vue3组件时，犯了个超低级错误——把写成了，结果模板里根本找不到我定义的message变量，控制台全是“undefined”。我盯着代码看了10分钟，才反应过来：没有setup语法糖，你写的变量不会暴露给模板！

Vue官网明确说，setup语法糖是“推荐的组件写法”，因为它能省掉return语句（以前Vue2要把变量return出去才能用）。现在你只要写，里面的变量、函数直接就能在模板里用，不用再写return { message }了——是不是超省心？

记住：写Vue3组件，第一行先打，别漏！

坑2：ref和reactive用混，数据“死”了不更新

我同事小王，刚开始用Vue3时，把所有数据都用ref包起来，结果写对象的时候翻车了：他定义了const user = ref({ name: '张三' })，然后想改名字，直接写user.name = '李四'，结果页面纹丝不动。他跑来问我，我一看就笑了——ref包的对象要通过.value访问啊！

其实ref和reactive的区别特别好记：

关键是：ref包的变量，改值时要加.value，比如user.value.name = '李四'；而reactive包的对象，直接改属性就行，比如list[0].name = '香蕉'。

我自己的习惯是：基本类型用ref，复杂对象用reactive——这么分，半年没遇到过数据不响应的问题。

坑3：生命周期钩子用错，逻辑“跑错时间”

我之前做一个“获取用户信息”的组件，想在组件挂载后发请求，结果用了onBeforeMount钩子（Vue3的生命周期钩子），结果请求还没发，模板就渲染了，页面一直显示“加载中”。后来我才反应过来：onBeforeMount是组件挂载前执行的，这时候DOM都没渲染，怎么发请求？

Vue3的生命周期钩子和Vue2对应关系要记清楚：

我帮你整理了个对应表，记不住就存手机里：

比如你要发请求，就用onMounted：

import { onMounted } from 'vue';
onMounted(() => {
 // 发请求获取数据，这时候DOM已经准备好了
 fetch('/api/user').then(res => res.json()).then(data => {
 user.value = data;
 });
});

我之前把onMounted写成onBeforeMount，改过来之后，数据立马就显示了——你可别犯我这个错！

你按我给的模板搭项目，再避开这3个坑，基本上就能顺利启动Vue3项目了。我去年用这个方法帮3个朋友搭了项目，他们都说“比看官网管用”。要是你搭的时候遇到问题，或者有不懂的地方，评论区喊我，我帮你看看—— 踩过的坑，不想让你再踩一遍～

你是不是刚启动Vue3项目，就看到终端弹出“Cannot find module ‘./App.vue’”的红报错？我之前帮楼下做前端的小吴调项目时，他也遇到过一模一样的问题——当时他急得直挠头，说“我明明没动路径啊”，结果我一看，好家伙，main.js里的App.vue路径多打了个“s”，变成“./Apps.vue”了。其实这种错看着吓人，本质都是小细节没注意到，我帮你拆成几步排查，肯定能解决。

先检查最基础的：main.js里引App.vue的路径对不对？App.vue得和main.js在同一个src目录下才行，要是你写的是“./App.vue”，那路径没毛病；可要是你把App.vue挪到了components文件夹里，路径就得改成“./components/App.vue”，差一个斜杠、多一个字母都不行。我之前有次手滑，把路径写成“../App.vue”（多了个点），结果折腾了五分钟才反应过来——相对路径的“./”是当前目录，“../”是上一级目录，可别搞反了，搞反了vite肯定找不到文件。

然后看你是不是用vite建的项目（现在Vue3基本都用vite，比webpack快多了）。要是你之前在vite.config.js里配置过别名，比如把“@”指向src目录（就是“resolve: { alias: { ‘@’: path.resolve(__dirname, ‘src’) } }”这种），那引App.vue的时候就得写“@/App.vue”，可别一边用别名一边写相对路径，vite根本识别不了。要是你没改过硬配置，这一步就跳过，不用瞎琢磨——毕竟最简模板本来就没这些花里胡哨的东西。

再试试重启开发服务器——我跟你说，这步特别玄学但管用！有时候dev服务跑久了会存缓存，你按Ctrl+C把服务停了，再重新输入npm run dev启动，说不定终端唰地一下就变绿了。我有次帮朋友调项目，他改了路径之后还是报错，结果重启之后直接好了，他说“这服务器怕不是睡着了”，哈哈，虽说是玩笑话，但缓存问题真的很常见。

要是以上都试了还不行，就打开项目根目录的package.json文件，看看scripts里的dev命令是不是“vite”。别笑，真有人会把Vue2的老命令“vue-cli-service serve”粘过来——那是Vue2用的vue-cli命令，vite根本不认啊！要是命令没错，就狠一点：把node_modules文件夹和package-lock.json文件全删了，重新npm install，把依赖包重新装一遍。有时候依赖包下载坏了也会导致路径报错，重新装一遍准没错——我之前就遇到过，node_modules里的vue包缺了个文件，结果引什么都报错，删了重装就好了。

其实这种“找不到模块”的错，本质都是“电脑没找到你说的文件”，要么是你指的路不对（路径错了），要么是电脑“失忆”了（缓存或依赖坏了）。你按我给的步骤一步步来，肯定能解决——我之前第一次遇到的时候，盯着路径看了十分钟才发现多打了个空格，你要是也犯了这种低级错误，可别不好意思，毕竟谁没踩过这种坑呢？

最简模板可以加TypeScript吗？怎么改？

可以。只需3步：