So when I do 'npm install' on a vue js project it takes almost 2 mins to download all dependencies stated. I'm new to vue and npm in general and I want to know if I can speed this up by removing dependencies that i'm not really using. the info in package.json is the following:
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0"
}, "devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0-0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0"
}
I know I can do trial and error to see what I need but wanted to ask the community to see if they know anything. Basically is babel/eslint necessary for me to compile this vue app?
Pardon my ignorance in this subject, I'm new to it. Thanks in advance!
do "npm install -g #vue/cli" it will install basic packages
Related
I have setup unit testing using installation instructions from https://v1.test-utils.vuejs.org/
Tests are running properly. But the coverage is coming incorrectly.
In the report it is showing it has only 1 statement, 1 function, 2 branches for some reason.
It's not showing coverage for all the lines. It shows coverage in the first line and doesn't show coverage anywhere else. Don't know what's the issue is here.
I'm using Bootstrap-vue to render components. Can this create an issue with coverage? I'm asking this because the example.spec.js that came for the helloworld component is showing coverage correctly.
my dev dependencies
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-plugin-unit-jest": "^5.0.4",
"#vue/cli-service": "~5.0.0",
"#vue/test-utils": "^1.3.0",
"#vue/vue2-jest": "^27.0.0-alpha.2",
"babel-jest": "^27.0.6",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"flush-promises": "^1.0.2",
"jest": "^27.0.5",
"node-sass": "^7.0.1",
"sass-loader": "^12.6.0",
"vue-template-compiler": "^2.6.14"
},
I am attempting to deploy a vuejs app to github pages. I have followed every stackoverflow post, and every tutorial I have found online. No matter what I do, the page only displays the readme file.
github repo
github page
I am using the gh-pages branch.
package.json:
type here{
"name": "eller-front-end-resume",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"lint": "vue-cli-service lint",
"build": "vue-cli-service build",
"predeploy": "yarn build",
"deploy": "node scripts/gh-pages-deploy.js"
},
"dependencies": {
"#vue/composition-api": "1.4.6",
"axios": "0.26.0",
"core-js": "^3.6.5",
"execa": "latest",
"lodash": "4.17.21",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuetify": "^2.6.4",
"vuex": "^3.4.0"
},
"devDependencies": {
"#types/lodash": "^4.14.180",
"#typescript-eslint/eslint-plugin": "^4.18.0",
"#typescript-eslint/parser": "^4.18.0",
"#vue/cli-plugin-babel": "~4.5.7",
"#vue/cli-plugin-eslint": "~4.5.7",
"#vue/cli-plugin-router": "~4.5.7",
"#vue/cli-plugin-typescript": "~4.5.7",
"#vue/cli-plugin-vuex": "~4.5.7",
"#vue/cli-service": "~4.5.7",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/eslint-config-typescript": "^7.0.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^6.2.2",
"prettier": "^2.2.1",
"sass": "~1.32.0",
"sass-loader": "^10.0.0",
"typescript": "~4.1.5",
"vue-cli-plugin-vuetify": "~2.4.7",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.7.0"
}
}
I have spent far too many hours researching and trying to host a dumb/simple app to show my grandma. Please help me.
I have followed over a dozen guides on stackoverflow and other sites (yes, even that medium article everyone points to). I am expecting to see my app running as if I was running my project locally on my machine.
You do not seem to have the files you build via vue in a folder that is served by GitHub Pages. Go to the repository settings in GitHub and choose "Pages". There you can switch the branch and the folder in the branch that should be served. Currently only "/" (root) or "/docs" are allowed. See the GitHub Pages Docs on this
For your use case, changing this to "/docs" and renaming your "dist" folder to "docs" after building your page / changing the output folder in your compiler should do the trick.
Take note that it will take a few minutes for the new index.html to be served instead of the current Readme after changing this.
My Vue2 Tailwind CSS project is running well in dev. But for production I still have an issue :
cross-env NODE_ENV=production && npx tailwindcss -i ./src/assets/styles/index.css -o ./dist/tailwind.css --minify && vue-cli-service build
(node:19240) UnhandledPromiseRejectionWarning: Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
I tryed to use PostCSS8 and also the Compat 7 Version that are mentionned in many stackoverflow posts, but this absolutely does nothing.
Any way to make it works under Vue 2 ?
Here is my package.json :
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build:local": "SET NODE_ENV=production && npx tailwindcss -i ./src/assets/styles/index.css -o ./dist/tailwind.css --minify && vue-cli-service build",
"build": "cross-env NODE_ENV=production && npx tailwindcss -i ./src/assets/styles/index.css -o ./dist/tailwind.css --minify && vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.21.1",
"bootstrap": "^5.0.1",
"bootstrap-vue": "^2.21.2",
"core-js": "^3.6.5",
"register-service-worker": "^1.7.1",
"tldts": "^5.7.38",
"vue": "^2.6.14",
"vue-cookies": "^1.7.4",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"#tailwindcss/postcss7-compat": "^2.2.7",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-pwa": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"autoprefixer": "^9.8.6",
"babel-eslint": "^10.1.0",
"cross-env": "^7.0.3",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"postcss": "^7.0.36",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.8",
"vue-template-compiler": "^2.6.11"
}
}
i'm having the same issue.
If you install tailwind compat version at 2.1.4 it will work, but i need some fixes and functionalities added later.
For you to try this fix, change on your package.json
- "#tailwindcss/postcss7-compat": "^2.2.7"
+ "#tailwindcss/postcss7-compat": "2.1.4",
If someone can get it to work above 2.1.4 please respond here.
I have an Vuejs App using promise but get this error :
This dependency was not found: core-js/fn/promise in ./src/store/index.js To install it, you can run: npm install --save core-js/fn/promise
my package.json:
"dependencies": {
"axios": "^0.21.1",
"bootstrap": "^4.5.3",
"core-js": "^3.6.5",
"jquery": "^3.5.1",
"popper.js": "^1.16.1",
"vue": "^2.6.11",
"vue-axios": "^3.2.2",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
I run the command npm install --save core-js/fn/promise ,but nothing change
I have the same err today, reason is import { reject } from "core-js/fn/promise",
I delete it then app compiled successfully.
Try update your core-js dependency version by:
npm install core-js
// or
yarn add core-js
The error is a result of yourProject/node_modules/core-js is not sync with your code.
You're importing core-js/fn/promise, but the build tool not found it.
I had a similar problem with core-js when I tried to start a Vue app, this was the error:
core-js/modules/es6.array.find in ./src/state/helpers.js,
* core-js/modules/es6.function.name in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/_base-link.vue?vue&type=script&lang=js&, ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/_base-icon.vue?vue&type=script&lang=js& and 4 others
...
..
..
my fix was to update dependencies and my package.json after the update is the next:
{
...
"dependencies": {
"core-js": "^2.6.12",
"vue": "2.5.16"
},
"devDependencies": {
"#babel/core": "^7.14.6",
}
}
Do the following steps:
npm install name dependency,
npm install
It's perfectly running for me.
Some updates to a dependency of one of our dependencies broke our build and was a bit tricky to find out what the cause of the issue was...
We finally noticed that #vue/component-compiler-utils requires "prettier": "^1.11.1" and - as discussed in vue webpack template missing parser that Prettier#1.13.0 causes the issue we were having, before rolling back to Prettier#1.12.0
How do we ensure that package-lock.json "locks" dependencies to a version and do not update over time or when re-installed?
This is an example of our package.json from which the incorrect lock file is generated:
{
...
"dependencies": {
"html-loader": "0.5.1",
"vue": "2.5.16",
"vue-class-component": "6.2.0",
"vue-property-decorator": "6.1.0",
"vue-router": "3.0.1",
"vuex": "3.0.1",
"vuex-class": "0.3.0",
...
},
"devDependencies": {
"#types/jest": "22.0.1",
"#vue/cli-plugin-babel": "3.0.0-beta.11",
"#vue/cli-plugin-eslint": "3.0.0-beta.11",
"#vue/cli-plugin-typescript": "3.0.0-beta.11",
"#vue/cli-plugin-unit-jest": "3.0.0-beta.7",
"#vue/cli-service": "3.0.0-beta.11",
"#vue/eslint-config-airbnb": "3.0.0-beta.11",
"#vue/eslint-config-typescript": "3.0.0-beta.11",
...
}
}
Using npm shrinkwrap fixes the issue, it converts package-lock.json to a npm-shrinkwrap.json which hashes and locks every specific version installed.
See What is the difference between npm-shrinkwrap.json and package-lock.json? for more details
I'm not entirely sure if npm shrinkwrap fixes the issue in npm v6+.
Here is a snippet of the npm-shrinkwrap.json file that is being generated for vue-loader.
It seems as though even the shrinkwrap is not locking down the requires versions.
"vue-loader": {
"version": "14.0.3",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-14.0.3.tgz",
"integrity": "sha512-5kFK/df1jgVoFcTB9p19rrYcyuYduoZzUSf6chMVsIRmVL9AKPYCa9JGLAZsU1XXGbGO9MSkwbum91u2dx7YcQ==",
"dev": true,
"requires": {
"consolidate": "^0.14.0",
"hash-sum": "^1.0.2",
"loader-utils": "^1.1.0",
"lru-cache": "^4.1.1",
"postcss": "^6.0.8",
"postcss-load-config": "^1.1.0",
"postcss-selector-parser": "^2.0.0",
"prettier": "^1.7.0",
"resolve": "^1.4.0",
"source-map": "^0.6.1",
"vue-hot-reload-api": "^2.2.0",
"vue-style-loader": "^4.0.1",
"vue-template-es2015-compiler": "^1.6.0"
}