前言

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、重慶小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了鐘樓免費(fèi)建站歡迎大家使用！

如果我們需要對(duì)現(xiàn)有的vue項(xiàng)目進(jìn)行ssr改造，使用nuxt.js是一個(gè)不錯(cuò)的選擇。這里用作例子的“現(xiàn)有項(xiàng)目”是一個(gè)“高仿”餓了么外賣APP的spa。不過(guò)我沒(méi)有把全部功能開(kāi)發(fā)出來(lái)（全部做出來(lái)就不得了了），只是做出幾個(gè)基本界面意思意思

下面就以這個(gè)demo為小白鼠進(jìn)行ssr改造

準(zhǔn)備

現(xiàn)有目錄

很明顯，這是使用vue-cli搭建的項(xiàng)目

其中prod.server.js是build之后的啟動(dòng)文件

dataa.json文件是模擬數(shù)據(jù)，在build/dev-server.js中會(huì)用到它

安裝與配置

安裝nuxt

npm install --save-dev nuxt

新建nuxt文件夾

我們需要在根目錄下建立一個(gè)nuxt文件夾，該文件夾的內(nèi)部組織按照nuxt本身的應(yīng)用目錄架構(gòu)進(jìn)行組織（參考）

注意，在static目錄下有一個(gè)logo.png，它將作為項(xiàng)目圖標(biāo)，在nuxt.config.js中這張圖片的地址直接寫成/logo.png。下一節(jié)會(huì)對(duì)nuxt文件夾的組織進(jìn)行詳細(xì)說(shuō)明。

新建并設(shè)置nuxt.config.js

當(dāng)然，我們也需要在根目錄下創(chuàng)建nuxt.config.js文件用于組織Nuxt.js 應(yīng)用的個(gè)性化配置，在這個(gè)項(xiàng)目中，需要進(jìn)行設(shè)置的點(diǎn)有：

1. 源碼目錄路徑
2. head中的meta以及l(fā)ink（主要是圖標(biāo)）
3. 全局的css樣式
4. 項(xiàng)目中需要使用圖片和字體文件，雖然nuxt默認(rèn)對(duì)其進(jìn)行配置，但我們需要重新定義部分內(nèi)容（項(xiàng)目中是擴(kuò)大limit）
5. 項(xiàng)目中使用了sass，需要對(duì)其進(jìn)行配置

所以，nuxt.config.js的代碼如下

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"
      }
    ]
  }
}

配置package.json

package.json是npm的配置文件，現(xiàn)在，我們需要對(duì)script選項(xiàng)進(jìn)行配置

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

可以參考nuxt的命令列表

改造后的目錄

其中有個(gè)nuxt.api.js，這個(gè)文件是為完成ssr改造后的項(xiàng)目提供api接口的，使用koa，運(yùn)行在3001端口

nuxt文件夾組織

因?yàn)槲覀円呀?jīng)把項(xiàng)目代碼開(kāi)發(fā)出來(lái)了，所以nuxt文件夾里面的大部分代碼可以直接從已有代碼中拷貝

layouts

布局目錄 layouts 用于組織應(yīng)用的布局組件，nuxt可通過(guò)添加 layouts/default.vue 文件來(lái)擴(kuò)展應(yīng)用的默認(rèn)布局，在layouts下新建default.vue

<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>

<nuxt/> 組件用于顯示頁(yè)面的主體內(nèi)容，即“商品”、“評(píng)論”、“商家”這幾個(gè)部分

pages

nuxt依據(jù) pages 目錄結(jié)構(gòu)自動(dòng)生成 vue-router 模塊的路由配置，這無(wú)疑是非常方便的

不難看出goods、patings、seller分別對(duì)應(yīng)“商品”、“評(píng)論”、“商家”

這樣子設(shè)置，則nuxt自動(dòng)生成的路由配置如下

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'
  }
 ]
}

但我們希望默認(rèn)進(jìn)入goods，nuxt官方文檔并沒(méi)有說(shuō)如何設(shè)置默認(rèn)路徑，這就是為什么要在pages下面創(chuàng)建一個(gè)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>

對(duì)于那些不需要像在pages下的頁(yè)面組件那樣有 asyncData 方法的特性的組件，我們可以將他們放到components目錄下

assets

資源目錄 assets 用于組織未編譯的靜態(tài)資源如 LESS、SASS 或 JavaScript，這個(gè)目錄是我感覺(jué)在引用路徑時(shí)最坑的一個(gè)。
在官方文檔中，每個(gè)目錄都有別名，這些別名在nuxt.config.js中配置時(shí)是有效的，比如之前配置的css選項(xiàng)，但不代表我們?cè)诮M件中使用這些別名會(huì)有效，在組件中我們最好使用相對(duì)路徑，比如在components/header/header.vue中就不能直接寫~assets，而得老老實(shí)實(shí)寫相對(duì)路徑

<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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享題目：使用Nuxt.js改造已有項(xiàng)目的方法
當(dāng)前路徑：http://chinadenli.net/article38/poogpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、網(wǎng)站制作、商城網(wǎng)站、搜索引擎優(yōu)化、網(wǎng)站收錄、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)