0%

Posted on In

最近將一個vue的專案轉成nuxt，其中有一個頁面是需要用到巢狀路由的，因為nuxt的router會自動生成，所以跟vue自己手動撰寫又有不同，所以這邊來記錄一下怎麼在nuxt中實現巢狀路由

產生路由

首先這個頁面為最新消息的頁面，左側會有選單列表，右側則是會顯示文章列表，點擊後會轉為顯示點擊的文章，由下圖可知，裡面會動的只有藍色的部分
Screen Shot 2019-12-04 at 5.39.36 P

Read more »

Posted on In

Nuxt為vue的一個ssr框架，與spa不同的地方在於，spa只會輸出一個html檔案給使用者，讓使用者在前端獲取資料之後進行渲染，而Nuxt則是在使用者第一次request網頁的時候，在server端先獲取資料並渲染後再傳輸給使用者，所以Nuxt需要開發人員在主機端運行一個常駐的程式

Nuxt主要基於js，在架設js的後端時，我們常常會使用PM2來進行管理與運行，這篇主要是紀錄一下，怎麼快速方便的架設nuxt伺服器

Read more »

Posted on Edited on In

更改wordpress網址有三種方式：

後台

第一種是去後台管理介面更改，後台->設定->一般，可以看到裡面有兩個網址可以做設定，一個是wordpress網址，一個是網站網址，兩個一起做更改就好，如果這邊更改錯誤導致無法進入網站，可以透過下面另外兩種方式做處理

wp-config.php

第二種是透過wp-config設定文件去做修改，我比較偏向用這種方式，最為直接，也不需要操作到資料庫，如果是透過這種方法做修改，可以發現進入後台設定的時候，這邊的設定已經覆蓋掉原本的欄位，也無法再使用後台去修改網址

Read more »

Posted on Edited on In

使用Nuxt來製作網站，不外乎就是需要SEO、SMO的功能，而要怎麼在Nuxt中建立SEO需要的資訊呢？

以一個一般網頁來看，只要在html的head標籤內埋入相對應的meta tag就可以完成基礎的設定，以下為基礎的SEO與Facebook SMO設定

1
2
3
4
5
6
7
8
9
<head>
<title>KenLee</title>
<meta property="description" content="我的部落格">
<meta property="og:title" content="KenLee">
<meta property="og:description" content="我的部落格">
<meta property="og:image" content="https://ken551113.github.io/image.jpg">
<meta property="og:url" content="https://ken551113.github.io/">
<meta property="og:type" content="website">
</head>
Read more »

Posted on Edited on In

在Nuxt中額外提供了一個asyncData的屬性，讓服務器在渲染組件之前先異步獲取數據，也有以往會在Vue使用到的methods/created/mounted…等屬性，而非同步獲取數據又有Promise與ES7的 async/await兩種方法，這邊就來記錄一下在不同情境下的使用方法

前置作業

先安裝nuxt提供的axios

Read more »

Posted on Edited on In

在Nuxt專案中使用Bootstrap

因為Nuxt是基於Vue的SSR框架，所以引入bootstrap跟之前Vue的做法不一樣

首先在nuxt專案底層的nuxt.config.js中找到，以下程式碼

1
2
3
4
5
6
7
8
9
10
11
head: {
  title: process.env.npm_package_name || '',
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
  ],
  link: [
    { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
  ],
},
Read more »

Posted on Edited on In

今天試著把本來在spa專案中的vue awesome swiper放到nuxt上用，當初沒按照官方的路徑寫，因為我覺得我自己寫的也沒錯哈哈哈，走了很多彎路才成功，這邊來記錄一下

安裝

1
npm install vue-awesome-swiper --save

加入pluging

在專案中的plugings資料夾建立一個vue-awesome-swiper.js的文件，並在裡面填入以下程式碼

Read more »

Posted on Edited on In

安裝

先安裝node-sass跟sass-loader這兩個模組

1
npm install --save-dev node-sass sass-loader

使用

跟之前在vue專案中一樣，在style裡面指定lang為scss就可以了

1
2
3
<style lang="scss" scoped>

</style>

Posted on Edited on In 
1
2
3
system : 
ubuntu 18.04
mongoDB 4.2

因為最近開了一個新的server，作業系統是ubuntu 18.04，得重新安裝環境，就順便記錄一下安裝MongoDB 4.2的過程，感覺沒有之前安裝舊版那麼多步驟了

1.安裝 MongoDB：

匯入 MongoDB 公開的 GPG 金鑰：

Read more »

Posted on Edited on In

在Vue透過cli建立的專案中使用Bootstrap主要有兩種方式，一種是直接引用CDN，另外一種是透過NPM的方式安裝在本地端

1.直接引用CDN

找到專案中public/index.html，直接在head裡面引用就行了

1
2
3
4
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Read more »