原创文章，转载请注明：转载自技术哥
技术哥
给你不一样的世界
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#Runtime-Compiler-vs-Runtime-only
install vue-router：vue-router路由组件。选上会安装并默认配置一个写好的vue-router模板
Use eslint to lint your code：用eslint规范你的代码。eslint是vue的一个语法规则和代码风格的检查工具，但其可能会给代码语法做太多约束，建议关闭
Set up unit tests：建立单元测试模块。单元测试一般用来封装大型公共组件时用的,一般不需要
setup e2e tests with Nightwatch：通过Nightwatch建立端对端单元测试，一般不需要
should we run ‘npm install’ for you after the project has been created：新建工程后，后续通过什么来安装其他依赖，有npm、yarn、none选项，选npm
Webpack工程模板建立完成，但webpack在vue里扮演什么角色，怎么去配置它呢？
是什么：如上图所描述的，webpack就是可以把vue工程整合打包，方便vue组件化。我们通过代码
npm run dev默认在本机8080端口打开浏览器调试也是webpack打包的结果如何配置：可以进入到工程目录下build/webpack.base.conf.js里进行修改，如alias项配置入口位置，rules配置是否引用eslint等。
二. 工程目录
build：webpack目录
config：webpack目录2
node_modules：npm代码仓库
Src：根目录
Src/assets:图片音频资源文件夹
src/components：.vue组件存放位置
src/router：vue-router配置文件夹
src/App.vue：工程根组件
src/main.js：工程入口文件
Static:静态资源目录
package.json：项目配置文件
index.html：首页入口文件
上述基本上就是我们在编辑vue工程时需要改动的文件了。然后我们来打开HelloWorld.vue看看其结构
<template>：html模板。最外层只允许有一个<script>：js模板。name为唯一标识符，data内为.vue文件下的成员变量，methods为.vue文件下的成员方法<style>：css模板。加上”scoped”属性后，其下内容不对其他.vue组件产生影响
因此，对应的标签内写对应内容就是.vue的格式规范，也是一大特色
三. 从入口文件到目标组件
我们可能会奇怪为什么上次的”HelloWorld”写在HelloWorld.vue的template标签下在打开浏览器调试的时候会显示出来。其实整个工程时遵循这个路线来”找到”我们的组件并使它起作用的：
“路由”：从一个组件到另一个组件的过程称为路由，也可以理解成从一个页面到另一个页面
我们从main.js入口文件开始：
通过
import[模块名]from[相对路径]引入”vue”总模块、”App”根组件和”router”路由配置文件newVue()实例化vue总模块el:'#app'挂载App.vue根组件样式Router在总模块Vue里加入上面通过”import”引入依赖的路由配置文件component:{App}同理在总模块Vue里引入App.vue根组件template:<App/>引入App.vue模板
入口文件在这里首先匹配的是App.vue，因此工程在启动的时候首先路由到App.vue。然后我们进入App.vue文件看看
<template>里放了一个 <router-view/>标签，表示引用并显示router下的配置路由，根组件默认为第一个路由
<style>里放了id为”app”的css样式
注：如果新建工程的时候没有安装vue-router,在工程目录下是没有router文件夹的，这里的 <router-view/>是直接变成 <HelloWorld/>，直接路由到HelloWorld.vue组件
然后我们再进入router/index.js
- 通过”import…form…”引入**vue总模块、vue-router模块、HelloWorld组件
** Vue.use(Router)使vue总模块全局使用vue-routerexportdefalutnewRouter()实例化并输出配置的routerroutes[]配置路由，path为路径，name为匹配组件的唯一标识，component为匹配的组件
所以这里路由路径为’/’，即为当前路径，而此路径下又匹配了HelloWorld.vue这个组件。所以路由到了HelloWorld.vue。
综上，从入口文件到目标的整体流向为：
main.js—>App.vue—>router/index.js—>HelloWorld.vue
工程目录、webpack模板、从入口文件到目标组件就是整个vue工程的宏观图景
有疑问欢迎留言技术哥公众号，技术哥会第一时间解决大家的疑问