---
# 998 Quasar+插件製作步驟
---
# 998 Quasar+插件製作步驟
# 基本初始化
## 啟用yarn:(選配，只是不用npm改用yarn,你可以用npm完成一樣的事，只是quasar推薦yarn)
#### 開cmd(用系統管理員權限開)
corepack enable
#### 跟npm 指令小差異:
初始化:
npm init = yarn init
從package.json 安裝nodemodule
npm i = yarn install
安裝xxx
npm i xxx = yarn add xxx
npm un xxx = yarn remove xxx
執行 dev
npm run dev = yarn dev
---
# 安裝quasar
[可以看這裡做，更詳細且包含npm](https://quasar.dev/start/quasar-cli)
yarn global add @quasar/cli
yarn create quasar
## Quasra檔案設定
增加 packgee.json的
```javascript
"scripts": {
"build": "quasar build",
"dev": "quasar dev"
},
```
---
### 每個vue檔的script整個移除，改 script setup!!
(原本是option api)
不要理
---
### 如果eslint因報錯少空格
#### 在rule 加上
---
## @ 指向 ./src
[詳細設定](https://quasar.dev/quasar-cli-vite/handling-vite#adding-folder-aliases)
(可以直接用src替代@使用)
quasar.config.js:
```javascript
const path = require('path')
build: {
alias: {
'@': path.join(__dirname, './src')
},
}
```
---
## env (變更env需要重開dev)
1. npm i dotenv
2. 去.env檔加變數(跟之前一樣)
3. quasar.config.js 調整
```javascript=
require('dotenv/config')
build: {
env: {
變數名: process.env.變數名
}
}
```
3. vue頁面就可直接用: process.env.變數名
---
# build gitpage準備
(只有3步驟)
## 更改build輸出的路徑,才不會報錯'./'
在quasar.config.js build裡新增
```javascript
build: {
// 新增這個
extendViteConf (viteConf) {
viteConf.base = ''
},
}
```
---
## Quasar build後的資料夾會是dist/spa (多spa) 所以去自動部屬檔deploy.yml
對應到目錄
## deploy.yml 加上自己要的env變數:
## 記得github secret加上.env的變數
---
# i18n (Quasar版)
#### Quasar的教學不是給composition+setup，以這邊為主
## 初始化 [composition教學源自這](https://vue-i18n.intlify.dev/guide/advanced/composition.html#message-translation)
1.增加這段供composition 可用
2.在要用的vue檔
```javascript
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
```
html:
```htmlembedded
<p>{{ t('message') }}</p>
```
### 範例:要傳多語言內容給子元件:(ex: 選單v-for內容是多語言)
##### 母:
```javascript=
import ListComponent from 'components/listComponent.vue'
const linksList = [
{ test: 'message1' },
{ test: 'message2'},
```
```htmlembedded=
<q-list>
<ListComponent v-for="link in linksList" :key="自己設id阿" :link="link" />
<!--:link(子元件會有變數叫link)="link(內容是v-for定義的link的內容)" -->
</q-list>
```
##### 子:
```javascript=
import { defineProps, ref } from 'vue'
import { useI18n } from 'vue-i18n'
// 承接進來的link
const props = defineProps({
link: Object
})
// 同前面i18n教學
const { t } = useI18n()
const text = ref('')
```
```htmlembedded
<q-item>{{ t(link.test) }}</q-item>
```
---
## [增加語言清單](https://github.com/quasarframework/quasar/tree/dev/ui/lang)
依樣畫葫蘆
在要放切換選單的元件
<q-select v-model="locale" :options="localeOptions" label="Change Language" emit-value map-options
style="min-width: 150px" />
```javascript
// 這為了可調整語言+預設語言
import { useQuasar } from 'quasar'
import { useI18n } from 'vue-i18n'
const localeOptions = [
{ value: 'en-US', label: 'English' },
{ value: 'zh-TW', label: '繁體中文' }
]
const { locale } = useI18n({ useScope: 'global' })
// 這段把預設語言設為偵測到電腦的語言
locale.value = useQuasar().lang.getLocale()
```
## 用google sheet維護i18n表單
方便: 用一個table而不是3個檔案來維護翻譯檔
細節: 在上傳到github時會自動抓Sheet更新，且密鑰檔存在env裡不用另外帶，且只貼一次env變數就好
1. [綁google sheet建個JS檔實作，請照教學用require](https://ithelp.ithome.com.tw/articles/10262354)
2. [來這裡把整個密鑰檔內容貼上=>encode=>複製](https://www.base64encode.org/)
3. 在.env加上變數名及剛才的內容
4. 1.練習的js檔，調整一些(不能import)
```javascript
require('dotenv').config()
const key = Buffer.from(process.env.GOOGLE_SHEET, 'base64').toString('utf8')
credentials: JSON.parse(key),
```
5. 讓build時會自動跑程式:
package.json 加上 "prebuild":"node ./src/i18n/sheet2JSON.js" (對應你跟目錄，執行檔的位置)
---
## router 在store(pinia)裡面使用 需要調整用法:
this.router.push('/')
才能切換，老師原本的router.push('/') 不行用
---
## 文章編輯器
```Html
</template>
<QuillEditor theme="snow" />
</template>
<script setup>
import { defineComponent } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
defineComponent({
name: 'IndexPage',
components: QuillEditor
}
)
</script>
```
[其它主題/功能自己看](https://vueup.github.io/vue-quill/guide/themes.html)
Sign in with Wallet
Connect another wallet