VON 3オンレール
レール6
Vue 3
巻頭言
仕事では、プロジェクトのフロントエンドを行うZAGE そばThe Life Company . アプリケーションはRailsに書き込まれます.私が参加したとき、フロントエンドの一部にVueを加えたかった.しかし、Vue 3をRailsに加える方法についてのチュートリアルを見つけることができませんでした.それで、私はそのチュートリアルを書きました、私は探していました.
最後に知っておくべきこと
この記事では、Ruby on RailsアプリケーションでVue 3をインストールする方法について説明します.最後に、ERBビューのテンプレート内でVueアプリを実装することができます.このチュートリアルのコードはGITHUBリポジトリにあります.rails-vue3-app .
内容:
Create Rails app
Configure Webpack environment
Create Vue app
Introduction Evan You released the Vue 3 2020年9月.この記事は、組成APIのような新機能に焦点を当てず、VUE 2からVUE 3へ移行する方法を説明したり説明したりしません.チェックアウトofficial documentation and migration guide そのために.
VueのCLIとVITEは簡単に新しいVueプロジェクトを構成するための素晴らしいツールですが、現在のリソースは、既存のコードベースでvue 3をインストールする方法に関する情報が不足しています.Rails 5 +の完全なスタックアプリケーションを持っているとき、あなたは既にwebpacker 設定.私がこの記事を書いている日現在、WebpackerはVUE
rails webpacker:install:vue , しかし、まだVue 3のために.私はPRを開けて、状態をチェックしますhere . だから、あなたの技術スタックにvue 3を追加する方法に右にダイブしましょう.Create Rails app (optional)
Setup rails app
To test the setup before adding it to your "real" codebase, you can create a new rails app.
rails new rails_vue3_app --webpack
I'm not a rails developer, so feel free to give me tips and hints, if there are other best practices for rails specific code and commands.
Install yarn
If the output of the previous command says something like:
Yarn not installed. Please download and install Yarn from https://yarnpkg.com/lang/en/docs/install/
...you need to install yarn and install the packages afterward.
npm i -g yarn
cd rails_vue3_app
yarn install
Install Vue3 & Co.
If you run your rails app inside of Docker, you don't need to install anything on your host machine. You can install the packages within your docker container.
To use Vue3, you'll need (guess what :) ) Vue in version 3, Vue-Loader in version 16 beta, and the SFC compiler.
Vue3 is released on npm with the tagnext . The current version is still 2.6.x to prevent developers from having to migrate to Vue3 if they don't want to. The same applies to the vue-loader .# in rails_vue3_app
yarn add vue@next vue-loader@next @vue/compiler-sfc
package.json インストールされているバージョンを見るには最小バージョンは次のようになります.// ##############################
// package.json
// ##############################
{
"name": "rails_vue_app",
"private": true,
"dependencies": {
"@vue/compiler-sfc": "^3.0.0",
"vue": "^3.0.0",
"vue-loader": "^16.0.0-beta.8"
// ...
}
// ...
}
Webpack environment configuration
Next, we need to tell Webpack what to do with *.vue files. For that, go to the file webpack/environment.js
By default, it should look like this:
// ##############################
// webpack/environment.js
// ##############################
const { environment } = require('@rails/webpacker')
module.exports = environment
Set an alias (optional)
I like to put my Vue applications into a separate folder. I also want to use a Webpack alias for an easier path handling when importing files. I did that with the following configuration:
// ##############################
// webpack/environment.js
// ##############################
// const { environment } = require('@rails/webpacker')
const path = require("path")
const customConfig = {
resolve:{
alias: {
"@": path.resolve(__dirname, "..", "..", "app/javascript/src")
}
}
}
environment.config.merge(customConfig)
// module.exports = environment
Add Vue Loader
Now it's time to add the loader. It tells Webpack what to do with files that match to the Regex .vue .
// ##############################
// webpack/environment.js
// ##############################
// const { environment } = require('@rails/webpacker')
// const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
// const customConfig = {
// resolve:{
// alias: {
// '@': path.resolve(__dirname, '..', '..', 'app/javascript/src')
// }
// }
// }
// environment.config.merge(customConfig)
environment.plugins.prepend(
'VueLoaderPlugin',
new VueLoaderPlugin()
)
environment.loaders.prepend('vue', {
test: /\.vue$/,
use: [{
loader: 'vue-loader'
}]
})
// module.exports = environment
Because I like to keep the file webpack/environment.js as clean and readable as possible, I outsourced the configuration of Vue in an own file within the folder webpack/loaders . By default it does not exist, so create it first using the terminal or your IDE. The end result should look like this:
// ##############################
// webpack/loaders/vue.js
// ##############################
module.exports = {
test: /\.vue$/,
use: [{
loader: 'vue-loader'
}]
}
// ##############################
// webpack/environment.js
// ##############################
// const { environment } = require('@rails/webpacker')
// const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue');
// const customConfig = {
// resolve:{
// alias: {
// '@': path.resolve(__dirname, '..', '..', 'app/javascript/src')
// }
// }
// }
// environment.config.merge(customConfig)
environment.plugins.prepend(
'VueLoaderPlugin',
new VueLoaderPlugin()
)
environment.loaders.prepend('vue', vue)
// module.exports = environment
Include .vue files
Next, open the file config/webpacker.yml and add .vue to the extensions:
// ##############################
// config/webpacker.yml
// ##############################
default: &default
# ...
extensions:
# ...
- .vue
Set Vue properties It is strongly recommended to properly configure some properties of Vue in order to get proper tree-shaking in the final bundle. You can find more information in Vue3's README 下
Bundler Build Feature Flags .// ##############################
// webpack/environment.js
// ##############################
// const { environment } = require('@rails/webpacker')
// const path = require('path')
const { DefinePlugin } = require('webpack')
// const { VueLoaderPlugin } = require('vue-loader')
// const vue = require("./loaders/vue");
// const customConfig = {
// resolve:{
// alias: {
// "@": path.resolve(__dirname, "..", "..", "app/javascript/src")
// }
// }
// }
// environment.config.merge(customConfig)
// environment.plugins.prepend(
// 'VueLoaderPlugin',
// new VueLoaderPlugin()
// )
environment.plugins.prepend(
'Define',
new DefinePlugin({
__VUE_OPTIONS_API__: false,
// or __VUE_OPTIONS_API__: true,
__VUE_PROD_DEVTOOLS__: false
})
)
// environment.loaders.prepend('vue', vue)
// module.exports = environment
Create a Vue app
Everything should now be correctly set up. It's finally time to add our first Single File Component and load it into a container.
Create entry point and SFC
As explained above, I'd like to collect all Vue related code in a single directory. Therefore, create the folder ./app/javascript/src in your root directory. In there, create the file main.js . It will be the entry point for the Vue application. Leave it empty as it is, we'll come back to it again.
Next, let's create a Vue component. I propose to create the folder ./app/javascript/src/components . In there, create the file HelloWorld.vue . You can name the file also hello-world.vue if you prefer that syntax. Insert the following code:
// ##############################
// app/javascript/src/components/HelloWorld.vue
// ##############################
<template>
<p>
{{ message }}
</p>
</template>
<script>
import { ref } from 'vue'
export default {
name: 'HelloWorld',
setup() {
const message = ref('Hello World')
return {
message
}
}
}
</script>
<style scoped>
p {
font-size: 2em;
text-align: center;
}
</style>
Of course you can write sassy CSS. Therefore add the lang attribute
lang='scss'to the<script>section.
Now, let's head back to our main.js file and create the Vue app:
// ##############################
// app/javascript/src/main.js
// ##############################
import { createApp } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue'
export default () => {
document.addEventListener('DOMContentLoaded', () => {
const app = createApp(HelloWorld)
app.mount('#vue-app')
})
}
Okay, let's recap what has happened. We created an SFC (Single File Component). We created a Vue instance and mounted it into an HTML element with the id vue-app . But what, we haven't written this element yet. So let's do that now.
Create Home controller and view as root route
For that, let's create a HomeController with a view. Alternatively, you can go directly to the .erb file you want to add the Vue app to.
rails generate controller Home index
Next, set the home controller as base route in config/routes.rb :
# -----------------
# config/routes.rb
# -----------------
# Rails.application.routes.draw do
# get 'home/index'
root to: 'home#index'
# end
Connect Vue and Rails
Finally, our configuration is done. Now we have a home page. We want to load the Vue app directly in this file. Head to app/views/home/index.html . Add or replace the dummy content with the following line:
<!-- app/views/home/index.html -->
<div id='vue-app'></div>
Let's check out what's going on in the browser. Open your terminal and start the rails and the Webpack server with:
# in one tab
rails server
# in another tab
./bin/webpack-dev-server
div container IDでvue-app . 私たちの最後のステップは、一緒にすべてをもたらすために我々のVUEアプリケーションのエントリポイントをインポートすることです.簡単にするには、エントリポイントを
application.js このチュートリアルでは.もちろん、1つのパックを作成することができます.また、Webpack(ER)の分割チャンク機能を使用することができます.でも今はオープンしましょうapp/javascript/packs/application.js エントリをインポートします.// ##############################
// app/javascript/packs/application.js
// ##############################
// require("@rails/ujs").start()
// require("turbolinks").start()
// require("@rails/activestorage").start()
// require("channels")
import initVueApp from "@/main.js"
initVueApp()
Next Steps
Congratulations, you have just installed Vue3 in a Rails app. Next, we will talk about how to:
- pass properties from Rails to Vue
- configure Linters
Follow me to receive notifications, when I post those articles. I will link them here at the bottom of this article as soon as they're published.
Photo by Christian Holzinger on Unsplash
Reference
この問題について(VON 3オンレール), 我々は、より多くの情報をここで見つけました https://dev.to/vannsl/vue3-on-rails-l9dテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol