iT邦幫忙

2021 iThome 鐵人賽

DAY 6
1
Software Development

透過迷霧,看破一切~~ZOOPARTY 動物園派對桌遊設計系列 第 6

[第六隻羊] 迷霧森林建築工事 V 哈囉世界安安vue

天亮了 昨晚是平安夜

關於迷霧森林故事

Rock you,Rock you,Rock you

敲家門沒人應沒的 Rocky
找不到先行離開招集會的父母
有點著急
沿著昨天父母帶著他前往會場的路回頭探索路上可能有的蛛絲馬跡
平常很少獨自出門的 Rocky 顯得有點緊張
約莫走了七分鐘 Rocky遇到一隻從來沒見過的巨鹿
https://ithelp.ithome.com.tw/upload/images/20210920/20131155Uj9LhmXhR9.jpg
圖片來源
於是 Rocky 鼓起勇氣與他對話
請...請問巨鹿先生,你昨晚到今天有看到我的父母嗎?
巨鹿搖搖頭,但看到 Rocky無助的樣子 又說
但我可以幫你找出他們的足跡
Rocky 興奮地表示:真的嗎?那太好了,謝謝巨鹿先生
還沒等到Rocky說完感謝的話
白天突然變成了黑夜
月光映著它發光的鹿角
就在此刻
天空中出現了一隻鹿

圖片來源
維持了三秒之後地上就出現了發光的腳印
當Rocky覺得充滿希望再抬頭想要表達感謝之意的時候
巨鹿突然消失在迷霧森林之中
山谷中響起了下面這一首音樂 聲音離浣熊越來越遠
IMAGE ALT TEXT HERE
待續..

動物園派對

緊接著我們還需要把vue.js導入
把 vue 透過 yarn 加入專案中

$ yarn add -D @vitejs/plugin-vue

若需要typescript或是next相關相依可以一起加

$ yarn add -D @vue/compiler-sfc
$ yarn add -D typescript
$ yarn add vue@next # vue3

再來我們必須在剛剛vite幫我們自動生成的檔案中加入vue的物件讓vite認識它

vite.config.ts

import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'

import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    RubyPlugin(),
    vue()
  ],
})

裝完之後就可以直接開始使用

$ bin/vite

Commands:
  vite build                       # Bundle all entrypoints using Vite.
  vite clobber                     # Clear the Vite cache, temp files, and builds
  vite dev                         # Start the Vite development server.
  vite install                     # Performs the initial configuration setup to get started with Vite Ruby.
  vite upgrade                     # Updates Vite Ruby related gems and npm packages.
  vite upgrade_packages            # Upgrades the npm packages to the recommended versions.
  vite version                     # Print version

在兩個專案目錄下的 command line 分頁再次打上

$ bin/vite dev
$ rails server

就可以看到專案跑起來的畫面
整合完vite跟vue之後
基於站在巨人的肩膀上寫文
我們先右轉來看看Vue架構的MVVM
Rails 與 Vue 的架構介紹

所以目前rails app的架構這樣:

├── app
│   ├── assets
│   ├── channels
│   ├── (C)ontrollers
│   ├── graphql
│   ├── helpers
│   ├── javascript  => 放前端檔案最重要的地方
│   ├── jobs
│   ├── mailers
│   ├── (M)odels
│   ├── services
│   └── (V)iews

其中前端檔案

├── javascript
│   ├── channels
│   │   ├── consumer.js
│   │   └── index.js
│   ├── entrypoints
│   │   ├── application.js
│   ├── src
│   │   ├── components
│   │   └── application.css
│   │   └── main.js
│   ├── app.vue

了解專案架構後 開工開工
接下來我們建立一個RoomsController

$ Rails g controller rooms

並在view端建立vue的

app/views/rooms/index.erb

<div id="app"></div>

在app/javascript/app.vue

<template>
  <p>{{ state.message }}</p>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'App',
  setup() {
    return {
      state: {
        message: "第13屆鐵人賽,動物園派對,趴踢趴踢歐奈,竟然撐過第五天了!"
      }
    }
  }
})
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

最後再導入這個vue檔案

app/javascript/entrypoints/application.js

import { createApp } from 'vue'
import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () => {
    createApp(App).mount('#app')
})

https://ithelp.ithome.com.tw/upload/images/20210920/20131155nxzhbusxl7.png
但這邊要注意的是
@Tingting 用的vue 是vue2
這邊用的是vue 3唷
差異可以看 全端大大 @Cian
這篇

阿虎每日選幣


之前如果有守好的現在應該是空倉
先來看看剛上線的台灣創作者鱷魚NFT
畫風可愛程度不輸吸血鬼

天黑請閉眼


上一篇
[第五隻羊] 迷霧森林建築工事 IV 專案環境設定 READY GO
下一篇
[第七隻羊] 迷霧森林舞會前夕 建立使用者關聯
系列文
透過迷霧,看破一切~~ZOOPARTY 動物園派對桌遊設計30

尚未有邦友留言

立即登入留言