rails5.1结合前端框架(二)

接上一篇: rails5.1结合前端框架(一)
在rails项目中集成vue框架
参考链接:rails/webpacker

安装vue相关配置信息

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 "."

执行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')

新建一个控制器,添加代码到视图文件中

 rails g controller clients
# 添加路由配置

添加clients/index的view文件，修改视图文件的内容

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

启动代码查看结果,至此基础环境初始化完毕.剩下的就是填文件了
http://localhost:3000/clients