---
# System prepended metadata

title: vue資源與常見問題
tags: [vue鐵人賽]

---


# 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: ‘./’; 然後再重新打包一次就可以了。
![](https://i.imgur.com/VYklNLp.png)

---
### 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