書名： Full-Stack Vue.js 2 and Laravel 5
作者名： Anthony Gore
本章字數： 143字
更新時間： 2021-07-02 19:57:17

Main files

Open thevuebnb-prototypedirectory in your IDE. Note that the followingindex.htmlfile is included. It's mostly comprised of boilerplate code, but also has some structural markup included in thebodytag.

Also note that this file links tostyle.css, where our CSS rules will be added, andapp.js,where our JavaScript will be added.

index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Vuebnb</title>
  <link href="node_modules/open-sans-all/css/open-sans.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<p id="toolbar">
  <img class="icon" src="logo.png">
  <h1>vuebnb</h1>
</p>
<p id="app">
  <p class="container"></p>
</p>
<script src="app.js"></script>
</body>
</html>

Currentlyapp.jsis an empty file, but I have included some CSS rules instyle.cssto get us started.

style.css:

body {
  font-family: 'Open Sans', sans-serif;
  color: #484848;
  font-size: 17px;
  margin: 0;
}

.container {
  margin: 0 auto;
  padding: 0 12px;
}

@media (min-width: 744px) {
  .container {
      width: 696px;
  }
}

#toolbar {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e4e4e4;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

#toolbar .icon {
  height: 34px;
  padding: 16px 12px 16px 24px;
  display: inline-block;
}

#toolbar h1 {
  color: #4fc08d;
  display: inline-block;
  font-size: 28px;
  margin: 0;
}

官术网_书友最值得收藏!

Full-Stack Vue.js 2 and Laravel 5

Main files