Npm Vue Cli Install

Posted on  by admin

Warning regarding Previous Versions.

Upgrading #

The package name changed from vue-cli to @vue/cli.If you have the previous vue-cli (1.x or 2.x) package installed globally, you need to uninstall it first with npm uninstall vue-cli -g or yarn global remove vue-cli.

Usage

Node Version Requirement.

Vue CLI requires Node.js version 8.9 or above (8.11.0+ recommended). You can manage multiple versions of Node on the same machine with nvm or nvm-windows.

vue build

To install the new package, use one of the following commands. You need administrator privileges to execute these unless npm was installed on your system through a Node.js version manager (e.g.

Official Templates

After installation, you will have access to the vue binary in your command line. You can verify that it is properly installed by simply running vue, which should present you with a help message listing all available commands. You can check you have the right version (3.x) with this command:.

Modified2 years, 3 months ago. I am trying to install Vue-CLI. But i have lots of errors. npm WARN deprecated [email protected]: [email protected]<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of [email protected]

npm WARN checkPermissions Missing write access to /usr/lib/node_modules npm ERR!

  • code EACCES npm ERR! syscall access npm ERR! path /usr/lib/node_modules npm ERR! errno -13 npm ERR!

  • Error: EACCES: permission denied, access '/usr/lib/node_modules' npm ERR!

  • [Error: EACCES: permission denied, access '/usr/lib/node_modules'] { npm ERR! stack: "Error: EACCES: permission denied, access'/usr/lib/node_modules'", npm ERR!

  • errno: -13, npm ERR! code: 'EACCES', npm ERR! syscall: 'access', npm ERR!

  • path: '/usr/lib/node_modules' npm ERR! The operation was rejected by your operating system.

  • It is likely you do not have the permissions to access thisfile as the current user npm ERR!

Custom Templates

If you believe this might be a permissions issue, please double-check the npm ERR! permissions of the file and its containing directories, or try running npm ERR!

the command again as root/Administrator. I tried to reinstall nodejs & npm and I also tried to updtate code-js to 3 version, but that didn't work out.

try npm uninstall vue-cli. then npm install @vue/cli this is to install vue and upgrade to Vue 3 cli . 3232 bronze badges. Run npm install -g @vue/cli as a root user. sudo npm install -g @vue/cli.

Warning regarding Previous Versions. The package name changed from vue-cli to @vue/cli. If you have the previous vue-cli (1.x or 2.x) package installed globally, you need to uninstall it first with npm uninstall vue-cli -g or yarn global remove vue-cli.

Local Templates

Node Version Requirement. Vue CLI 4.x requires Node.js version 8.9 or above (v10+ recommended).

Writing Custom Templates from Scratch

  • You can manage multiple versions of Node on the same machine with n, nvm or nvm-windows.

  • To install the new package, use one of the following commands. You need administrator privileges to execute these unless npm was installed on your system through a Node.js version manager (e.g.

    • After installation, you will have access to the vue binary in your command line.

    • You can verify that it is properly installed by simply running vue, which should present you with a help message listing all available commands.

    • You can check you have the right version with this command:. To upgrade the global Vue CLI package, you need to run:.

    • Upgrade commands shown above apply to the global Vue CLI installation.

    • To upgrade one or more @vue/cli related packages (including packages starting with @vue/cli-plugin- or vue-cli-plugin-) inside your project, run vue upgrade inside the project directory:.

Project Dependencies #

The prompts field in the metadata file should be an object hash containing prompts for the user. For each entry, the key is the variable name and the value is an Inquirer.js question object. Example:

After all prompts are finished, all files inside template will be rendered using Handlebars, with the prompt results as the data.

Conditional Prompts

A prompt can be made conditional by adding a when field, which should be a JavaScript expression evaluated with data collected from previous prompts. For example:

The prompt for lintConfig will only be triggered when the user answered yes to the lint prompt.

Pre-registered Handlebars Helpers

Two commonly used Handlebars helpers, if_eq and unless_eq are pre-registered:

Custom Handlebars Helpers

You may want to register additional Handlebars helpers using the helpers property in the metadata file. The object key is the helper name:

Upon registration, they can be used as follows:

File filters

The filters field in the metadata file should be an object hash containing file filtering rules. For each entry, the key is a minimatch glob pattern and the value is a JavaScript expression evaluated in the context of prompt answers data. Example:

Files under test will only be generated if the user answered yes to the prompt for needTests.

Note that the dot option for minimatch is set to true so glob patterns would also match dotfiles by default.

Skip rendering

The skipInterpolation field in the metadata file should be a minimatch glob pattern. The files matched should skip rendering. Example:

Metalsmith

vue-cli uses metalsmith to generate the project.

You may customize the metalsmith builder created by vue-cli to register custom plugins.

If you need to hook metalsmith before questions are asked, you may use an object with before key.

Additional data available in meta.{js,json}

  • destDirName - destination directory name
  • inPlace - generating template into current directory

complete function

Arguments:

  • data: the same data you can access in completeMessage:

  • helpers: some helpers you can use to log results.

    • chalk: the chalk module
    • logger: the built-in vue-cli logger
    • files: An array of generated files

Installing a specific template version

vue-cli uses the tool download-git-repo to download the official templates used. The download-git-repo tool allows you to indicate a specific branch for a given repository by providing the desired branch name after a pound sign (#).

The format needed for a specific official template is:

Example:

Installing the 1.0 branch of the webpack-simple vue template:

Note: The surrounding quotes are necessary on zsh shells because of the special meaning of the # character.

License