Vue

Node.JS exports 模組設計

上一篇有學到使用 module.exports 繪出想要的模組資料，

1
2
3
4
5
var data = {
  name: "Lara",
  age: 3,
};
module.exports = data;

直接使用 exports 匯出資料

1
2
3
4
exports.data = {
 name: "Lara",
  age: 3,
};

透過 app.js 印出資料

1
2
3
node app.js
// a 1
// data {name:'Lara',age:3}

exports 與 module.exports 無法共用

如題，不建議同時在檔案中使用 exports 跟 module.exports，因為 module.exports 的內容會把前面 exports 的內容覆蓋掉，

Vue

Node.JS require、module exports 模組設計

  • require:把需要的檔案引入
  • module:模組
  • export:匯出

使用 require 把需要的檔案引入

1
var data = require("./data.js");

這樣就成功引入 data.js 的檔案。

使用 module.exports 匯出檔案

在data.js內

1
2
var data = 2;
module.exports = data;

使用終端機確認，執行 app.js

1
2
3
node app.js
// a 1
// data 2

在data.js內將data 的值改成物件

1
2
3
4
5
var data = {
    name:"Lara",
    age:3
};
module.exports = data;

再次執行 node app.js，結果也會把這個物件的值傳給 app.js 

1
2
3
node app.js
// a 1
// data {name:'Lara',age:3}
Vue

Nuxt3 自動載入Auto Imports

Nuxt3 自動載入(Auto Imports)的功能:

Vue 3 的 API 的自動載入
特定的目錄 components、composables、layouts、plugin 添加檔案時，Nuxt 3 會自動載入這些元件
自動載入函數:useAsyncData,$fetch,ref、computed
Nuxt 自動載入的元件:參考官方文件

1
2
3
4
<NuxtWelcome />
<NuxtPage>
<NuxtLayout>
<NuxtLink>

關閉自動載入

修改專案目錄nuxt.config.ts

1
2
3
4
5
export default defineNuxtConfig({
  imports: {
    autoImport: false
  }
})
Vue

Nuxt3 起手式

安裝

1
npx nuxi init nuxt-app
1
2
3
cd 專案
npm install 
npm run dev
1
app.vue檔案內有個<NuxtWelcome />是 Nuxt 框架自帶的一個元件

Nuxt CLI 指令

1
2
3
4
5
6
7
8
9
10
npx nuxi init[dir] //初始化一個 Nuxt 專案
npx nuxi create [dir]//

npx nuxi dev =>npm run dev

nuxi cleanup //=nuxi create
npx nuxi clean //刪除 Nuxt 自動產生的檔案
npx nuxi cleanup

npx nuxi upgrade升級版本

官網

Vue

Nuxt3 Fullcalendar 安裝

Nuxt專案安裝之後，

根目錄安裝Fullcalendar

1
2
$ npm install --save @fullcalendar/vue3
$ npm install --save @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/timegrid @fullcalendar/list

引入

創建plugins/full-calendar.client.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import "@fullcalendar/core/vdom"; // solve problem with Vite
import FullCalendar, { CalendarOptions } from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";

FullCalendar.options = {
  plugins: [dayGridPlugin, interactionPlugin],
  initialView: "dayGridMonth",
  events: [
    { title: "event 1", date: "2022-12-02" },
    { title: "event 2", date: "2022-12-27" },
  ],
} as CalendarOptions;

export default defineNuxtPlugin((/* nuxtApp */) => {
  return {
    provide: {
      fullCalendar: FullCalendar,
    },
  };
});

引入樣式

1
2
3
<style>
@import 'element-plus/dist/index.css';
</style>

在app.vue 使用

1
2
3
4
5
6
7
8
9
10
11
12
<template>
 <div>
  <ClientOnly>
      <FullCalendar  :options="FullCalendar.options" />
    </ClientOnly>
 </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
const { $fullCalendar } = useNuxtApp()
const FullCalendar = $fullCalendar
</script>

App.vue引入樣式

1
2
3
<style>
@import './assets/css/fullcalendar.css'
</style>
Vue

Nuxt3 element plus 安裝

Nuxt專案安裝之後，

根目錄安裝element-plus

1
2
3
4
5
# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

引入

創建plugins/element-plus.js

1
2
3
4
5
import { defineNuxtPlugin } from '#app'
import ElementPlus from 'element-plus/dist/index.full'
export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(ElementPlus)
})

引入樣式

  • 由於安裝時element-plus並沒有加入Ｃss所以在 build 打包時發生錯誤
    ERROR [vite:vue] Could not load 所以重新儲存element-plus css 並且更改 nuxt.config.ts 
    1
    2
    3
    export default defineNuxtConfig({
      css: ['@/assets/css/element-plus/index.css'],
    })

在app.vue 使用

1
2
3
4
5
6
7
8
<template>
  <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
</template>

Element-plus 官網/組件

Vue

Git 程式碼

一.如果有些檔案我不想放進去版控

新增 .gitignore 或是以下終端機語法

1
touch .gitignore

