I am trying to install vue-cli in windows 7 machine. But it fails to create the application with webpack template option. Please help me to sort out the issue.
F:\vue>vue init webpack my-app
? Project name myapp
? Project description test vue app
? Author test
? Vue build (Use arrow keys)
> Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-
specific HTML) are ONLY allowed in .vue files - render functions are
required elsewhere
Find the below node, npm, vue details
npm -v : 3.10.10
node -v : v6.11.0
vue -V : 2.8.2
Related
I have successfully created a Nuxt.js project with this configuration using the CLI:
Project name: test
Programming language: JavaScript
Package manager: Npm
UI framework: None
Nuxt.js modules: None
Linting tools: None
Testing framework: None
Rendering mode: Single Page App
Deployment target: Static (Static/JAMStack hosting)
Development tools: jsconfig.json
Version control system: Git
The developement server runs properly with npm run dev.
npm run build also runs without errors and tells me that:
Ready to run nuxt generate
But the execution of nuxt generate leads to the error Command 'nuxt' not found. This is strange because nuxt seems to be installed when I execute npm nuxt list.
I first reinstalled just nuxt and then all dependencies after deleting the node_modules/ folder, but the error remains the same. If I just run npm run start it tells me
Nuxt Fatal Error
Error: Output directory `dist/` does not exists, please use
`nuxt generate` before `nuxt start` for static target.
This is strange again because the .nuxt/dist/ folder exists.
Does anyone have an idea what is going wrong?
I have solved the problem. For me it works if I run npm run generate instead of nuxt generate.
I have npm installed v6.9.0 ,node v10.16.0 & yarn v1.16.0 on my Ubuntu 18.04LTS.
I'm following this tutorial.tutorial link
While I'm initially setting up the Vue app in my directory vuetest and bootstrapping the app using vue-cli, i ran these commands:
yarn global add vue-cli
vue init webpack <webpack_name>
Vue init hanged at project description and this was a issue in github where they posted a temporary solution.
temporary solution link
In the solution they said to run these commands:
1.cd "$(dirname $(which vue))/node_modules/#vue/cli-init"
2.npm i inquirer#~6.3.1
When i ran the first command i get error:
bash: cd: /home/nishanthr/.yarn/bin/node_modules/#vue/cli-init: No such file or directory
Output of which vue is:
/home/nishanthr/.yarn/bin/vue
Can someone tell me what's wrong and what's happening here ?
You should use the new version yarn global add #vue/cli
Vue Cli
When i use this command bellow :
vue create hello-world
I got this message :
'vue' is not recognized as an internal or external command,
operable program or batch file.
After 1 month I still haven't found the solution..
Some informations:
My OS : Windows 10
NPM version : 6.9.0
vue version : 2.6.10
Vue cli installed version : #vue/cli#3.8.2
==>
0 error message when i installed all these packages.
I correctly added npm path on environement variable.
If you set the path correctly then you need to restart the system once because sometimes environment variables need restart after setting the path.
And Do this (If above not works):
Run command as administrator privileged.
npm install --global vue-cli
Set this path to environment variables:
C:\Users\YourUserName\AppData\Roaming\npm
This one too:
In last, restart the cmd, system and run the vue again. It should work just fine.
I tried to create a new Vue app with Vuetify by using the command from Vuetify homepage.
Following is the command I used:
npm install #vue/cli -g
vue create my-app // all options are default settings when creating
cd my-app
vue add vuetify // all options are default settings when running
All commands above mentioned completed perfectly. However, after I launch the hot-reload developing environment by the following command.
npm run serve
An error would occur as the following standard output.
> my-app#0.1.0 serve /home/seanwu/my-app
> vue-cli-service serve
INFO Starting development server...
94% after seal
ERROR Failed to compile with 1 errors 3:05:24 PM
error in ./src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
BrowserslistError: [BABEL] /home/seanwu/my-app/src/main.js: /home/seanwu/my-app contains both .browserslistrc and package.json with browsers (While processing: "/home/seanwu/my-app/node_modules/#vue/babel-preset-app/index.js$0")
at /home/seanwu/my-app/node_modules/browserslist/node.js:239:15
at eachParent (/home/seanwu/my-app/node_modules/browserslist/node.js:46:18)
at Object.findConfig (/home/seanwu/my-app/node_modules/browserslist/node.js:219:20)
at Function.loadConfig (/home/seanwu/my-app/node_modules/browserslist/node.js:150:37)
at browserslist (/home/seanwu/my-app/node_modules/browserslist/index.js:187:31)
at getTargets (/home/seanwu/my-app/node_modules/#babel/preset-env/lib/targets-parser.js:133:50)
at _default (/home/seanwu/my-app/node_modules/#babel/preset-env/lib/index.js:184:46)
at /home/seanwu/my-app/node_modules/#babel/helper-plugin-utils/lib/index.js:19:12
at loadDescriptor (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:163:14)
at cachedFunction (/home/seanwu/my-app/node_modules/#babel/core/lib/config/caching.js:42:19)
at loadPresetDescriptor (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:233:63)
at config.presets.map.descriptor (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:68:19)
at Array.map (<anonymous>)
at recurseDescriptors (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:66:38)
at recurseDescriptors (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:92:27)
at loadFullConfig (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:106:6)
# multi (webpack)-dev-server/client?http://192.168.1.76:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
I have no idea why this would happen as being new to front-end development and following every instruction from the Quick Start web page. Maybe there are some stupid mistakes I made to cause this error.
What Node/npm version are you using? I'd assume the official tutorial works/worked at some point. I'd use nvm to install different Node.js versions. That also changes the npm version. Then try npm install and npm start again.
Or you could delete .browserslistrc in /home/seanwu/my-app, so you don't have two conflicting files.
Getting a bunch of babel errors when running npm run dev with the Vue cli.
This only happens in Cloud9.
Any thoughts on what could be the issue or how to disable errors like this before running npm run dev?
All babel related it looks like.
I couldn't re-create the babel error messages but it's possible that it could be caused if npm/node is not up-to-date. (Vue-cli wasn't starting dev server before the installation below)
Is your repository public where you're getting the error messages? Then I could have a look at the errors.
If removing node_modules folder is not helping,
here is how you can create a new IDE workspace for vue.js ($ for commands in bash terminal):
Create a blank Ubuntu workspace
Check that nvm is installed & up-to-date with (check version of install script here):
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash
$ nvm install node 6
$ npm i vue-cli -g
$ vue init webpack yourAppName
$ cd yourAppName
$ npm install
$ npm run dev
Click preview to test that Vue server is running as expected
Here is a link to a HelloWorld Vue app in cloud9 ide.
If you have an existing app you can also use git to clone it into your new workspace instead of creating a new app.