增加导航

assets/css/common.scss

+body{
+    text-align: center;
+    background: #73A7E1;
+}
\ No newline at end of file

components/FooterBar.vue

+<template>
+    <div>版权所有　<a href="/html/folder/2208297-1.htm">北京天绿恒力科技有限公司</a>　　<a href="http://www.miitbeian.gov.cn/" target="_blank">京ICP备18028316号-1</a> 京公网安备11010802013435号</div>
+</template>

components/HeaderBar.vue

+<template>
+    <header>
+        <div class="logo-wrapper">  
+            <nuxt-link to="/"><img src="http://www.bjgee.net/res/Home/1101/1101990.gif"></nuxt-link>
+        </div>
+        <ul class="nav">
+            <li><nuxt-link to="/">网站首页</nuxt-link></li>
+            <li><nuxt-link to="/profile">公司简介</nuxt-link></li>
+            <li><nuxt-link to="/news">新闻动态</nuxt-link></li>
+            <li><nuxt-link to="/industryNews">行业动态</nuxt-link></li>
+            <li><nuxt-link to="/qualifications">荣誉资质</nuxt-link></li>
+            <li><nuxt-link to="/product">产品展示</nuxt-link></li>
+            <li><nuxt-link to="/engineering">工程业绩</nuxt-link></li>
+            <li><nuxt-link to="/customerService">售后服务</nuxt-link></li>
+            <li><nuxt-link to="/proxy">诚招代理</nuxt-link></li>
+            <li><nuxt-link to="/recruit">人员招聘</nuxt-link></li>
+            <li><nuxt-link to="/contactUs">联系我们</nuxt-link></li>
+        </ul>
+    </header>
+</template>
+
+<script>
+export default {
+    
+}
+</script>
+
+<style lang="scss" scoped>
+.logo-wrapper {
+    text-align:left;
+    padding:7px 0px 0px 11px;
+    height:80px;
+}
+</style>
+

layouts/default.vue

 <template>
-  <div>
+  <div class="containter">
+    <header-bar/>
     <nuxt/>
+    <footer-bar/>
   </div>
 </template>
