从vue新建页面过程看vue项目文件调用关系

最近开始研究web前端vue框架，尝试将资料结合具体操作进行整理，以此加深印象。

1. vue项目构建过程

• 笔者使用JetBrain公司产品webstorm新建vue项目
• 第一步：官网下载安装webstorm
  
• 第二步：在左侧导航栏中选择Vue.js，此时右侧需进行配置：
  • 修改文件名（初始为untitled）
  • 配置node.js
    • 简介：node是js的服务执行环境，前端常常借助 node帮助前端实现工程化。很多工具是基于node的，比如即将使用的打包工具webpack
    • 若系统中并无node.js，需官网下载安装并配置环境变量
  • 配置vue-cli
    • 简介：vue-cli是vue脚手架，用于快速构建vue工程
    • 上一步中node环境配置完成后，可直接使用控制台，输入$ npm install -g vue-cli下载安装vue-cli
  • 界面右侧中前三项配置完成后，第四项默认为webpack，无需修改
    
• 第三步： 进入下一步后填写工程名、描述、用户等约十步。
  • 可连续点击下一步使用默认配置，直至构建完成
  • 构建完成后出现工程界面，点击左下角npm -> 双击dev 即可启动项目
  • 在浏览器中输入http://localhost:8080，或直接点击控制台中的url即可访问示例页面，如下：
    

至此，vue示例项目启动成功

2. vue项目新建页面

• 示例项目启动成功后，若新增页面，需新增.vue文件并配置路由
  • 第一步：新增.vue文件
    笔者在components目录下新增First.vue文件，内容如下
    
    First.vue中代码如下：

    	<template>
    	  <div><h1>{{message}}</h1></div>
    	</template>
    	
    	<script>
    	export default {
    	  name: 'First.vue',
    	  data () {
    	    return {
    	      message: 'welcome'
    	    }
    	  }
    	}
    	</script>
    	
    	<style scoped>
    	
    	</style>
    

  • 第二步：配置路由
    
  1. 导入组件即First，对应下方component值
  2. 插入如下语句，防止访问页面时url出现的#/符号
     • 如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
     • vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
     • 当你使用 history 模式时，URL 就像正常的 url

     	const router = new VueRouter({
     		mode: 'history',
     		routes: [...]
     	})
     

  3. 插入url地址与组件地址映射语句

     	{
     		path: '/first',
     		name: 'First',
     		component: First
     	}
     

  • 第三步：打开浏览器，输入http://localhost:8080/first
    

至此，页面新建成功

3. 分析调用关系

• 上一节页面新建时，界面中有个意外的图标，引发思考
  
  • 既然First.vue代码中只编写了 "welcome"相关代码，那么图标从何而来呢？
  • 解决这个问题，需要分析vue文件中的调用关系
    
• 使用到vue项目的文件包括一个.html，两个.js，两个.vue文件，关系如上图所示
• 由图可见，文件关键处在于main.js，管理着所有需要的资源，其中new Vue的参数，解释如下：
  • el：官方解释为实例提供挂载的元素。此处为index.html中的<div id="app"><div>。
  • router：为router:router,的简写，指向引入文件中的routes:[]
  • components：注册哪些组件，需在顶部引入文件。
  • template：替换挂载元素的模板组件，而挂载元素的内容都将被忽略。即用template替换index.html里面的<div id="app"></div>

此时，可知main.js文件调用关系分为三步，如图中序号

1. 确定将被挂载（替换）的元素，此处为index.html中的<div id="app"><div>。
2. 注册组件（此处只有组件App），选择其中用于替换挂载元素（第一步中的元素）的模板组件（<App/>），即用App.vue替换index.html中的<div id="app"><div>。
3. 注入路由器router：
   1. 模板组件（App.vue）中有<router-view/>，将在其中渲染路由匹配到的组件
   2. 注入（import）路由时指定的是router文件夹，即文件夹下所有routes
   3. router文件夹下此时只有index.js文件，其中routes:[]规定了文件地址及其url地址映射
   4. 根据文件地址，载入组件（First.vue），组件被渲染在<router-view/>中，显示在index.html中

然而追本溯源，调用关系中仍有两个问题：

1. index.html为何默认显示？
   其实，双击执行npm中dev时，控制台将执行如下语句：

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

由此可见，运行时启动文件webpack.dev.conf.js，而文件中包含如下语句，规定了起始页面：

	new HtmlWebpackPlugin({
	      filename: 'index.html',
	      template: 'index.html',
	      inject: true
	    }),

2. main.js为何默认加载？
   因为使用的脚手架工具vue-cli里用webpack来打包项目文件，webpack.dev.conf文件里还定义了webpack基础配置文件webpack.base.conf.js，定义语句如下：
   const baseWebpackConfig = require('./webpack.base.conf')
   而文件webpack.base.conf.js中，包含如下语句，指定了入口：

 entry: {
    app: './src/main.js'
  }

至此，文件调用关系简述完毕