Vue-Cli的安装

最新推荐文章于 2023-07-12 17:07:46 发布

原创最新推荐文章于 2023-07-12 17:07:46 发布 · 530 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #css #html5 #node.js

本文详细介绍了如何使用vue-cli进行项目的初始化和依赖安装，包括npm和cnpm的使用，以及如何通过webpack模板创建项目并运行开发服务器。此外，还提到了在开发过程中可能遇到的常见错误。

一、安装vue-cli
安装vue-cli的前提是你已经安装了npm，可以在命令行工具里输入npm -v 检测你是否安装了npm和版本情况。

npm/cnpm install vue-cli -g

cnpm是淘宝镜像，安装会快一些。
二、初始化项目

vue init <template-name> <project-name>

例子

vue init webpack vuex

初始化好了之后。

cd vuecliTest 进入我们的vue项目目录。
npm/cnpm install 安装我们的项目依赖包，也就是安装package.json里的包，如果你网速不好，你也可以使用cnpm来安装。
此处可以npm/cnpm install vuex ---save 来完成vuex的安装
npm run dev 开发模式下运行我们的程序。给我们自动构建了开发用的服务器环境和在浏览器中打开，并实时监视我们的代码更改，即时呈现给我们。

安装完成！
本来是准备写一些安装过程遇到的问题的解决方案的，然后安装没遇到问题，这次也就算了。下次遇到问题再来写吧！

四、常见错误

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
‘webpack-dev-server’ 不是内部或外部命令，也不是可运行的程序
或批处理文件。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

YYYYYG_

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

安装vue-cli

测试开发架构师

03-28

298

安装vue-cli 一、vue-cli是什么 vue-cli是vue官方提供的脚手架工具，默认搭建好一个项目的基础架子，我们在其基础上进行相应的修改即可下载模板地址：https//github.com/vuejs/vue-cli 或者全局安装vue-cli：npm install -g @vue/cli（建议全局安装，安装好后，在任何一个文件夹下面初始化项目都可以使用这个脚手架）查看脚本是否安装成功 ...

vue-cli安装

llkk

08-20

2192

1、安装node node下载地址：http://nodejs.cn/download/ node安装完成后会自带npm，vue-cli通过npm安装安装完成后输入 node -v 查看node版本查看npm版本，输入npm-v 2、安装vue-cli 全局安装vue npm install vue-cli -g 安装完成输入vue -V查看版本（这里V大写）...

1 条评论您还未登录，请先登录后发表或查看评论

vue-cli（vue脚手架）安装详细教程

m0_54853503的博客

02-23

7268

vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。一.安装vue-cli 1、使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入：npm install webpack -g或者（npm install -g webpack），安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。注意：webpack 4.

安装Vue CLI

qq_62837251的博客

05-15

660

要安装 Vue CLI，你需要先安装 Node.js 环境。

vue-cli-plugin-multiple-page:基于vue-cli https的buildwatch多页面条目插件

05-30

vue-cli-plugin-multiple-page 一个基于 vue-cli 捆绑多个页面的插件。与vue-cli's pages配置不同，它是通过将多个页面分片到不同的 webpack 配置来处理的用法在你的 vue-cli 创建的项目中安装插件，如果没有请...

vue-cli安装使用流程步骤详解

01-19

1.全局安装vue-cli cnpm i vue-cli -g 2.监测安装版本 vue -V 大写V : version 3.指定目录下新建项目 vue init webpack [项目名] 按自己的意愿配置、选择对应信息。最后配置完成检查package.json是否如此 4.进入...

Vue-cli安装

01-20

npm i vue-cli -g //默认安装的是vue2.9 mac:sudo npm i vue-cli -g 注意：如果你npm安装报错了，建议使用下面两句命令： npm config set strict-ssl false //关闭npm的https npm config set registry ...

vue-cli-plugin-i18n:Vue CLI插件可将vue-i18n添加到您的Vue项目

05-11

:globe_with_meridians: vue-cli-plugin-i18n Vue CLI插件可将vue-i18n添加到您的Vue项目 :handshake: 支持新项目 Intlify Project是一个开源项目，其中包括Vue I18n和i18n工具和自由软件，其持续的开发完全依靠...

vue-cli-plugin-vite：与vue-cli一起使用Vite Today

