cli安装的步骤及安装问题的解决

最新推荐文章于 2025-04-24 10:50:56 发布

原创最新推荐文章于 2025-04-24 10:50:56 发布 · 1.1k 阅读

CC 4.0 BY-SA版权

文章标签：

1 篇文章

订阅专栏

本文介绍了Vue CLI的基本概念、版本信息以及安装步骤，特别针对CLI3的安装问题给出了解决方案，包括使用npm、cnpm或yarn安装，以及遇到问题时回退到CLI2的处理方式。同时，文章提到了项目创建、文件目录结构，并简单讨论了不同版本webpack的配置总结。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,通俗的说，cli是vue提供的一个快速（自动化）构建项目的一个脚手架，类似于我们之前所学的 express-generator

目前最新 3.x
老版本是 2.x

npm/cnpm/yarn 都可以使用
$ yarn add @vue/cli global 这个是cli3的版本
- 如果我们还想使用cli2的脚手架，那么我们可以在安装一个包
  $ yarn add @vue/cli-init global
如果有的朋友安装3失败了，那么你可以使用cnpm继续安装 @vue/cli @vue/cli-init
$ cnpm i @vue/cli -g 这个是cli3的版本
- 如果我们还想使用cli2的脚手架，那么我们可以在安装一个包
  $ cnpm i @vue/cli-init -g
如果还有问题：
- 那么你就不要使用cli3了，你可以单独安装cli2
  $ cnpm i vue-cli -g
最后还不行的话，我也无能为力了。

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

package.json 整个项目的依赖配置文件，脚本命令运行的存储文件
build 整个项目的配置性文件，比如webpack配置
- 里面的build.js是对文件进行打包处理，执行此文件，就会生成dist目录
config 对整个项目的静态服务器配置
- config->index.js-> 里面有个dev就是对静态服务器的配置（端口号，协议什么的都在里面）
dist 运行 npm build 打包出来的文件
- js 项目的js文件
- .map 文件错误资源定制文件
- html 整个项目的容器，也是根实例的模板
node_modules 整个项目的依赖包文件
src 源代码开发目录，也是开发者具体操作的目录
- assets 开发环境的静态资源， webpack编译
- components 组件存放目录
- xxx.vue 一个.vue文件就是一个组件，我们称之为：单文件组件（template js style）
- App.vue 根实例的直接子组件，其他组件往App.vue中放
- main.js 整个项目的入口文件
.babelrc 优雅降级
.editorconfig 编辑器配置文件
.gitignore 配置git上传时，不需要上传文件配置
postcssrc.js css预处理器的配置
- display: flex;
  - -webkit
  - -moz
  - -ms
README.md 项目说明文件
static 生产环境的静态资源 webpack不编译
public 生产环境的静态资源

cli3 的 webpack 配置放在了node_modules 的 @vue/cli-server 中
cli2 的配置
standard build目录中
simple webpack.config.js
问题：如果我们在cli3中要进行webpack配置，怎么办？
- 分析： cli3的基础webpack 配置我们不要动，将来node_modules会被删除
- 解决：新建一个vue.config.js文件进行webpack的覆盖配置