Vue CLI-CSDN博客

本文链接：https://blog.csdn.net/qq_63843408/article/details/141268048

Vue CLI

Vue 的使用有 3 种方式：1. 页面引入 vue.js ，2. CDN 引入，3. Vue CLI 创建 Vue 项目。

Vue CLI中的CLI是指Command Line Interface，即命令行界面。Vue CLI是一个用于快速搭建Vue.js 单页面应用的脚手架工具，通过命令行界面可以方便地创建、管理和构建 Vue.js 项目。

单页面应用（single page application）：简称 SPA，通俗点说就是只有一个页面的应用。单页面应用中所谓的“页面”跳转，仅仅只是刷新了该 HTML 页面的局部资源，公共资源仅在 HTML 页面初次加载时下载一次，之后的操作交互、数据交互是通过路由（Router）、Ajax 来进行的，页面本身没有被重载。

多页面应用（multiple page application）：简称 MPA，与单页面应用相反，该应用中有多个页面，且页面跳转的时候是整页进行刷新。

Vue CLI 优点

为创建好的单页面应用集成了 webpack 项目构建工具，并提供了合理的默认配置。使我们的项目可以通过配置文件进行配置，也可以通过插件进行扩展。
提供了丰富的官方插件，并集成了前端生态中最好的工具。
致力于将 Vue 生态中的基础工具标准化。
提供的默认配置能够确保各种构建工具之间的平稳衔接，并为每个工具提供了可以灵活调整配置的入口。这样开发者就可以专注在撰写应用上，而不必花费太多时间去纠结配置的问题。

Vue CLI 安装

安装 node.js：下载地址：Node.js — Run JavaScript Everywhere。下载的安装包，一路下一步安装即可。安装完毕，CMD上运行 node -v 查看node版本，出现版本号，则说明已安装成功。

说明：

Vue CLI 是在 Node.js 环境下运行的，所以我们需要确保环境中安装了 Node.js。

NVM: 不同的项目下，依赖的 Node.js 版本可能不同，为了方便安装和管理 Node.js，可以安装一个nvm（ Node Version Manager，node.js 版本管理器）
安装Vue CLI：在 CMD 上运行 npm install -g @vue/cli 命令安装即可（安装的是最新版）。安装完毕，运行 vue -V 命令可查看 Vue CLI 版本号。
说明：
1. npm（node package manager）包管理器，是集成在 node 中的，所以安装了 node 也就有了npm，输入 npm -v 命令，可查看npm 的版本信息。（npm向导：npm中文文档 | npm中文网）
2. 安装指定版本Vue CLI命令: npm install -g @vue/cli@版本号
3. 有的时候，由于有些 npm 资源被屏蔽或者是国外资源的原因，会导致 npm 安装依赖失败，这个时候可以安装一下 npm 的国内镜像 cnpm 解决安装依赖失败的问题：
命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org ，然后等待，没报错表示安装成功。安装成功，即可用 cnpm 代替 npm 安装依赖了。

使用 Vue CLI 创建项目

CMD上运行 vue create 项目名 ，即可创建项目。（项目想放在哪个目录下，就在哪个目录下打开 cmd ）创建的过程中，如涉及到选择 Vue 版本，选择 Vue 3即可（此处默认选 Vue 3）。

当看到Successfully... 提示时，表明我们使用 Vue CLI脚手架创建的项目已经成功。（此处创建的项目名为：vue-cli-demo）

说明：

vue cli2 创建项目：vue init webpack 项目名

创建好的项目目录结构如下：

vue-cli-demo        # 项目名
├── node_modules        # 整个项目所需的依赖包都安装在这个文件夹下
├── public              # 存放项目静态资源（这些资源不需要 webpack 打包处理）
    ├── favicon.ico         # 项目的 ico 文件
    ├── index.html          # html 模版文件，整个项目的承载页
├── src                 # 放置项目源码
    ├── assets              # 放置项目中的静态资源（可以使用 webpack 打包处理）
    ├── components          # 放置封装好的单文件组件
    ├── App.vue             # 整个 Vue 应用实例的总组件（所有组件均包含其中）
    ├── main.js             # js 入口文件
├── .gitignore          # 该文件用于设置 git 上传项目时需要忽略的文件或文件夹
├── babel.config.js     # Babel 的配置文件，作用于整个项目
├── package-lock.json   # 记录了 node_modules 目录下所有模块的具体来源和版本号以及其他的信息
├── package.json        # 记录当前项目所依赖模块的版本信息
├── README.md           # 项目说明文档
├── vue.config.js       # 可选文件。进行一些额外的 vue 项目配置。

启动项目

CMD进如项目根目录，运行 npm run serve 命令即可启动项目。

说明：

vue cli2 启动项目：npm run dev

vue cli3 及以上版本启动项目： npm run serve。

查看 Vue 项目版本

方式 1：CMD 进入到 Vue 项目所在的文件夹，然后运行npm list vue，将显示当前安装的Vue包及对应的版本号。
方式 2：打开项目下的 package.json 文件，里面记录了该项目依赖的包信息。查找dependencies字段下的Vue键值对，其对应的值就是Vue的版本号。

关于package.json中的版本号说明：

^version 表示版本号中最左边的非0数字的右侧可以任意。

比如Vue版本为 "^3.2.13"，表示的意思是项目依赖的 Vue 版本属于 [3.2.13, 4.0.0) 皆可。可以是3.2.13，3.3.0，但不能是4.0.0