[第六只羊] 迷雾森林建筑工事 V 哈罗世界安安vue

天亮了 昨晚是平安夜

关於迷雾森林故事

Rock you，Rock you，Rock you

敲家门没人应没的 Rocky
找不到先行离开招集会的父母
有点着急
沿着昨天父母带着他前往会场的路回头探索路上可能有的蛛丝马迹
平常很少独自出门的 Rocky 显得有点紧张
约莫走了七分钟 Rocky遇到一只从来没见过的巨鹿

图片来源
於是 Rocky 鼓起勇气与他对话
请...请问巨鹿先生，你昨晚到今天有看到我的父母吗？
巨鹿摇摇头，但看到 Rocky无助的样子 又说
但我可以帮你找出他们的足迹
Rocky 兴奋地表示：真的吗？那太好了，谢谢巨鹿先生
还没等到Rocky说完感谢的话
白天突然变成了黑夜
月光映着它发光的鹿角
就在此刻
天空中出现了一只鹿

图片来源
维持了三秒之後地上就出现了发光的脚印
当Rocky觉得充满希望再抬头想要表达感谢之意的时候
巨鹿突然消失在迷雾森林之中
山谷中响起了下面这一首音乐 声音离浣熊越来越远

待续..

动物园派对

紧接着我们还需要把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')
})

但这边要注意的是
@Tingting 用的vue 是vue2
这边用的是vue 3唷
差异可以看 全端大大 @Cian
的这篇

阿虎每日选币

之前如果有守好的现在应该是空仓
先来看看刚上线的台湾创作者鳄鱼NFT
画风可爱程度不输吸血鬼

天黑请闭眼