Vue之cli安装

最新推荐文章于 2025-12-07 02:54:00 发布
原创 最新推荐文章于 2025-12-07 02:54:00 发布 · 448 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍Vue CLI的使用方法，包括CLI2和CLI3的不同版本特性，安装配置流程，以及通过命令行和图形界面创建项目的步骤。同时，对比了不同版本的目录结构差异。

四、cli （ 王者 ）

  1. 什么是cli?

    cli是vue提供的一个用来快速构建项目环境的一个工具，底层使用的是webpack

  2. cli目前有哪些版本？

    cli2 cli3

    cli3对电脑的配置有一定要求

  3. cli如何使用？

    1. cli的安装
      npm/cnpm/yarn 都可以使用

      1. $ yarn add @vue/cli global 这个是cli3的版本
        如果我们还想使用cli2的脚手架，那么我们可以在安装一个包
      2. $ yarn add @vue/cli-init global

      如果有的同学安装3失败了，
      那么你可以使用cnpm继续安装 @vue/cli @vue/cli-init
      1. $ cnpm i @vue/cli -g 这个是cli3的版本
      如果我们还想使用cli2的脚手架，那么我们可以在安装一个包
      1. $ cnpm i @vue/cli-init -g

      如果还有问题：
      那么你就不要使用cli3了，你可以单独安装cli2

       `$ cnpm i vue-cli -g`

    2. 验证是否安装成功
      命令行输入： $ vue 看是否有东西输出，如果输出命令提示，证明安装成功

    3. 创建项目

      cli3版本创建

      1. 命令创建 【 推荐 】
        $ vue create project
        • 手动选择配置
        • 如果安装node-sass出问题，如何解决：
          • 先切换成npm源 nrm use npm
          • 使用cnpm 安装 cnpm i node-sass sass-loader -D
      2. 图形界面创建
        $ vue ui
        cli2
      3. 标准版
        $ vue init webpack project
      4. 简易版
        $ vue init webpack-simple project

    4. please pick a preset( user arrow keys ) 使用键盘上下键来选择一个配置

      1. default 默认配置

      2. Manually select features 手动选择配置

        配置指的是配置webpack

        babel 优雅降级 es6 —> es5

        eslint js语法检测

        CSS Pre-processors css 预处理语言 less sass/scss stylus

        Linter / Formatter eslint / jslint

        Unit Testing 单元测试

        E2E Testing 端到端的测试

        In dedicated config files 将所选的每一个选项用一个文件来保存（ 配置 ）

      PWA (web app ) 在浏览器中使用的app

    Save this as a preset for future projects? 将上面所选的配置保存下来，以备将来的项目使用

    我们cli3 使用的包管理器器建议 是 yarn 大家一定要记得配置国内镜像源

4.分析几个版本的目录

cli3

目录

  • node_modules 项目的依赖包
    • cli3webpack配置放在node_modules中
  • public 静态资源目录（ 生产环境 ）【 这个目录下的静态资源不会被webpack 编译 】
    • img
    • js
    • css
    • favicon.ico 项目标题的logo
    • index.html 根实例组件的模板，也是整个项目的容器
  • src 源代码开发目录（ 也是开发者主要开发的目录文件夹 ）
    - assets 开发环境的静态资源目录 （ 这个目录中的资源会被webpack编译）
    - assets中如果图片的大小 > 4k 我们就原样拷贝到dist目录
    - assets中如果图片的小小 < 4K 我们就将这个图片转化成 base64
    - base64它是我们前端处理图片的一种形式，将图片路径进行编码，它可以减少一次ajax请求，达到前端性能优化的一个方案，但是base64有一个弊端，这个弊端就是会污染html结构
    - components 组件存储目录
    - xxx.vue文件 单文件组件 一个vue文件就是一个组件
    - 组成部分
    - template模板（ 必须写的 ）
    - script脚本 （ 可写可不写）
    - style样式 （ 可写可不写 ）
    - scoped 作用是可以减少命名冲突，规定一个样式的作用域
  • .gitignore git上传忽略文件配置
  • babel.config.js 优雅降级配置文件 用来将es6 --> es5
  • package.json 整个项目的依赖配置文件
  • README.md 整个项目启动的说明性文件
  • yarn.lock 真个项目的依赖性文件的信息
  • postcss.config.js 项目css预处理的配置
  • .browserslistrc 浏览器版本的支持

