前端 | vue.js系列教程3

2018-05-19 本文已影响0人 Tdata技术哥

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

微信订阅号：技术哥

技术哥

给你不一样的世界

image

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

一. webpack工程模板

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

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

image

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模板

image

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里扮演什么角色，怎么去配置它呢？

image

是什么：如上图所描述的，webpack就是可以把vue工程整合打包，方便vue组件化。我们通过代码 npm run dev默认在本机8080端口打开浏览器调试也是webpack打包的结果
如何配置：可以进入到工程目录下build/webpack.base.conf.js里进行修改，如alias项配置入口位置，rules配置是否引用eslint等。

二. 工程目录

image

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看看其结构

image

<template>：html模板。最外层只允许有一个 <div>
<script>：js模板。name为唯一标识符，data内为.vue文件下的成员变量，methods为.vue文件下的成员方法
<style>：css模板。加上"scoped"属性后，其下内容不对其他.vue组件产生影响

因此，对应的标签内写对应内容就是.vue的格式规范，也是一大特色

三. 从入口文件到目标组件

我们可能会奇怪为什么上次的"HelloWorld"写在HelloWorld.vue的template标签下在打开浏览器调试的时候会显示出来。其实整个工程时遵循这个路线来"找到"我们的组件并使它起作用的：

"路由"：从一个组件到另一个组件的过程称为路由，也可以理解成从一个页面到另一个页面

我们从main.js入口文件开始：

image

通过 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文件看看

image

<template>里放了一个 <router-view/>标签，表示引用并显示router下的配置路由，根组件默认为第一个路由

<style>里放了id为"app"的css样式

注：如果新建工程的时候没有安装vue-router,在工程目录下是没有router文件夹的，这里的 <router-view/>是直接变成 <HelloWorld/>，直接路由到HelloWorld.vue组件

然后我们再进入router/index.js

image

通过"import...form..."引入**vue总模块、vue-router模块、HelloWorld组件
**
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工程的宏观图景

关注“技术哥”的微信公众号查看更多技术文章

前端 | vue.js系列教程3

技术哥

给你不一样的世界

猜你喜欢

热点阅读