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

文章目录▼CloseOpen

• Vue3初始化的最简模板，直接抄不用改
• 初始化时最容易踩的3个坑，我帮你踩过了
  • 坑1：setup语法糖漏写，变量全是“隐身”的
  • 坑2：ref和reactive用混，数据“死”了不更新
  • 坑3：生命周期钩子用错，逻辑“跑错时间”
  • 最简模板可以加TypeScript吗？怎么改？
  • 初始化后想加Vue Router（路由）怎么弄？
  • setup语法糖里怎么引入其他组件？
  • 最简模板的CSS样式怎么全局引入？
  • 最简模板运行报错“Cannot find module './App.vue'”怎么办？

Vue3初始化的最简模板，直接抄不用改

其实Vue3的最简项目，核心文件就3个：main.js（项目入口）、App.vue（根组件）、index.html（HTML模板）。我帮你整理了每个文件的作用和最简代码，直接复制粘贴就能用——

文件名	作用	最简代码示例
main.js	挂载Vue实例到HTML	import { createApp } from ‘vue’; import App from ‘./App.vue’; // 不需要额外插件，最简就这三行 createApp(App).mount(‘#app’);
App.vue	根组件，承载页面内容	{{ message }} import { ref } from ‘vue’; // 响应式数据直接写，不用return const message = ref(‘Vue3最简模板，直接抄！’); .app { font-size: 24px; margin: 20px; }
index.html	HTML容器，承载Vue实例	<!- Vue实例挂载的地方 > 为什么要这么极简？我跟你说，刚开始学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：用来包基本类型（字符串、数字，比如const age = ref(18)），或者简单对象（比如const user = ref({ name: '张三' })）； reactive：用来包复杂对象/数组（比如const list = reactive([{ id: 1, name: '苹果' }])）。 关键是：ref包的变量，改值时要加.value，比如user.value.name = '李四'；而reactive包的对象，直接改属性就行，比如list[0].name = '香蕉'。 我自己的习惯是：基本类型用ref，复杂对象用reactive——这么分，半年没遇到过数据不响应的问题。 坑3：生命周期钩子用错，逻辑“跑错时间” 我之前做一个“获取用户信息”的组件，想在组件挂载后发请求，结果用了onBeforeMount钩子（Vue3的生命周期钩子），结果请求还没发，模板就渲染了，页面一直显示“加载中”。后来我才反应过来：onBeforeMount是组件挂载前执行的，这时候DOM都没渲染，怎么发请求？ Vue3的生命周期钩子和Vue2对应关系要记清楚： Vue2的created → Vue3的setup（因为setup在组件创建时就执行了）； Vue2的mounted → Vue3的onMounted（组件挂载后执行，适合发请求、操作DOM）； Vue2的updated → Vue3的onUpdated（组件更新后执行）。 我帮你整理了个对应表，记不住就存手机里： Vue2生命周期 Vue3生命周期（需要import） 执行时机 created setup（直接写） 组件创建时 mounted onMounted 组件挂载到DOM后 updated onUpdated 组件数据更新后 destroyed onUnmounted 组件从DOM中移除后 比如你要发请求，就用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步： 将main.js改名为main.ts，App.vue的改为； 根目录新建tsconfig.json，添加基础配置（如{“compilerOptions”:{“target”:”ESNext”,”module”:”ESNext”,”moduleResolution”:”Node”,”jsx”:”preserve”,”strict”:true},”include”:[“src/*/”]}）；3. 安装TypeScript依赖（npm install typescript @vue/tsconfig -D）。改完后就能用TS写响应式数据、组件逻辑了。 初始化后想加Vue Router（路由）怎么弄？ 安装路由依赖：npm install vue-router@4（Vue3对应Router4版本）； src目录新建router/index.js，写路由配置（如import { createRouter, createWebHistory } from ‘vue-router’; const routes = [{ path: ‘/’, component: () => import(‘../App.vue’) }]; const router = createRouter({ history: createWebHistory(), routes }); export default router）；3. main.js里引入并挂载：import router from ‘./router’; createApp(App).use(router).mount(‘#app’)；4. App.vue模板里加（路由出口）。这样就能实现页面跳转了。 setup语法糖里怎么引入其他组件？ 直接import后就能用，不用额外注册。比如想引入HelloWorld组件： 新建components/HelloWorld.vue（最简模板同上）； 在App.vue的里加import HelloWorld from ‘./components/HelloWorld.vue’；3. 模板里直接写。setup语法糖会自动注册引入的组件，不用再写components: { HelloWorld }。 最简模板的CSS样式怎么全局引入？ 两种方式： 全局样式文件：在src目录新建style.css（写全局样式，如body { margin: 0; }），然后在main.js里import ‘./style.css’； index.html引入：在index.html的里加。两种方式都能让样式作用于所有组件，选自己习惯的就行。 最简模板运行报错“Cannot find module ‘./App.vue’”怎么办？ 大概率是路径写错了，检查3点： main.js里import App from ‘./App.vue’的路径是否正确（App.vue在src目录下，路径没错）； 项目是否用了vite（Vue3推荐的构建工具），如果是，确保vite.config.js里没有配置错误的别名；3. 重启开发服务器（npm run dev），有时候缓存会导致路径识别问题。如果还是不行，打开package.json看scripts里的dev命令是不是vite（比如”dev”: “vite”），没错的话重新安装依赖（删node_modules和package-lock.json，再npm install）。