---
title: vue安裝
tags: 安裝套件 相關
---
## <font color=red>**vue安裝** </font>
# webpacker
rails webpacker:install:vue
在app/views/layouts/application.html.erb
```htmlembedded=
<head>
裡面添加<%= javascript_pack_tag 'hello_vue' %>
</head>
```
在app/javascript/packs/hello_vue.js
```javascript=
import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'
document.addEventListener('DOMContentLoaded', () => {
const app = new Vue({
el: '#hello',
data: {
message: "Can you say hello?"
},
components: { App }
})
})
// 打開這段code，上半部註解掉
```
在隨便一個html.erb裡面加入就能看到效果
```htmlembedded=
<div id='hello'>
{{message}}
<app></app>
</div
```
# vu3 on rails
[文章連結](https://dev.to/vannsl/vue3-on-rails-l9d#install-npm-packages)
yarn add vue@next vue-loader@next @vue/compiler-sfc
## 配置環境
### 路徑設置
config/webpack/environment.js
```javascript=
const path = require("path")
const customConfig = {
resolve:{
alias: {
"@": path.resolve(__dirname, "..", "..", "app/javascript/src")
// import initVueApp from "@/main.js" 相當於 import initVueApp from "src/main.js"
// 單純把src/簡化為@/
}
}
}
environment.config.merge(customConfig)
// 把路徑稍微優化
```
### vue loader
config/webpack/environment.js
```javascript=
const { VueLoaderPlugin } = require("vue-loader")
const vue = require("./loaders/vue");
// 呼叫放在webpack/loader/vue的判斷式
environment.plugins.prepend(
'VueLoaderPlugin',
new VueLoaderPlugin()
)
environment.loaders.prepend('vue', vue)
// 告訴webpack遇到.vue檔時要怎麼做
```
在 config/webpack 下創一個 loaders 資料夾，裡面建一個vue.js檔
```javascript=
module.exports = {
test: /\.vue$/,
use: [{
loader: 'vue-loader'
}]
}
// 為了保持environment.js可讀性，把判斷式放到獨立的檔案內
```
### 設置 Vue 屬性
config/webpack/environment.js
```javascript=
const { DefinePlugin } = require("webpack")
environment.plugins.prepend(
'Define',
new DefinePlugin({
__VUE_OPTIONS_API__: false,
__VUE_PROD_DEVTOOLS__: false
})
)
// 方便後續打包
```
### environment.js最終模樣
```javascript=
const { environment } = require('@rails/webpacker')
const path = require("path")
const { VueLoaderPlugin } = require("vue-loader")
const { DefinePlugin } = require("webpack")
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,
__VUE_PROD_DEVTOOLS__: false
})
)
environment.loaders.prepend('vue', vue)
module.exports = environment
```
## 建立vue app
在app/javascirpt建立 src/components/HelloWorld.vue 這樣的資料夾路徑，HelloWorld.vue裡面寫
```htmlembedded=
<template>
<p>
{{ message }}
</p>
</template>
<!-- 渲染層 -->
<script>
import { ref } from 'vue'
export default {
name: 'HelloWorld',
setup() {
const message = ref('Hello World')
return {
message
}
}
}
</script>
<!-- js -->
<style scoped>
p {
font-size: 2em;
text-align: center;
}
</style>
<!-- css -->
```
javascript/src 建立 main.js，內容為
```javascript=
import { createApp } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue'
// 引入創造vue實體的函式
// 引入HelloWorld的資料
export default () => {
document.addEventListener('DOMContentLoaded', () => {
const app = createApp(HelloWorld)
app.mount('#vue-app');
})
// 指到某個ＤＯＭ標籤
}
```
javascript/packs/application.js 裡面寫入
```javascript=
import initVueApp from "@/main.js"
initVueApp()
// 引入js呼叫他
```
```
rails generate controller Home index
建立一個 Home controller 裡面建立 index 方法 views 也會長出erb檔
root to: 'home#index'
改個首頁
erb檔 加入<div id='vue-app'></div>這行
開foreman s 會有效果
```
Sign in with Wallet
Connect another wallet