---
# System prepended metadata

title: vue安裝
tags: [安裝套件 相關]

---

---
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 會有效果
```








