接上一篇: 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