03-04

无需任何代码库修改即可直接使用的vue-cli项目。目录用法 vue add vite 插件的生成器将为相应的main。{js，ts}编写一些main.html ，因为vite需要html文件作为dev-server条目文件动机我们有很多现有的vue-cli...

Vue-vue-cli的安装

莫莫

06-19

890

Vue脚手架---vue-cli的安装安装vue-cli1. 安装node.js2. 全局安装nrm（用来切换下载源）3. 全局安装脚手架（vue-cli)4. 创建项目进入创建好的项目文件夹运行项目---不要关闭命令窗口浏览器运行---命令窗口会给出运行地址安装vue-cli 1. 安装node.js 下载Node.js Node.js地址键盘win+R键打开运行，输入cmd 输入：node -V 查看版本，如果安装成功则可以查看 2. 全局安装nrm（用来切换下载源） npm i

安装Vue-CLI

flyingdream123的专栏

02-28

199

以管理身份运行cmd命令窗口 $ npm install -g vue-cli 验证安装：$vue -V

[Vue-CLI] 一、vue-cli安装

艾二古的博客

05-22

178

一、安装Node 1、安装NodeJS 网址：下载 | Node.js 中文网 2、检测版本 node -v npm -v 3、什么是npm？ npm --- Node Package Manager，是一个NodeJS包管理和分发工具。二、安装Vue-CLI 1、安装命令 npm install @vue/cli -g 如果想用CLI 2版本，使用下面命令拉取2.x模板： npm install @vue/cli-init -g 2、初始化项目 Vue CLI2初始化

vue.cli安装

谢谢你的关注

07-21

1184

vue.cli安装（原因：没有将vue-cli添加到环境变量 1.找到全局安装包路径：vue.cmd所在目录 2.添加为环境变量 3.重启终端或重启电脑）

Vue-Cli安装和配置（全）

qq_44709970的博客

02-21

4543

安装、配置、淘宝镜像、可能出现的问题

VUE脚手架（vue-cli）安装

Hemameba的博客

07-12

2381

本篇文章主要用于介绍如何在计算机上安装VUE脚手架。

vue-cli中安装方法

adai19850204的博客

11-07

3013

源：http://www.cnblogs.com/jn1223/p/6656956.html vue-cli中安装方法 vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node 1、安装node，vue运行需要基于npm一定的版本，所以首先升级npm到最新的版本，而在安装的过程中个人比较喜欢淘...

vue-cli 安装

最新发布

03-25

