使用Nuxt.js改造已有項(xiàng)目的方法
前言
如果我們需要對(duì)現(xiàn)有的vue項(xiàng)目進(jìn)行ssr改造，使用nuxt.js是一個(gè)不錯(cuò)的選擇。這里用作例子的“現(xiàn)有項(xiàng)目”是一個(gè)“高仿”餓了么外賣APP的spa。不過我沒有把全部功能開發(fā)出來（全部做出來就不得了了），只是做出幾個(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ì)說明。
新建并設(shè)置nuxt.config.js
當(dāng)然，我們也需要在根目錄下創(chuàng)建nuxt.config.js文件用于組織Nuxt.js 應(yīng)用的個(gè)性化配置，在這個(gè)項(xiàng)目中，需要進(jìn)行設(shè)置的點(diǎn)有：
- 源碼目錄路徑
- head中的meta以及l(fā)ink（主要是圖標(biāo)）
- 全局的css樣式
- 項(xiàng)目中需要使用圖片和字體文件，雖然nuxt默認(rèn)對(duì)其進(jìn)行配置，但我們需要重新定義部分內(nèi)容（項(xiàng)目中是擴(kuò)大limit）
- 項(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)目代碼開發(fā)出來了，所以nuxt文件夾里面的大部分代碼可以直接從已有代碼中拷貝
layouts
布局目錄 layouts 用于組織應(yīng)用的布局組件，nuxt可通過添加 layouts/default.vue 文件來擴(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/> 組件用于顯示頁面的主體內(nèi)容，即“商品”、“評(píng)論”、“商家”這幾個(gè)部分
pages
nuxt依據(jù) pages 目錄結(jié)構(gòu)自動(dòng)生成 vue-router 模塊的路由配置，這無疑是非常方便的
不難看出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官方文檔并沒有說如何設(shè)置默認(rèn)路徑，這就是為什么要在pages下面創(chuàng)建一個(gè)index.vue
<template>
</template>
<script>
export default {
created:function(){
this.$router.push('/goods'); // 頁面加載時(shí)跳轉(zhuǎn)
}
}
</script>
<style lang="scss" rel="text/css">
</style>
對(duì)于那些不需要像在pages下的頁面組件那樣有 asyncData 方法的特性的組件，我們可以將他們放到components目錄下
assets
資源目錄 assets 用于組織未編譯的靜態(tài)資源如 LESS、SASS 或 JavaScript，這個(gè)目錄是我感覺在引用路徑時(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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
VUE實(shí)現(xiàn)強(qiáng)制渲染,強(qiáng)制更新
今天小編就為大家分享一篇VUE實(shí)現(xiàn)強(qiáng)制渲染,強(qiáng)制更新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
詳解VSCode配置啟動(dòng)Vue項(xiàng)目
這篇文章主要介紹了VSCode配置啟動(dòng)Vue項(xiàng)目，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了vue解決彈出蒙層滑動(dòng)穿透問題的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
過濾器的功能是對(duì)要顯示的數(shù)據(jù)進(jìn)行格式化后再顯示,其并沒有改變?cè)镜臄?shù)據(jù),只是產(chǎn)生新的對(duì)應(yīng)的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Vue中過濾器定義以及使用方法的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細(xì)介紹了vue自定義可選時(shí)間的日歷組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家詳細(xì)介紹了Vue用戶管理的增刪改查功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了VUE注冊(cè)全局組件和局部組件過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
最近在學(xué)習(xí)vue,感覺路由守衛(wèi)這個(gè)地方知識(shí)點(diǎn)挺多的,而且很重要,下面這篇文章主要給大家介紹了關(guān)于vue3中7種路由守衛(wèi)的使用大全,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
Vue router傳遞參數(shù)并解決刷新頁面參數(shù)丟失問題
這篇文章主要介紹了Vue router傳遞參數(shù)并解決刷新頁面參數(shù)丟失問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了vue下的@change事件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10