# vue資源與常見問題
###### tags: `vue鐵人賽`
## vue&nuxt教學資源
https://vueschool.io/lessons/what-is-nuxtjs
## vue常見問題
### 如何拆分components
這裡提到的know how，指的是拆分的心得與狀況
https://medium.com/i-am-mike/%E9%87%8D%E6%A7%8B%E5%80%92%E6%95%B8%E7%AC%AC29%E5%A4%A9-%E9%97%9C%E6%96%BC%E6%8B%86%E5%88%86-components-%E7%9A%84%E5%AD%B8%E5%95%8F-66dc23e910fa
### 如何在vue使用FontAwsome
1. 安裝核心包（SVG core）
```
yarn add @fortawesome/fontawesome-svg-core
```
2. 安裝icon包
```
# Free icons styles
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-brands-svg-icons
```
> 分別為FontAwome網站對應之各字重系列包，分處以Solid包、Regular包、Brand（商標）包為示範。其他還有Light包、Thin包尚未安裝
3. 安裝專屬的Vue Component包
* vue2請安裝2.x.x版
```
yarn add @fortawesome/vue-fontawesome@latest
```
* vue3請安裝3.x.x版
```
yarn add @fortawesome/vue-fontawesome@prerelease
```
4. 在`src/main.js`底下引入FontAwsome，同時設定library
==注意==：需付費解鎖的icon會無法引入
* vue3的引入方式
``` javascript=
import { createApp } from "vue"
// 上列程式碼，為 Vue 3 全局改變 Vue 行為的 API
// 現在使用新的 createApp 方法所創建的應用實例上
import App from './App'
/* 引入FontAwsome核心 */
import { library } from '@fortawesome/fontawesome-svg-core'
/* 官網名稱為fa-arrow-down，使用巢狀命名作為變數引入您想用的icon*/
import { faArrowDown } from '@fortawesome/free-solid-svg-icons'
/* 引入font awsome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
/* 將想用的icon加入library */
library.add(faArrowDown)
const app = createApp(App)
/* 註冊全域component */
app.component('font-awesome-icon',FontAwesomeIcon)
app.mount('#app')
```
* vue2的引入方式
```javascript=
import Vue from 'vue'
// 上列為vue2全局改變vue行為的引入方式
import App from './App'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faArrowDown } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faArrowDown)
Vue.component('font-awesome-icon', FontAwesomeIcon)
// 上列為vue2註冊全局component的方式
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
```
5. 使用icon
==本處使用icon的方式與官方提供的略有差異，因為官方提供的命名方式在vue3用不出來==
* 能正常運作的方法，此方法將預設icon使用solid樣式包
```htmlmixed
<font-awesome-icon icon="arrow-down" />
```
所以當該icon屬於非solid樣式包，則會引入錯誤，下列為錯誤例子。
```htmlmixed
<font-awesome-icon icon=”instagram” />
```
由於`instagram`屬於brand樣式包，因此若不指定樣式則會無法正常顯示，請參見下列指定樣式的方法
<br><br>
* 相同icon，指定不同樣式的方法
1. 在`main.js`
```javascript
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee as fasCoffee } from '@fortawesome/pro-solid-svg-icons'
import { faCoffee as farCoffee } from '@fortawesome/pro-regular-svg-icons'
import { faCoffee as falCoffee } from '@fortawesome/pro-light-svg-icons'
import { faCoffee as fadCoffee } from '@fortawesome/pro-duotone-svg-icons'
```
> import as：如果想要改變被匯入模組在當前模組中的變數名稱，則可以使用`import as`
> 請參見
https://openhome.cc/Gossip/Python/ImportImportAsFrom.html
2. 在`app.vue`
```htmlmixed
<font-awesome-icon :icon=”[‘fab’, ‘coffee’]” />
```
> 該方法為v-bind(:)，請參見 https://hackmd.io/I_WbIg0tSsGgxA1WMVudew?view#v-bind屬性綁定（）
> fas｜Solid
far｜Regular
fal｜Light
fab｜Brands
* 官方提供的方法（在我的例子下無法正常運作）
```htmlmixed
<font-awesome-icon icon="fa-solid fa-arrow-down" />
```
延伸閱讀
> vue3如何註冊全域component
https://vuejs.org/guide/components/registration.html#global-registration
參考資料
>vue-fontawesome官方文檔，包括如何使用其他樣式
>https://github.com/FortAwesome/vue-fontawesome
>
>其他教學
>https://medium.com/%E6%BC%AB%E7%AF%89%E8%98%AD%E6%A0%BC/%E5%A6%82%E4%BD%95%E5%9C%A8-vue-%E8%A3%A1%E9%9D%A2%E4%BD%BF%E7%94%A8-font-awesome-c0d8f66c1e3b
------
### vue3圖片位置要放最外層的public，還是src底下的assets
* 通常放assets
* 全域用到的放public
一般來說的話, 都放/assets裡, vue-cli會幫你過webpack, 會依據你引入的module component 做優化過webpack有以下好處:
1. 根據你的Scripts and stylesheets 去minified 圖片
2. 路徑錯誤的話會有 vue-cli 的 handle error instead 404
3. 同名圖片會自動綁hash, 所以不用擔心圖片更改的version問題
是全域的圖片,無法依照moudule的,甚至是要在web-applicaiton起起來之前就要使用的,在放在/public吧 (我目前只有想到favicon...
==如果會全域使用到的素材硬放在assets則高機率報錯，例如在netlify的時候==
本文來源：
https://ithelp.ithome.com.tw/questions/10192607
參考資料:
https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling
https://cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder
---
### 使用 vue 項目打包後，嘗試使用打開 dist 目錄下的 index.html，頁面空白
> https://www.gushiciku.cn/pl/pwH3/zh-tw
若為vue3.0以上，手動建立`vue.config.js`並配置以下內容
```javascript=
module.exports = {
publicPath: './'
}
```
針對vue-cli3.0以下版本的可以直接將config/index.js檔案的assetsPublicPath: ‘/’;改為assetsPublicPath: ‘./’; 然後再重新打包一次就可以了。
---
### vue-cli安裝tailwind，解決tailwind在localhost無法及時刷新
> https://hackmd.io/@lalarabbits/vuecli-4-tailwind-jit-installation
> >https://www.npmjs.com/package/cross-env
==1. 重要的一步==，安裝 `cross-env`允許在script中一次使用多個指令
```
npm install -D cross-env
```
2. 設定`tailwind.config.js`（通常使用vue預設產出的`tailwind.config.js`即可）
```javascript=
module.exports = {
mode: 'jit',
purge: ["./public/**/*.html", "./src/**/*.{js,jsx,ts,tsx,vue}"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
```
3. 在`.src/main.js`中引入`./assets/tailwind.css`
* `./assets/tailwind.css`
```css=
@tailwind base;
@tailwind components;
@tailwind utilities;
```
* `.src/main.js`
```javascript=
import { createApp } from 'vue'
import App from './App.vue'
import './assets/tailwind.css'
createApp(App).mount('#app')
```
==4. 最重要的一步==開啟`package.json`並修改指令如下
```javascript=
"scripts": {
"serve": "cross-env TAILWIND_MODE=watch vue-cli-service serve",
"build": "cross-env TAILWIND_MODE=build vue-cli-service build",
"lint": "vue-cli-service lint"
},
```
在script指令中，前綴`cross-env`以便使用後續同時多個指令，例如
```
cross-env TAILWIND_MODE=watch vue-cli-service serve
=TAILWIND_MODE=watch + vue-cli-service serve
```
5. 執行 `npm run serve`，成功開啟本地伺服器
## vue資源
### swiperSlider for vue3
https://openbase.com/js/vue-awesome-swiper
https://github.com/surmon-china/vue-awesome-swiper
https://blog.csdn.net/weixin_46836035/article/details/107647759)
問題解法
https://blog.csdn.net/weixin_46836035/article/details/107647759)
### scroll event
1. @vueuse/motion
https://www.youtube.com/watch?v=jRknsy851IM&t=59s
https://vueuse-motion-demo.netlify.app/
### 重新認識vue
https://book.vue.tw/CH2/2-2-communications.html
### 用vue寫手機app
https://www.youtube.com/watch?v=CjXgoYo86yY
### Vue.js 與 Javascript 在開發上的差異
https://www.youtube.com/watch?v=mxv3nmDfCIs
### vue tutorial
官方文件：https://cli.vuejs.org/zh/guide/
**推推推**Vue JS 3 Tutorial for Beginners：https://www.youtube.com/watch?v=YrxBCBibVo0&list=PL4cUxeGkcC9hYYGbV60Vq3IXYNfDk8At1&index=2
3hr for vue beginner：https://www.youtube.com/watch?v=ZqgiuPt5QZo
bilibili：https://www.bilibili.com/video/BV17x411J73h?p=2
### vue cli
https://cli.vuejs.org/zh/
https://www.youtube.com/watch?v=puGk4s6O1uw&t=688s
**使用vue cli搭配tailwind開發**
https://medium.com/coding-hot-pot/%E5%A6%82%E4%BD%95%E7%94%A8vue-cli-%E6%90%AD%E9%85%8Dtailwind-css%E9%96%8B%E7%99%BC-42c0f0dc3d3a
**vue視差滾動**
https://learnvue.co/2020/04/a-beautiful-parallax-scrolling-effect-in-vuejs-daily-vue-tips-2/#adding-the-parallax-effect
Sign in with Wallet
Connect another wallet