路由 favicon scss stick-footer reset.css 懒加载

liuqimichale
1 parent 2521f09e
Showing 15 changed files with 284 additions and 125 deletions
webintroduce/build/webpack.base.conf.js
webintroduce/index.html
webintroduce/package-lock.json
webintroduce/package.json
webintroduce/src/App.vue
webintroduce/src/assets/css/reset.css
webintroduce/src/assets/logo.png
webintroduce/src/components/HelloWorld.vue
webintroduce/src/components/VFooter.vue
webintroduce/src/components/VHeader.vue
webintroduce/src/main.js
webintroduce/src/router/index.js
webintroduce/src/views/VHome.vue
webintroduce/src/views/VSolution.vue
webintroduce/static/favicon.ico
@@ -64,7 +64,18 @@ module.exports = {
           limit: 10000,
           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
         }
+      },
+      {
+        test: /\.scss$/,
+        use: [{
+          loader: "style-loader" // creates style nodes from JS strings
+        }, {
+          loader: "css-loader" // translates CSS into CommonJS
+        }, {
+          loader: "sass-loader" // compiles Sass to CSS
+        }]
       }
+
     ]
   },
   node: {
@@ -2,8 +2,9 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>webintroduce</title>
+    <!--<meta name="viewport" content="width=device-width,initial-scale=1.0">-->
+    <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico">
+    <title>任你停官网</title>
   </head>
   <body>
     <div id="app"></div>
@@ -4963,8 +4963,7 @@
     },
     "js-yaml": {
       "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.7.0.tgz",
-      "integrity": "sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=",
+      "resolved": "",
       "dev": true,
       "requires": {
         "argparse": "^1.0.7",
@@ -9513,6 +9512,18 @@
         "mkdirp": "~0.5.1",
         "sax": "~1.2.1",
         "whet.extend": "~0.9.9"
+      },
+      "dependencies": {
+        "js-yaml": {
+          "version": "3.7.0",
+          "resolved": "http://registry.npm.taobao.org/js-yaml/download/js-yaml-3.7.0.tgz",
+          "integrity": "sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=",
+          "dev": true,
+          "requires": {
+            "argparse": "^1.0.7",
+            "esprima": "^2.6.0"
+          }
+        }
       }
     },
     "tapable": {
@@ -31,6 +31,7 @@
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^2.30.1",
     "node-notifier": "^5.1.2",
+    "node-sass": "^4.11.0",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",
     "portfinder": "^1.0.13",
@@ -38,6 +39,7 @@
     "postcss-loader": "^2.0.8",
     "postcss-url": "^7.2.1",
     "rimraf": "^2.6.0",
+    "sass-loader": "^7.1.0",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
     "uglifyjs-webpack-plugin": "^1.1.1",
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
-    <router-view/>
+    <VHeader></VHeader>
+    <div class="main-wrap">
+      <router-view/>
+    </div>
+
+    <VFooter></VFooter>
   </div>
 </template>
 <script>
+import VHeader from './components/VHeader'
+import VFooter from './components/VFooter'
 export default {
-  name: 'App'
+  name: 'App',
+  components:{
+    VHeader,
+    VFooter
+  }
 }
 </script>
 <style>
 #app {
+  display: flex;
+  flex-flow: column;
+  min-height: 100vh;
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
 }
+  .main-wrap{
+    flex: 1;
+  }
 </style>
