Vue-cli安装

最新推荐文章于 2023-07-12 17:07:46 发布
最新推荐文章于 2023-07-12 17:07:46 发布
阅读量787 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： web前端 Vue 文章标签： npm vue webpack vue-cli web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yb970521/article/details/110131503
首先要安装node.js
cmd安装vue-cli
npm install vue-cli -g --registry=https://registry.npm.taobao.org

输出如下：

npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
C:\Users\lenovo\AppData\Roaming\npm\vue-list -> C:\Users\lenovo\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
C:\Users\lenovo\AppData\Roaming\npm\vue -> C:\Users\lenovo\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
C:\Users\lenovo\AppData\Roaming\npm\vue-init -> C:\Users\lenovo\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
+ vue-cli@2.9.6
added 236 packages from 204 contributors in 45.83s
测试是否安装成功
vue list
# 输出如下
Available official templates:

  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.
创建一个基于webpack模板的vue应用程序
# hello-vue-cli 是项目名称
vue init webpack hello-vue-cli
初始化并运行
cd hello-vue-cli
npm install --registry=https://registry.npm.taobao.org

# 运行
npm run dev
vue-cli（vue脚手架）安装 详细教程
m0_54853503的博客
02-23 7159
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.js构建一个项目
逍遥云恋
03-26 557
第12章 构建一个项目 12.0 命令行工具 (CLI) https://cn.vuejs.org/v2/guide/installation.html#%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7-CLI Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included ...
vue.cli安装
谢谢你的关注
07-21 1158
vue.cli安装 （原因：没有将vue-cli添加到环境变量 1.找到全局安装包路径：vue.cmd所在目录 2.添加为环境变量 3.重启终端或重启电脑）
安装Vue CLI
qq_62837251的博客
05-15 624
要安装 Vue CLI，你需要先安装 Node.js 环境。
Vue-Cli安装和配置（全）
qq_44709970的博客
02-21 4405
安装、配置、淘宝镜像、可能出现的问题
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-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的安装、使用及环境配置（超详细）
热门推荐
leo的博客
11-20 4万+
Vue-CLI的安装、使用及环境配置的详细步骤（超详细）
VUE脚手架（vue-cli）安装
Hemameba的博客
07-12 1671
本篇文章主要用于介绍如何在计算机上安装VUE脚手架。
vue-cli脚手架安装
weixin_41689199的博客
02-07 471
一、安装Node node安装：http://nodejs.cn/download/ 查看自己的node版本：node -v npm管理器一般都是集成在node里面的，查看自己的npm信息：npm -v 二、全局安装vue-cli 关于npm：https://www.npmjs.cn/getting-started/what-is-npm/ 两种安装方式： 方式一：npm安装 执行：npm install -g vue-cli 方式二：淘宝镜像安装 如果是淘宝镜像安装的话，你需要先安装cnpm 安
Vue cli配置与安装
llj1028的博客
01-05 443
关于component属性，有2种配置方式，第1种是默认导入的，通常会在当前文件的顶部使用import语句导入并命名，然后，此component属性的值就是导入时取的名字，第2种是使用箭头函数import导入的，通常，在各项目中，只会有1个是默认导入的。在src/router/index.js中，使用了routes数组常量配置路由，主要是配置了各路径与视图组件的对应关系，所以，在数组中的各个元素值就是一个个的路由对象，每个路由对象至少要配置path和component这2个属性。
vue-cli安装及使用 笔记1
wuhaiwenpps的博客
03-05 439
1.安装node.js        要想使用vue-cli，得先安装node.js，node.js是一个可以让前端运行在node.js提供的服务器上的一个工具，换句话说，就是提供了一个服务器。        官网下载即可：https://nodejs.org/en/        （1）测试node
利用Vue cli脚手架安装Vue
weixin_51191714的博客
05-25 158
1.介绍 介绍-文档：https://cli.vuejs.org/zh/guide/ 通过 @vue/cli 实现的交互式的项目脚手架 通过 @vue/cli +@vue/cli-service-global实现的零配置原型开发 运行时依赖 (@)
vue-cli安装、下载及使用
空巷。的博客
04-08 3378
vue脚手架的使用 安装node.js node.js官方下载地址 下载vue-cli(cmd命令行下) npm install -g vue-cli 创建一个基于webpack模板的新项目(cmd命令行下) 记得切换目录，在当前目录下创建 vue init webpack ['项目名'] 选装： ? Project name vue-project -->项...
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 &#39;webpack-dev-server&#39;` - 原因：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+**：功能更完善，生态兼容性好。 - **优先全局安装**：简化命令行操作，适合频繁创建新项目。 - **遇到依赖问题**：清理缓存、锁定版本或切换包管理工具。 若仍存在问题，请提供具体错误日志，以便进一步诊断！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值