​

cli2 标准版

​ build webpack配置

​ config webpack配置

​ node_modules

​ src

​ static 静态资源配置

​ js

​ css

​ img

​ .babelrc 优雅降级配置文件

​ .postcssrc css预处理配置文件

​ .editorconfig 编辑器配置文件

使用vue-cli脚手架工具创建vue项目
阳光下的冷静的博客
11-27 1381
vue-cli 脚手架安装： 1) 确保node环境：安装vue-cli需要在node环境下安装，所以首先确保自己安装了node，检查自己电脑是否安装了node ,可以在命令行工具内执行： node -v，如下图，如果出现相应的版本号信息，说明安装了node  如果出现类似：xxx不是内部命令，说明电脑没有安装node ,需要在官网下载与你电脑对应的版本的node,进行安装。node的下载...
vue-cli安装
llkk
08-20 2193
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大写）...
linux下的wercker CLI安装包
09-10
1.把wercker文件放到/usr/local/bin目录； 2.赋予wercker文件可执行权限 chmod u+x /usr/local/bin/wercker 3.运行 wercker version wercker version --beta
安装cli
athena2009的博客
06-29 157
npm install -g @vue/cli
cli的安装
qq_35801979的博客
05-29 419
cli cli是什么？ cli是vue提供的一个快速（自动化） 构建项目的一个脚手架 ，类似于我们之前所学的 express-generator cli的版本 目前最新 3.x 老版本是 2.x cli的底层的自动化工具是： webpack cli的安装 npm/cnpm/yarn 都可以使用 $ yarn add @vue/cli global 这个是cli3的版本...
精选资源
vue-cli中安装方法(图文详细步骤)
01-21
vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node 1、安装node，vue运行需要基于npm一定的版本，所以首先升级npm到最新的版本，而在安装的过程中个人比较喜欢淘宝的镜像，所以先安装cnpm（因为...
精选资源
详解使用nodeJs安装Vue-cli
01-02
1、执行npm install –global vue-cli ，全局安装vue-cli —-因为默认是从国外服务器下，可以使用阿里巴巴在国内的镜像服务器。 产生通过config命令设置默认下载路径： npm config set registry ...
vue-cli系列之vue-cli-service整体架构浅析
12-07
vue启动一个项目的时候，需要执行npm run serve，其中这个serve的内容就是vue-cli-service serve。可见，项目的启动关键是这个vue-cli-service与它的参数serve。接下来我们一起看看service中主要写了什么东东（主要...
精选资源
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项目中安装node-sass
12-01
2，通常使用npm安装会出现以下报错，安装失败。（网路问题） 3，可以通过淘宝的npm镜像安装node-sass，解决以上问题。 npm install -g cnpm --registry=https://registry.npm.taobao.org （安装淘宝镜像） cnpm ...
cli的安装及介绍
GFLY博客
06-27 4994
cli 简介 cli是vue提供的一个用来快速构建项目环境的一个工具，底层使用的是webpack 版本 cli2 cli3 cli3对电脑的配置有一定要求 一、cli的安装 npm/cnpm/yarn 都可以使用 yarn 1. $ yarn add @vue/cli global 这个是cli3的版本 如果我们还想使用cli2的脚手架，那么我们可以在安装一个包 2. $ yarn add...
Vue脚手架（cli）安装教程
lbf198303的博客
06-18 4697
2.下载完成解压，点击安装，然后就是大家最喜欢的一键无脑点击next了，但是建议大家选择路径的时候。3.检查安装是否成功 输入 vue -V (V为大写) 或者 vue --version。-v14.17.3-x64.msi）放在桌面上或一个确定的文件夹（此处以桌面为例）；"自己路径下node_global文件夹的路径"node_globa(npm全局模块的存放路径)2.在命令行窗口运行以下两条命令（自己路径下的）"自己路径下node_cache文件夹的路径"node_cache(cache的路径)
vue cli安装
qq_41925937的博客
08-28 433
        vue-cli（vue脚手架）超详细教程 2018年05月28日 21:04:04 阅读数：25801        都说Vue2简单上手容易，的确，看了官方文档确实觉得上手很快，除了 ES6语法和webpack的配置让你感到陌生，重要的是思路的变换，以前用jq随便拿全局变量和修改dom的锤子不能用了，vue只用关心数据本身，不用再频繁繁琐的操作dom，注册事件、监听事...
