[第五只羊] 迷雾森林建筑工事 IV 专案环境设定 READY GO
天亮了 昨晚是平安夜
关於迷雾森林故事
小狼现身请睁眼
待洛神解释完了迷雾森林的由来
知悉了 animal 们计画的小狼们并没有看出阿虎是想要透过舞会找出过往的杀 animal 的凶手
对他们来说 这个舞会趴踢只会让他们更容易找到间隙下手杀害下一个人
讲到这里
小狼们不经意的窃笑着
但是他们可以慢慢讨论 毕竟距离趴踢晚会还有两天的时间
并假装跟其他 animal 一样盛装打扮
在森林的另一头
https://www.artstation.com/artwork/L2Wvrl
阿虎也没有闲着
他试着在趴踢之前过滤全森林 animal 清单
希望能在活动开始之前找出可以信任的 animal
所以他先找了也是蓝鸟布鲁好朋友的呱呱举办舞会的真正目的
图片来源
呱呱听完虽然也表认同
但完全没有头绪该怎麽开始
阿虎只跟他说了一声不用担心
到时他会给呱呱暗号给指示 照着做就可以了
此时浣熊跟小狐狸也在回家已经约好两天後要一起去舞会现场
图片来源
在回家的分岔路上分道扬镳
就当浣熊Rocky回到家说我回来了
家里却没有人应门
图片来源
待续..
动物园派对
再来我们就要把 vite 跟 vue 加入专案之中
首先我们在 gemfile 里面把 webpacker 换成 vite
并移除gem 'webpacker', '~> 5.0'
../app//gemfile.rb
gem 'vite_rails'
接下来我们要将vite编译器初始化
$ bundle
$ bundle exec vite install
这个指令会帮我们跑 vite 与 vite-ruby
紧接着在两个专案目录下的 command line 分页分别打上
$ bin/vite dev
$ rails server
就可以完成 vite 编译器取代 webpacker了
这些步骤帮我们自动追加了这些档案
- bin/vite
- vite.config.ts
- config/vite.json
并透过 console 可以印出Vite ⚡️ Rails
app/javascript/entrypoints/application.js
console.log('Vite ⚡️ Rails')
// If using a TypeScript entrypoint file:
// <%= vite_typescript_tag 'application.jsx' %>
//
// If you want to use .jsx or .tsx, add the extension:
// <%= vite_javascript_tag 'application.jsx' %>
console.log('Visit the guide for more information: ', 'https://vite-ruby.netlify.app/guide/rails')
同时在我们的application.html.erb进入点
导入vite的js物件
<!DOCTYPE html>
<html>
<head>
<title>Zooparty</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= vite_client_tag %>
<%= vite_javascript_tag 'application' %>
<!--
If using a TypeScript entrypoint file:
vite_typescript_tag 'application'
If using a .jsx or .tsx entrypoint, add the extension:
vite_javascript_tag 'application.jsx'
Visit the guide for more information: https://vite-ruby.netlify.app/guide/rails
-->
</head>
<body>
<%= yield %>
</body>
</html>
如此一来我们就成功导入vite到专案中了
参考资料：
阿虎每日选币
守 $0.1
天黑请闭眼
iOS APP 开发完成，如何进进行内测和公测？
进入测试阶段，测试是非常重要的，提前排除可能出线的bug，减少正式上线可能会造成的损失。 内测-超级...
27. 从学生社团到技术社群 x WTM x I-LIFE 专案
这是段 UI、UX & Me 的故事。 D 搭 D 工作坊 在今年年初的时候，我从 GDG ...
Re: 新手让网页 act 起来: Day18 - React Hooks 之 useRef
前言 探索完 useState 与 useEffect ，今天就让我们回来继续介绍其他的 React...
【Day 25】Google Apps Script - API Blueprint 篇 - 执行专案取得 .apib 档
执行 Google Docs 转换 API Blueprint 格式专案程序，最後来看看转换後的 ...
JS Getter 与 Setter DAY71
Setter 与 Setter Getter: 取得特定值的方法 Setter: 存值的方法 Get...