<think>嗯，用户现在问的是关于vue-cli安装的问题。之前他们遇到了安装@vue/cli-service@3.5.3时webpack-dev-server@3.11.3的错误，现在可能已经解决了那个问题，或者现在想更全面地了解如何正确安装vue-cli。首先，我需要确定用户的需求是什么。他们可能刚接触Vue.js，想要搭建项目环境，或者之前遇到了问题，现在想重新安装。不管怎样，我需要提供一个清晰的安装指南，涵盖不同版本的Vue CLI，因为Vue CLI有2.x、3.x和4+版本，安装方式可能不同。然后，要确保覆盖各种安装方法，包括全局安装、本地安装，以及使用不同包管理器如npm和yarn。用户可能对Node.js环境不熟悉，所以需要提醒他们检查Node.js和npm的版本是否满足要求，尤其是Vue CLI 4+需要Node.js 8.9以上，推荐10+，而Vue CLI 3需要类似的版本。接下来，需要分步骤说明安装过程，包括安装命令、创建项目的步骤，以及常见问题的解决方法。比如权限问题、网络问题，或者依赖冲突。之前用户遇到的webpack-dev-server错误可能是由于版本不兼容，所以在介绍安装时，要提到版本兼容性和如何指定版本。另外，用户可能对Vue CLI的不同版本感到困惑，需要解释Vue CLI 2和Vue CLI 3/4+的区别，以及如何迁移项目。如果用户之前使用的是旧版本，可能需要卸载旧版后再安装新版，这部分也要包含在回答中。还要考虑用户的环境，比如他们是否在国内，可能需要换npm镜像源来加速安装，所以需要给出相应的命令。同时，权限问题在Mac/Linux和Windows上的解决方法不同，需要分别说明。最后，确保回答结构清晰，步骤详细，并提醒用户验证安装是否成功，比如通过vue --version命令检查版本，以及创建新项目时的注意事项，如选择预设配置或手动配置。常见错误的解决方案也需要列出，帮助用户自行排查问题。总结来说，回答需要涵盖安装前的环境准备、不同安装方式、创建项目步骤、常见问题处理以及新旧版本的区别和迁移建议，确保用户能够顺利安装并使用vue-cli开始项目。</think>以下是 **Vue CLI 安装指南**，涵盖常见方法、版本差异及问题解决方案： --- ### **一、Vue CLI 简介** - **作用**：快速搭建 Vue.js 项目脚手架，集成 Webpack、Babel 等工具链。 - **版本区别**： - **Vue CLI 2.x**：旧版，通过 `vue init` 创建项目（逐步淘汰）。 - **Vue CLI 3.x/4.x+**：新版，通过 `vue create` 创建项目（推荐使用）。 --- ### **二、安装前准备** 1. **检查 Node.js 和 npm 版本** - 要求：Node.js ≥ 8.9（推荐 ≥ 12.x），npm ≥ 5.6 或 Yarn。 - 查看版本： ```bash node -v npm -v ``` 2. **卸载旧版 Vue CLI** 若已安装旧版（如 `vue-cli`），需先卸载： ```bash npm uninstall vue-cli -g # 卸载 Vue CLI 2.x npm uninstall @vue/cli -g # 卸载 Vue CLI 3.x+ ``` --- ### **三、安装 Vue CLI** #### **1. 全局安装（推荐）** - **安装最新版**： ```bash npm install -g @vue/cli # 或使用 Yarn yarn global add @vue/cli ``` - **验证安装**： ```bash vue --version ``` #### **2. 指定版本安装** 若需兼容旧项目，可安装特定版本： ```bash npm install -g @vue/cli@3.12.1 # Vue CLI 3.x npm install -g @vue/cli@4.5.15 # Vue CLI 4.x ``` --- ### **四、创建 Vue 项目** #### **1. 使用 Vue CLI 3+/4+** ```bash vue create my-project # 按提示选择配置（Babel、Router 等） cd my-project npm run serve # 启动开发服务器 ``` #### **2. 使用 Vue CLI 2.x（旧版）** 需额外安装 `@vue/cli-init`： ```bash npm install -g @vue/cli-init vue init webpack my-project # 旧版模板 ``` --- ### **五、常见问题解决** #### **1. 安装失败：权限不足** - **Mac/Linux**： ```bash sudo npm install -g @vue/cli # 或修复权限 sudo chown -R $(whoami) ~/.npm ``` - **Windows**：以管理员身份运行命令行。 #### **2. 网络超时或镜像问题** 切换淘宝镜像源： ```bash npm config set registry https://registry.npmmirror.com # 或临时指定镜像 npm install -g @vue/cli --registry=https://registry.npmmirror.com ``` #### **3. 版本冲突** - **错误示例**：`Error: Cannot find module 'webpack-dev-server'` - 原因：Vue CLI 依赖的 `webpack-dev-server` 版本与本地环境冲突。 - 解决： ```bash # 删除 node_modules 和 lock 文件后重装 rm -rf node_modules package-lock.json npm install ``` --- ### **六、升级 Vue CLI** 1. 全局更新到最新版： ```bash npm update -g @vue/cli ``` 2. 检查版本： ```bash vue --version ``` --- ### **七、新旧版本差异** | 特性 | Vue CLI 2.x | Vue CLI 3+/4+ | |---------------------|-------------------------------|---------------------------------| | 项目初始化命令 | `vue init webpack` | `vue create` | | 配置文件位置 | 显式 `webpack.config.js` | 隐藏于 `node_modules`，通过 `vue.config.js` 覆盖 | | 插件系统 | 无 | 支持插件扩展（如 `@vue/cli-plugin-router`） | --- ### **八、总结** - **推荐使用 Vue CLI 4+**：功能更完善，生态兼容性好。 - **优先全局安装**：简化命令行操作，适合频繁创建新项目。 - **遇到依赖问题**：清理缓存、锁定版本或切换包管理工具。若仍存在问题，请提供具体错误日志，以便进一步诊断！