Create a gist now

Instantly share code, notes, and snippets.

@seiyamaeda /CLI
Last active Apr 6, 2018

Embed
What would you like to do?
How to install Vue.js on Webpacker
$ruby -v
ruby 2.4.1p111 (2017-03-22 revision 58053) [x86_64-linux]
$ bundle exec rails -v
Rails 5.1.4
$ yarn -v
1.5.1
$ bundle install
:
Fetching rack-proxy 0.6.4
Installing rack-proxy 0.6.4
:
Using webpacker 4.0.0.pre.pre.2 from https://github.com/rails/webpacker.git (at master@7b20487)
$ yarn upgrade vue
$ bundle exec rails webpacker:install
create config/webpacker.yml
Copying webpack core config
create config/webpack
create config/webpack/development.js
create config/webpack/environment.js
create config/webpack/production.js
create config/webpack/test.js
Copying .postcssrc.yml to app root directory
create .postcssrc.yml
Copying .babelrc to app root directory
create .babelrc
Creating JavaScript app source directory
create app/javascript
create app/javascript/packs/application.js
apply /usr/local/rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/bundler/gems/webpacker-7b2048777239/lib/install/binstubs.rb
Copying binstubs
exist bin
create bin/webpack
create bin/webpack-dev-server
Adding configurations
append .gitignore
Installing all JavaScript dependencies
run yarn add @rails/webpacker from "."
yarn add v1.5.1
:
:
:
Webpacker successfully installed 🎉 🍰
$ bundle exec rails webpacker:install:vue
Webpacker is installed 🎉 🍰
Using /farmer/config/webpacker.yml file for setting up webpack paths
Copying vue loader to config/webpack/loaders
create config/webpack/loaders/vue.js
Adding vue loader plugin to config/webpack/environment.js
insert config/webpack/environment.js
insert config/webpack/environment.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
Copying the example entry file to /farmer/app/javascript/packs
create app/javascript/packs/hello_vue.js
Copying Vue app file to /farmer/app/javascript/packs
create app/javascript/app.vue
Installing all Vue dependencies
run yarn add vue vue-loader@next vue-template-compiler from "."
yarn add v1.5.1
:
:
:
Webpacker now supports Vue.js 🎉
# Compiling
$ bin/webpack
Hash: 985708689216454590f5
Version: webpack 3.11.0
Time: 1921ms
Asset Size Chunks Chunk Names
hello_vue-adb354e270509346d6fd.js 244 kB 0 [emitted] hello_vue
application-caf7aec5cb959c6480c2.js 3.27 kB 1 [emitted] application
hello_vue-9cb5a7334a6577c3422968b9b9970b2f.css 138 bytes 0 [emitted] hello_vue
hello_vue-adb354e270509346d6fd.js.map 292 kB 0 [emitted] hello_vue
hello_vue-9cb5a7334a6577c3422968b9b9970b2f.css.map 561 bytes 0 [emitted] hello_vue
application-caf7aec5cb959c6480c2.js.map 3.19 kB 1 [emitted] application
manifest.json 434 bytes [emitted]
[0] (webpack)/buildin/global.js 509 bytes {0} [built]
[1] ./app/javascript/app.vue?vue&type=script&lang=js 181 bytes {0} [built]
[2] ./app/javascript/packs/application.js 517 bytes {1} [built]
[3] ./app/javascript/packs/hello_vue.js 1.93 kB {0} [built]
[8] ./app/javascript/app.vue 945 bytes {0} [built]
[9] ./app/javascript/app.vue?vue&type=template&id=6fb8108a&scoped=true 212 bytes {0} [built]
[10] ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=template&id=6fb8108a&scoped=true 683 bytes {0} [built]
[11] ./node_modules/babel-loader/lib??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=script&lang=js 116 bytes {0} [built]
[12] ./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css 448 bytes {0} [built]
[13] ./node_modules/extract-text-webpack-plugin/dist/loader.js??ref--2-0!./node_modules/style-loader??ref--2-1!./node_modules/css-loader??ref--1-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css 41 bytes {0} [built]
[15] ./node_modules/css-loader??ref--1-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css 756 bytes [built]
+ 8 hidden modules
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js??ref--1-2!node_modules/vue-loader/lib/loaders/stylePostLoader.js!node_modules/postcss-loader/lib/index.js??ref--1-3!node_modules/vue-loader/lib/index.js??vue-loader-options!app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css:
[0] ./node_modules/css-loader??ref--1-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css 756 bytes {0} [built]
+ 1 hidden module
gem 'webpacker', github: 'rails/webpacker'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment