web前端 | vue.js系列教程3

最新推荐文章于 2026-05-12 00:00:00 发布

原创

最新推荐文章于 2026-05-12 00:00:00 发布 · 1.3k 阅读

标签

#vue #web #前端 #服务端

收录于

本文详细解析Vue.js项目的目录结构，包括Webpack工程模板的作用、如何配置Webpack，以及工程目录中各部分的功能。从main.js入口文件到目标组件的流程，深入理解Vue路由配置和组件渲染。

原创文章，转载请注明：转载自技术哥

vue

在上一期的vue教程我们搭建好了vscode的开发环境后，写下第一行代码”Hello World！”，大家有没有好奇为什么这行代码要写在HelloWorld.vue呢？今天就为大家讲解下vue工程目录、webpack模板、入口文件到目标组件

一. webpack工程模板

我们起初是通过行命令生成vue工程的
vue init webpack my-project

在新建工程时它也会询问我们一些关于我们要工程的问题，这里给大家详解一下

project name：工程名
project description：工程描述
author：作者姓名
vue build：有standalone与runtime-only build两种，分别为独立构建和运行时构建。后者删除了模板编译的功能，因此无法支持带 template 属性的 Vue 实例选项。具体vue官网有详解：https://vuejs.org/v2/guide/installation.html#