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

简介：vue-cli是vue脚手架，用于快速构建vue工程
• 上一步中node环境配置完成后，可直接使用控制台，输入$ npm install -g vue-cli下载安装vue-cli

可连续点击下一步使用默认配置，直至构建完成
• 构建完成后出现工程界面，点击左下角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>

  [/code]
• 第二步：配置路由
  

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: [...]
   })

   [/code]
3. 插入url地址与组件地址映射语句

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

   [/code]

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

至此，页面新建成功

3. 分析调用关系

• 上一节页面新建时，界面中有个意外的图标，引发思考
  既然First.vue代码中只编写了 "welcome"相关代码，那么图标从何而来呢？
• 解决这个问题，需要分析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： 模板组件（App.vue）中有

   <router-view/>

   ，将在其中渲染路由匹配到的组件
4. 注入（import）路由时指定的是router文件夹，即文件夹下所有routes
5. router文件夹下此时只有index.js文件，其中

   routes:[]

   规定了文件地址及其url地址映射
6. 根据文件地址，载入组件（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'
}

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