只要功夫深,铁杵磨成针。--《方舆胜览·眉州·磨针溪》

前端项目结构分析

在上一篇,我们生成了前端项目的框架代码。接下来自然要先学习下。(虽然下面很啰嗦,但是都说了折腾这个是为了学习新技术,吼吼...)

本质上,整个前端项目是依赖于node环境的,也就是说这是一个nodejs项目。相关的基础知识在这里就不做过多赘述。可以看菜鸟教程node.jsnpm以及官方相关文档进行深入了解。

项目结构说明

    simple-blog-vue
    ├── README.md #项目介绍文件
    ├── build #webpack配置
    │   ├── build.js
    │   ├── check-versions.js
    │   ├── dev-client.js
    │   ├── dev-server.js
    │   ├── utils.js
    │   ├── vue-loader.conf.js
    │   ├── webpack.base.conf.js
    │   ├── webpack.dev.conf.js
    │   ├── webpack.prod.conf.js
    │   └── webpack.test.conf.js
    ├── config #项目参数配置
    │   ├── dev.env.js
    │   ├── index.js
    │   ├── prod.env.js
    │   └── test.env.js
    ├── index.html #入口页面
    ├── node_modules #依赖包目录
    │   └── ...
    ├── package-lock.json #npm5新加入的用于锁定依赖包发布版本的文件
    ├── package.json #node项目定义文件
    ├── src #项目源代码
    │   ├── App.vue #入口页面组件
    │   ├── assets #资源目录
    │   │   └── logo.png
    │   ├── components #组件目录
    │   │   └── Hello.vue #演示组件
    │   ├── main.js #主页面入口js文件
    │   └── router #路由配置
    │       └── index.js #路由入口js文件
    ├── static #静态文件目录
    └── test #测试文件目录
        ├── e2e #自动化测试配置目录
        └── unit #单元测试配置目录

深入项目文件

A. index.html 入口页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>simple-blog-vue</title>
  </head>
  <body>
    <div id="app"></div> #指定入口组件的位置
    <!-- built files will be auto injected -->
  </body>
</html>

B. App.vue 入口页面组件

<template>
  <div id="app">
    <img src="./assets/logo.png"> <!-- 引用了图片资源 -->
    <router-view></router-view> <!--  这里直接嵌入路由的页面内容,如果想用跳转则使用<router-link to='xxx'></router-link> -->
  </div>
</template>

<script>
export default {
  name: 'app' /*组件名称,用于排错定位*/
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

C. main.js 非常重要的文件,由它来拼接各个组件连成一体。

/*ES6的模块导入方式,用来组合各个定义好的组件、路由等等*/
import Vue from 'vue' /*引入vue框架*/
import App from './App' /*引入App组件*/
import router from './router' /*引入路由定义*/

Vue.config.productionTip = false /*vue全局配置*/

/* eslint-disable no-new */
/*VUE的根实例声明*/
new Vue({
  el: '#app', /*指定组件位置id,还记得前面index.html中的id为app的div标签么,对就是他*/
  router, /*把路由实例绑定到VUE根实例,这样在所有的组件中都可以通过使用this.$router来调用*/
  render: h => h(App) /*指定渲染入口组件,https://cn.vuejs.org/v2/api/#render*/
})

D. router/index.js 路由定位文件

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

Vue.use(Router) /* 使用路由,不能省略 */

export default new Router({
  routes: [
    {
      path: '/', /* 组件映射路径 */
      name: 'Hello',
      component: Hello /* 路径对应组件 */
    }
  ]
})

TIPS:

  • 以上目录结构虽然可以更改,但是不建议去改变它。一方面需要改变已有的配置文件,另一方面也不利于团队协作;改变它除了自己看的顺眼,其他毫无意义,而带来的负面影响却是远超所得的好处。
  • VUE框架使用单文件组件结构形式,也就是*.vue文件。每个组件文件由template, script, style三部分组成。说的简单点,就是在template标签内书写html内容,script则是相关的动态js,style则是html的css样式部分。
  • 框架中存放资源的目录有assets和static两个,两者之间的区分在vue-cli webpack模板的官方网站上有针对此问题的详细解释。简而言之,assets里的内容,在打包时会被打包工具进行对应的处理,而static则只是拷贝了事。
  • 如果使用npm install了一些css的模块(例如:basecss.css,animate.css等),那么在vue组件中调用方法为在<script></script>中使用import 'basecss/css/basecss.css'的方式进行引用。当然也可以将css文件拷贝至assets目录下,然后相同方式引用。

当然还有一些项目的相关配置文件,主要是围绕Webpack打包配置和npm的运行环境的相关配置,这里就不过多介绍了。因为不但困,还累...