-
-<style>
-html {
-  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  font-size: 16px;
-  word-spacing: 1px;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  box-sizing: border-box;
-}
-
-*, *:before, *:after {
-  box-sizing: border-box;
-  margin: 0;
-}
-
-.button--green {
-  display: inline-block;
-  border-radius: 4px;
-  border: 1px solid #3b8070;
-  color: #3b8070;
-  text-decoration: none;
-  padding: 10px 30px;
+<script>
+import HeaderBar from '~/components/HeaderBar.vue'
+import FooterBar from '~/components/FooterBar.vue'
+export default {
+  components:{
+    HeaderBar,
+    FooterBar,
+  }
 }
+</script>
 
-.button--green:hover {
-  color: #fff;
-  background-color: #3b8070;
-}
 
-.button--grey {
-  display: inline-block;
-  border-radius: 4px;
-  border: 1px solid #35495e;
-  color: #35495e;
-  text-decoration: none;
-  padding: 10px 30px;
-  margin-left: 15px;
-}
-
-.button--grey:hover {
-  color: #fff;
-  background-color: #35495e;
+<style>
+.containter{
+  width:1000px;
+  margin:0 auto;
+  background: #fff;
 }
 </style>
 

nuxt.config.js

@@ -7,14 +7,19 @@ module.exports = {
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
+      { hid: 'description', name: 'description', content: 'bjgee' }
     ],
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
     ]
   },
   css: [
-    'element-ui/lib/theme-chalk/index.css'
+    // 'element-ui/lib/theme-chalk/index.css'
+    'quill/dist/quill.core.css',
+    'quill/dist/quill.snow.css',
+    'quill/dist/quill.bubble.css',
+    'normalize.css/normalize.css',
+    '~assets/css/common.scss'
   ],
 
   modules: [
@@ -23,6 +28,7 @@ module.exports = {
   ],
   plugins:[
     '@/plugins/element-ui',
+    { src: '@/plugins/nuxt-quill-plugin.js', ssr: false }
   ],
   // proxy: [
   //   ['/api', { target: 'https://dog.ceo/'}], 
@@ -36,9 +42,18 @@ module.exports = {
   */
   build: {
     vendor: [
-      'axios',/*多个地方引用，防止多次打包*/
-      // 'element-ui',
     ],
+    babel:{
+      plugins: [['component', [
+        {
+          'libraryName': 'element-ui',
+          'styleLibraryName': 'theme-chalk',
+        },
+        'transform-async-to-generator',
+        'transform-runtime'
+      ]]],
+      comments: false
+    },
     /*
     ** Run ESLint on save
     */

package.json

@@ -15,18 +15,19 @@
   "dependencies": {
     "@nuxtjs/axios": "^5.3.1",
     "@nuxtjs/proxy": "^1.2.4",
-    "axios": "^0.18.0",
     "element-ui": "^2.4.4",
+    "normalize.css": "^8.0.0",
     "nuxt": "^1.0.0",
     "vue-quill-editor": "^3.0.6"
   },
   "devDependencies": {
     "babel-eslint": "^8.2.1",
+    "babel-plugin-component": "^1.1.1",
     "eslint": "^4.15.0",
     "eslint-friendly-formatter": "^3.0.0",
     "eslint-loader": "^1.7.1",
     "eslint-plugin-vue": "^4.0.0",
-    "sass-loader": "^7.0.3",
-    "node-sass": "^4.9.2"
+    "node-sass": "^4.9.2",
+    "sass-loader": "^7.0.3"
   }
 }

pages/ContactUs.vue

+<template>
+    <div>联系我们</div>
+</template>

pages/CustomerService.vue

+<template>
+    <div>售后服务</div>
+</template>

pages/Engineering.vue

+<template>
+    <div>工程业绩</div>
+</template>

pages/IndustryNews.vue

+<template>
+    <div>行业动态</div>
+</template>

pages/News.vue

+<template>
+    <div>新闻动态</div>
+</template>

pages/Product.vue

+<template>
+    <div>产品展示</div>
+</template>

pages/Profile.vue

+<template>
+    <div>公司简介</div>
+</template>

pages/Proxy.vue

+<template>
+    <div>诚招代理</div>
+</template>

pages/Qualifications.vue

+<template>
+    <div>荣誉资质</div>
+</template>

pages/Recruit.vue

+<template>
+    <div>人员招聘</div>
+</template>

pages/index.vue

 <template>
-  <section class="container">
-    <div>
-      <app-logo/>
-      <h1 class="title">
+    <h1 class="title">
         bjgee
-      </h1>
-      <h2 class="subtitle">
-        Nuxt.js project
-      </h2>
-      <div class="links">
-        <a
-          href="https://nuxtjs.org/"
-          target="_blank"
-          class="button--green">Documentation</a>
-        <a
-          href="https://github.com/nuxt/nuxt.js"
-          target="_blank"
-          class="button--grey">GitHub</a>
-      </div>
-    </div>
-  </section>
+    </h1>
 </template>
 
 <script>
-import AppLogo from '~/components/AppLogo.vue'
-
 export default {
   components: {
-    AppLogo
   }
 }
 </script>
 
 <style>
-.container {
-  min-height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-
-.title {
-  font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
-  display: block;
-  font-weight: 300;
-  font-size: 100px;
-  color: #35495e;
-  letter-spacing: 1px;
-}
-
-.subtitle {
-  font-weight: 300;
-  font-size: 42px;
-  color: #526488;
-  word-spacing: 5px;
-  padding-bottom: 15px;
-}
-
-.links {
-  padding-top: 15px;
-}
 </style>
 

plugins/element-ui.js

+// 按需引入
+// https://github.com/ElemeFE/element/blob/master/components.json
+
 import Vue from 'vue'
-import Element from 'element-ui'
+import {
+  Form,
+  FormItem,
+  Button,
+  Row,
+  Col,
+  Switch,
+  Select,
+  Option,
+  Input,
+  InputNumber,
+  Table,
+  TableColumn,
+  Dialog,
+  TimePicker,
+  DatePicker,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
+  Notification,
+  Checkbox,
+  Radio,
+} from 'element-ui'
 
 export default () => {
-  Vue.use(Element)
+  Vue.use(Form)
+  Vue.use(FormItem)
+  Vue.use(Button)
+  Vue.use(Row)
+  Vue.use(Col)
+  Vue.use(Button)
+  Vue.use(Switch)
+  Vue.use(Select)
+  Vue.use(Option)
+  Vue.use(DatePicker)
+  Vue.use(TimePicker)
+  Vue.use(Table)
+  Vue.use(TableColumn)
+  Vue.use(Input)
+  Vue.use(InputNumber)
+  Vue.use(Dialog)
+  Vue.use(Dropdown)
+  Vue.use(DropdownMenu)
+  Vue.use(DropdownItem)
+  Vue.use(Checkbox)
+  Vue.use(Radio)
+  Vue.prototype.$notify = Notification
 }
\ No newline at end of file

plugins/nuxt-quill-plugin.js

+import Vue from 'vue'
+import VueQuillEditor from 'vue-quill-editor/dist/ssr'
+
+Vue.use(VueQuillEditor)
\ No newline at end of file

yarn.lock

@@ -32,6 +32,13 @@
   dependencies:
     "@babel/types" "7.0.0-beta.44"
 
+"@babel/helper-module-imports@7.0.0-beta.35":
+  version "7.0.0-beta.35"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.35.tgz#308e350e731752cdb4d0f058df1d704925c64e0a"
+  dependencies:
+    "@babel/types" "7.0.0-beta.35"
+    lodash "^4.2.0"
+
 "@babel/helper-split-export-declaration@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.44.tgz#c0b351735e0fbcb3822c8ad8db4e583b05ebd9dc"
@@ -70,6 +77,14 @@
     invariant "^2.2.0"
     lodash "^4.2.0"
 
+"@babel/types@7.0.0-beta.35":
+  version "7.0.0-beta.35"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.35.tgz#cf933a9a9a38484ca724b335b88d83726d5ab960"
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^2.0.0"
+
 "@babel/types@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.44.tgz#6b1b164591f77dec0a0342aca995f2d046b3a757"
@@ -580,6 +595,12 @@ babel-plugin-check-es2015-constants@^6.22.0:
   dependencies:
     babel-runtime "^6.22.0"
 
+babel-plugin-component@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-component/-/babel-plugin-component-1.1.1.tgz#9b023a23ff5c9aae0fd56c5a18b9cab8c4d45eea"
+  dependencies:
+    "@babel/helper-module-imports" "7.0.0-beta.35"
+
 babel-plugin-jsx-event-modifiers@^2.0.2:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/babel-plugin-jsx-event-modifiers/-/babel-plugin-jsx-event-modifiers-2.0.5.tgz#93e6ebb5d7553bb08f9fedbf7a0bee3af09a0472"
@@ -4144,6 +4165,10 @@ normalize-wheel@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45"
 
+normalize.css@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.0.tgz#14ac5e461612538a4ce9be90a7da23f86e718493"
+
 npm-bundled@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.3.tgz#7e71703d973af3370a9591bafe3a63aca0be2308"