接上一篇: rails5.1結(jié)合前端框架(一)
在rails項(xiàng)目中集成vue框架
參考鏈接:rails/webpacker

安裝vue相關(guān)配置信息

rails webpacker:install:vue # install vue config files
# out put
Copying vue loader to config/webpack/loaders
      create  config/webpack/loaders/vue.js
Adding vue loader to config/webpack/environment.js
      insert  config/webpack/environment.js
      insert  config/webpack/environment.js
Updating webpack paths to include .vue file extension
      insert  config/webpacker.yml
      create  app/javascript/packs/hello_vue.js
      create  app/javascript/app.vue
Installing all Vue dependencies
         run  yarn add vue vue-loader@14.2.2 vue-template-compiler from "."

執(zhí)行vue初始化之后,可以看到腳手架幫我們生成的文件.

打開app/javascript/packs/application.js文件,可以看到里面有使用說明

/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb

console.log('Hello World from Webpacker')

新建一個(gè)控制器,添加代碼到視圖文件中

 rails g controller clients
# 添加路由配置

添加clients/index的view文件，修改視圖文件的內(nèi)容

<h1>page clients</h1>
<%= javascript_pack_tag 'hello_vue' %>

啟動(dòng)代碼查看結(jié)果,至此基礎(chǔ)環(huán)境初始化完畢.剩下的就是填文件了
http://localhost:3000/clients