Bootstrap+Vue 项目小结

发表于

###项目简介

本次项目我们实现的是复制swapi这个网站，前端与后端需要分离实现，主要技术栈为：

  • 前端（+UI）：typescript + bootstrap + vue
  • 后端：go + jwt
  • 数据库：boltdb

我负责的是部分前端与UI的编写和优化。之前有学习过原生的html、css等，但框架的使用还是比较少，所以这次算是一边学习一边进行项目的实现。

项目地址

vue与bootstrap

Vue是一套用于构建用户界面渐进式框架，它被设计为可以自底向上的逐层应用。Vue可以非常方便的与第三方库进行整合，比如此次使用的bootstrap。使用bootstrap提供的简洁的html、css、js框架，加上vue提供的库，可以很方便的构建一套前端应用。

在本次项目中，主要利用到了vue的组件化特质，vue允许我们编写小型、独立的组件，以便于复用在大型应用中。在我们的项目中所有的界面都放在了同一个基本HTML下：

1
2
3
4
5
6
7
8
9
...
  <body>
    <noscript>
      <strong>We're sorry but swapi-web doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
...

可以看到，id为app的div可以根据所在页面的不同而去自动更换组件，每个组件中可能又包含其他组件，比如主页home中，基本html被定义为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <div id="home">
    <HomeTitle/>
    <HomeIntro/>
    <hr/>
    <APIcaller/>
  </div>
</template>
...
@Component({
  components: {
    HomeTitle,
    HomeIntro,
    APIcaller,
  },
})

其中HomtTitle、HomeIntro、APIcaller对应了三个不同的组件。

对应到最底层的组件的编写时则用到了bootstrap提供的各种元素，这些元素经过bootstrap的渲染，达到了简洁美观的效果。其中需要提到的是pre这个元素。在原版swapi网站中就可以看到它使用了：

1
<pre class="prettyprint">

它的作用是为pre元素下的各种代码提供高亮及缩进。经过资料的查阅得到这其实是用到了google的code-prettify，使用时只需要包含它的js文件：

1
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

再在pre元素下声明class为prettyprint就可以了。