原创文章,转载请注明:转载自技术哥
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看看其结构
:html模板。最外层只允许有一个
:js模板。name为唯一标识符,data内为.vue文件下的成员变量,methods为.vue文件下的成员方法
: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.vue模板
入口文件在这里首先匹配的是App.vue,因此工程在启动的时候首先路由到App.vue。然后我们进入App.vue文件看看
里放了一个
标签,表示引用并显示router下的配置路由,根组件默认为第一个路由
里放了id为”app”的css样式
注:如果新建工程的时候没有安装vue-router,在工程目录下是没有router文件夹的,这里的
是直接变成
,直接路由到HelloWorld.vue组件
然后我们再进入router/index.js
Vue.use(Router)
使vue总模块全局使用vue-router
exportdefalutnewRouter()
实例化并输出配置的router
routes[]
配置路由,path为路径,name为匹配组件的唯一标识,component为匹配的组件
所以这里路由路径为’/’,即为当前路径,而此路径下又匹配了HelloWorld.vue这个组件。所以路由到了HelloWorld.vue。
综上,从入口文件到目标的整体流向为:
main.js—>App.vue—>router/index.js—>HelloWorld.vue
工程目录、webpack模板、从入口文件到目标组件就是整个vue工程的宏观图景
有疑问欢迎留言技术哥公众号,技术哥会第一时间解决大家的疑问