I am trying to develop using Rails x Vue.js. Since I'm groping, there may be some mistakes, but I searched for it myself. I hope you can read it as such an article.
① Introduce npm (OK in home directory)
brew install npm
② Introduce the npm package to the app (in the app directory)
npm init
This will launch an interactive prompt, prompting you for some input. The value in parentheses is the value prepared by default by the npm command.
package name: (a) sample
version: (1.0.0) 0.0.0
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
name… The name of the package. It is used when importing or requiring in the source code.
version ... It's the first time, so answer 1.0.0 or 0.0.0. You need to change the version every time you update
description… Package description. If you do not enter anything, it will be displayed as follows
"description": "This README would normally document whatever steps are necessary to get the application up and running.",
I wrote the explanation for using the app in the README, so please take a look.
main… The first script file called in the module. The first file to be called when a package is required. This time it was main.js.
test command… A setting that allows you to execute source code using commands. If you press enter without entering anything
"test": "echo \"Error: no test specified\" && exit 1"
A value like this is saved.
this is
npm test
It means that the output below echo will be output for the command. When you actually run it
% npm test
>app [email protected] test
> echo "Error: no test specified" &&exit 1 here
Error: no test specified
npm ERR! Test failed. See above for more details.
The echo part is output like this.
repository… Specify the git repository to be linked. If .git exists, the url of the currently linked git repository will be entered without permission even if you do not enter it.
author… The author of the package.
license… Package rights information. The standard is ISC, so I followed it.
Finally, the following package.json was created, including the ones that were not entered in the interactive shell.
{
"name":app name,
"private": true, (True if you don't want to publish)
"dependencies": {
"@rails/actioncable": "^6.0.0-alpha",
"@rails/activestorage": "^6.0.0-alpha",
"@rails/ujs": "^6.0.0-alpha",
"@rails/webpacker": "4.3.0",
"turbolinks": "^5.2.0",
"vue": "^2.6.12"
},
"version": "0.1.0",
"devDependencies": {
"vue-loader": "^15.9.6",
"webpack": "^5.11.1",
"webpack-dev-server": "^3.11.1"
},
"description": "This README would normally document whatever steps are necessary to get the application up and running.",
"main": "main.js", (Source code that is called first when you call a package)
"directories": {
"lib": "lib",
"test": "test"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url":Linked git repository
},
"author":Author set by myself,
"license": "ISC",
"bugs": {
"url":Repository issue
},
"homepage":Repository name readme
}
③ Introduced webpack and vue-loader
#Local installation
npm install webpack vue-loader --save-dev
npm install vue --save
#Global installation
npm install webpack -g
If you install these, a lot of modules of node.js will be installed in the node_modules folder, but these will be loaded without permission because the dependency is described in package.json. So you don't have to push to git.
So play with gitignore
.gitignore
node_modules/
This will prevent node_modules from being pushed to git.
【reference】
Introduction of development using vue.js
https://qiita.com/m0a/items/34df129d6d8991ebbf86
Why include node_modules in gitignore
https://qiita.com/growsic/items/b2965c0ba3b0aaae1ff8
Contents of package.json
https://qiita.com/dondoko-susumu/items/cf252bd6494412ed7847
The one I referred to because permission was denied by the npm command
https://qiita.com/okohs/items/ced3c3de30af1035242d
What is vue-loader
https://vue-loader-v14.vuejs.org/ja/
[What to do next]
Fixed fine settings in package.json
Recommended Posts