最近开始研究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
	    }),
  1. 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'
  }
至此,文件调用关系简述完毕
Logo

前往低代码交流专区

更多推荐