使用Nuxt.js改造已有項(xiàng)目的方法

npm install --save-dev nuxt

module.exports = {
 // 設(shè)置nuxt源碼目錄路徑
 srcDir: "nuxt/",
 head: {
 title: "sell-nuxt",
 meta: [
 {
 charset: "utf-8"
 },
 {
 name: "viewport",
 content: "width=device-width, initial-scale=1,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"
 }
 ],
 link: [
 {
 rel: "shortcut icon",
 type: "image/png",
 // 注意圖片的路徑直接指向static下的logo.png
 href: "/logo.png"
 }
 ]
 },
 css: [
 "~assets/reset.css"
 ],
 build: {
 vendor: ['axios'],
 loaders: [
 {
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 loader: 'url-loader',
 options: {
  limit: 10000,
  name: 'img/[name].[hash:7].[ext]'
 }
 },
 {
 test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
 loader: 'url-loader',
 options: {
  limit: 10000,
  name: 'fonts/[name].[hash:7].[ext]'
 }
 },
 {
 test: /\.scss$/,
 loader: "vue-style-loader!css-loader!sass-loader"
 }
 ]
 }
}

"scripts": {
 "dev": "nuxt",
 "build": "nuxt build",
 "start": "nuxt start",
 "generate": "nuxt generate",
 "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
 "precommit": "npm run lint"
 }

<template>
 <div id="app">
 <v-header v-bind:seller="seller"></v-header>
 <v-tab></v-tab>
 <nuxt/>
 </div>
</template>

<script>
 import axios from 'axios';
 // 引入組件
 import header from "~/components/header/header.vue";
 import tab from "~/components/tab/tab.vue";
 export default {
 data:function(){
 return {
 seller:{}
 }
 },
 created:function(){
 axios.get("http://localhost:3001/seller").then(res=>{
 console.log(res.data);
 this.seller = res.data.data;
 });
 },
 components:{
 "v-header":header,
 "v-tab":tab
 }
 }
</script>

<style lang="scss" rel="text/css">

</style>

router: {
 routes: [
 {
 name: 'index',
 path: '/',
 component: 'pages/index.vue'
 },
 {
 name: 'goods',
 path: '/goods',
 component: 'pages/goods/index.vue'
 },
 {
 name: 'patings',
 path: '/patings',
 component: 'pages/patings/index.vue'
 },
 {
 name: 'seller',
 path: '/seller',
 component: 'pages/seller/index.vue'
 }
 ]
}

<template>

</template>

<script>
 export default {
 created:function(){
 this.$router.push('/goods'); // 頁(yè)面加載時(shí)跳轉(zhuǎn)
 }
 }
</script>

<style lang="scss" rel="text/css">

</style>

<style lang="scss" rel="text/css" src="../../assets/base.scss"></style>
<style type="text/css" src="../../assets/style.css"></style>
<style lang="scss" rel="text/css">
 @import "../../assets/mixin.scss";
 @import "./header.scss";
</style>