Vue-CLI最新详细安装教程【附安装包】
ZHOUPUYU的博客
11-28 1万+
vue-cli2025最新保姆级教程，Vue CLI（Vue.js Command Line Interface）是一个基于Vue.js框架的项目脚手架工具，用于快速生成Vue工程化项目的工具。‌ 它由Vue.js官方提供，旨在通过简单的命令行操作，帮助开发者快速搭建项目结构，包含项目所需的配置和依赖。变量【C:\Program Files\nodejs\】如果存在，就新建剩下的两个变量即可。显示（v22.11.0）版本号则表示node.js安装成功。这里我以输入vue create demo为例。
CLI 项目安装与使用指南
最新发布
gitblog_00165的博客
12-07 402
此文档旨在引导用户深入了解位于 [https://github.com/daniele77/cli.git](https://github.com/daniele77/cli.git) 的开源命令行工具项目。我们将逐步解析该项目的结构、启动机制及配置细节，以帮助开发者和使用者高效地集成和运用这一工具。 ## 1. 项目目录结构及介绍 本节将概览项目的主要目录布局，揭示其内部组织结构。 ```
[VUE] Vue-CLI的安装、使用及环境配置（超详细）
热门推荐
leo的博客
11-20 4万+
Vue-CLI的安装、使用及环境配置的详细步骤（超详细）
认真写了个快速创建 Node 服务的CLI，看看对小伙伴们有帮忙吗？
程序员成长指北
08-20 207
点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群源码地址：https://github.com/koala-coding/create-bff-service-cli已经...
利用vue-cli脚手架快速创建vue项目
cc1511599982的博客
04-21 331
一、使用vue-cli创建模板项目 1、什么是vue-cli 　　是vue官方提供的脚手架工具。脚手架工具简单讲就是自动将项目需要的环境、依赖等信息都配置好。 2、全局安装vue-cli （1）检查npm 版本，建议安装到最新版本。 复制代码 【命令行查看版本号】 node -v npm -v 【升级npm（可选操作）】 npm install -g npm 【修改为淘宝镜像（可选操作）】 npm...
Vue 之使用vue-cli 脚手架快速生成vue项目
Lhy_JL的博客
06-02 286
1、安装 vue-cli 步骤 vue-cli 是 vue 的脚手架工具，帮助我们快速生成了 vue 的起步项目，它内置了一些必备的比如打包工具，配置文件等等。 安装 vue-cli npm install -g @vue/cli 检查 vue-cli 是否安装成功 vue --version 如果输出的是版本号，表示安装成功 2、创建 vue 项目步骤 vue create projectname 它会让你选择 vue 2 还是 vue 3，根据喜好选择，我选了vue
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+**：功能更完善，生态兼容性好。 - **优先全局安装**：简化命令行操作，适合频繁创建新项目。 - **遇到依赖问题**：清理缓存、锁定版本或切换包管理工具。 若仍存在问题，请提供具体错误日志，以便进一步诊断！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值