加入以下內容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
# 指令 解析
1 ＄git config global user.name 配置name
2 ＄git config global user.email 配置email
1-1查看配置 ＄ git config --list 列出目前設定的參數
1-2查看配置 ＄ git config --global --list 查看當前global用戶配置
1-2查看配置 ＄ git config --local --list 查看當前local用戶配置
3 .gitignore 忽略檔案,新增.gitignore 加入要忽略的檔案
4.1 $ git init 新增版控，初始化
4.2 $ rm -r .git 停止整個版本控制
4.3 $ git add . 放入暫存區
4.4 $ git status 時常檢查狀態
4.5 $ git rm --cached 取消追蹤
4.6 $ git log 檢視 commit 紀錄
4.7 $ git log --oneline 檢視 輸出更簡潔的 log
4.8 $ git log 檔案名稱 檢視 檔案名稱
4.9 $ git rm 檔案名稱 刪除檔案
4.10 $ $ git rm --cached welcome.html 讓檔案不再受 git 版控（並不是刪除！）
4.11 $ git mv
ex. $ git mv welcome.html hello.html
 變更檔名
4.12
$ git checkout
ex.切換到最新版本：$ git checkout master
 切換版本/分支
4.13
$ git diff
ex.比對工作目錄與暫存區(Stating Area)全部檔案的差異：$ git diff --cached
ex.比對當前文件與暫存區(Stating Area)全部檔案的差異：$ git diff filename
比對工作目錄（Working Directory）與指定 commit 之間的差異 ：$ git diff commit-id
比對兩個 commit 之間的差異 $ git diff [commit-id][new commit-id]
比對兩個 branch 之間的差異 $ git diff branch1 branch2
 比對工作目錄
4.14
$ git reset
$ git reset HEAD^
 將暫存區(Stating Area) 恢復到 工作目錄（Working Directory）
5 $ git clone[url] 抓遠端儲存庫下來
6 $ git remote add (origin) (git@~.git) 遠端連結
7 $ git remote set-url (origin) (git@~.git) 修改遠端連結
8 $ git remote -v 查詢遠端url
9 $ git push -u (origin) (master) 推上並綁定
10 $ rm -rf .git 移除 Git
11 $ git status 查看狀態
12 $ git status -s 狀態細節
13 $ git add (file) 狀態細節
14 $ git add . 新增
15 $ git pull （远程主機名）（远程分支名）（本地分支名） 拉取
16 $ git clone -b (TOKEN)@github.com/xxxx/專案名稱.git 全新版本必須加入token,clone單一分支
15 $ git push -u (remote) (branch) 上傳到分支
16 $ git restore --staged (file) 將暫存區的文件從暫存區側出 不會更改文件
17 $ git branch (分支名稱) 新增分支
18 $ git branch -a 查詢所有分支
19 $ git checkout (分支名稱) 到(分支名稱)
20 $ git log 查看提交的歷史紀錄
21 $ git push --set-upstream origin(分支名稱) 只推倒分支名稱
22 $ git commit 將暫存區內容添加到倉庫中
23 $ git diff[file] 顯示暫存區和工作區的差異比較
24 $ git reset 回退版本
25 $ git rm 將文件在暫存區與工作區移除
26 $ git mv 移動或重新命名工作區
27 $ git fetch 從遠程獲取代碼庫
28 $ git pull 下載遠程代碼並合併
29 $ git branch -d (branch) 删除分支
30 $ git push 上傳遠程代碼並合併
31 $ git blame (file) 以列表形式查看文件的歷史修改紀錄
32 $ git log --reverse --oneline 以參數逆向顯示所有日誌修改紀錄
33 $ git tag 查看所有標籤
34 $ git remote add [shortname] [url] 添加遠程倉庫，指令一個名字
34 $ git remote 查看當前遠程庫
35 $ git reset HEAD^ 回退所有内容到上一个版本
36 $ git reset --soft 参数 回退到某版本
37 $ git remote -v 顯示所有遠程倉庫
38 $ git clone -b 「分支名」 「遠程庫」 clone指定分支
Vue

Nuxt 目錄結構

Nuxt 目錄結構

assets 資產目錄

static 靜態目錄

nuxt-config.js nuxt 配置文件

pages 頁面目錄

plugins 插件目錄

middleware 中間件

layouts 頁面佈局

node_modules 依賴文件包，

package.json 腳本

基本設置(廣告效果與版面配置）

在static檔案夾新增robots.txt

##robots.txt 文件有許多的規則，可以控制搜尋蜘蛛如何爬取你得網站。
請參閱

1
2
3
4
User-agent: *
Crawl-delay: 30 //延遲30秒的時間
Disallow: /  //允許搜尋蜘蛛爬取全部網站
Allow: /

Sitemap: https://xxx.xxx.xxx/sitemap.xml

在static新增landing_page.html

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang=”en”>
 
<head>
   <meta charset=”UTF-8″>
   <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
   <title>頁面</title>
</head>
<body>
   <h1>(廣告效果)</h1>
</body>

</html>

在layouts 資料夾：

新增default.vue

1
2
3
<template>
<Nuxt />
</template>

新增 error_layout.vue

1
2
3
4
5
6
7
8
<template>
<div>
<header>
<h1>錯誤頁面</h1>
</header>
<Nuxt />
</div>
</template>

新增 error.vue

1
2
3
4
5
6
7
8
9
10
11
12
<template>
<div>
<h1>Sorry，無此頁面！</h1>
<!– {{error}} –>
</div>
</template>
<script>
export default {
props: [‘error’],
layout: ‘error_layout’ // 不指定錯誤頁面佈局的話，則會使用default默認佈局
}
</script>
Vue

Node