+/* http://meyerweb.com/eric/tools/css/reset/
+   v4.0 | 20180602
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+main, menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, main, menu, nav, section {
+  display: block;
+}
+
+/* HTML5 hidden-attribute fix for newer browsers */
+*[hidden] {
+  display: none;
+}
+
+body {
+  line-height: 1;
+}
+
+/*html, body {*/
+/*width: 100%;*/
+/*height: 100%;*/
+/*background: url("../assets/img/bg.jpg") no-repeat;*/
+/*background-size: 100% 100%;*/
+/*overflow: hidden;*/
+/*}*/
+
+html, body{
+  height: 100%;width: 100%;
+  font-family: "Microsoft YaHei";
+  color: #fff;
+  user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  -moz-user-select: none;
+}
+body{
+
+  overflow: hidden;
+  font-size: 14px;
+  /*默认颜色*/
+}
+
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/*清除浮动*/
+.clearfix:before,
+.clearfix:after {
+  content: " ";
+  display: inline-block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+
+.clearfix {
+  *zoom: 1;
+}
+
+/*隐藏*/
+.dn {
+  display: none;
+}
+
+.margin0-12 {
+  margin: 0 12px;
+}
+
+.margin12-0 {
+  margin: 12px 0;
+}
+.flexfm{
+  flex: 1;
+}
+
+.pos-rel{
+  position: relative;
+}
+.pos-abs{
+  position: absolute;
+}
+
+
+
+
+
+/*自定义导航选中样式*/
+.navActive{
+  background-color: #f00;
+}
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <h2>Essential Links</h2>
-    <ul>
-      <li>
-        <a
-          href="https://vuejs.org"
-          target="_blank"
-        >
-          Core Docs
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://forum.vuejs.org"
-          target="_blank"
-        >
-          Forum
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://chat.vuejs.org"
-          target="_blank"
-        >
-          Community Chat
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://twitter.com/vuejs"
-          target="_blank"
-        >
-          Twitter
-        </a>
-      </li>
-      <br>
-      <li>
-        <a
-          href="http://vuejs-templates.github.io/webpack/"
-          target="_blank"
-        >
-          Docs for This Template
-        </a>
-      </li>
-    </ul>
-    <h2>Ecosystem</h2>
-    <ul>
-      <li>
-        <a
-          href="http://router.vuejs.org/"
-          target="_blank"
-        >
-          vue-router
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vuex.vuejs.org/"
-          target="_blank"
-        >
-          vuex
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vue-loader.vuejs.org/"
-          target="_blank"
-        >
-          vue-loader
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-        >
-          awesome-vue
-        </a>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js App'
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h1, h2 {
-  font-weight: normal;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
+<template>
+    <div class="footer-wrap">底部</div>
+</template>
+
+<script>
+export default {
+  name: 'VFooter'
+}
+</script>
+
+<style scoped>
+.footer-wrap{
+  height: 100px;
+  background: #0f0;
+}
+</style>
+<template>
+    <div class="header-wrap">
+      <ul>
+       <router-link
+         :to="{path:link.linkPath}"
+         tag="li" v-for="(link,index) in navLinks"
+         :key="index"
+         @click="navChange(index)"
+         exact="">
+         {{link.name}}
+       </router-link>
+      </ul>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'VHeader',
+  data() {
+    return {
+      navLinks: [
+        {name:'首页',linkPath:'/home'},
+        {name:'解决方案',linkPath:'/solution'}
+      ]
+    }
+  },
+  methods:{
+    navChange(index) {
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.header-wrap{
+  height: 100px;
+  background-color: burlywood;
+}
+</style>
@@ -4,6 +4,7 @@ import Vue from &#39;vue&#39;
 import App from './App'
 import router from './router'
+require ('./assets/css/reset.css')
 Vue.config.productionTip = false
 /* eslint-disable no-new */
 import Vue from 'vue'
 import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
+import VHome from '../views/VHome'
+const VSolution = () => import('../views/VSolution')
 Vue.use(Router)
 export default new Router({
+  linkExactActiveClass:'navActive',
   routes: [
     {
       path: '/',
-      name: 'HelloWorld',
-      component: HelloWorld
-    }
+      name: 'VHome',
+      component: VHome
+    },
+    {
+      path: '/home',
+      name: 'VHome',
+      component: VHome
+    },
+    {
+      path: '/solution',
+      name: 'VSolution',
+      component: VSolution
+    },
   ]
 })
+<template>
+    <div>home</div>
+</template>
+
+<script>
+export default {
+  name: 'VHome'
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
+<template>
+    <div>解决方案</div>
+</template>
+
+<script>
+export default {
+  name: 'VSolution'
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>