vue-cli 安装

最新推荐文章于 2025-10-13 09:50:34 发布

原创最新推荐文章于 2025-10-13 09:50:34 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

vue-cli

vue-cli 是 vue 提供的一个用于自动化构建和开发项目的工具，也称为：脚手架，它是一系列工具的集合，它主要有：

根据配置选项自动构建项目，并安装所需要的依赖
启动一个本地开发服务器，通过这个服务器可以基于服务器环境访问本地项目，同时提供了跨域代理服务
项目的自动编译、打包
项目测试（单元测试、e2e测试）

安装

前提：安装npm

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装成功以后，会提供一个 vue 的命令

查看版本

vue --version
# OR
vue -V

帮助

vue --help
# OR
vue -h

创建项目

vue-cli 提供了两种方式来创建项目

命令行 - cli
图形界面（基于浏览器） - ui

命令行方式创建项目

vue create 项目名称

基于浏览器图形界面方式创建项目

vue ui

进入当前目录

cd  目录名称

运行

项目创建成功以后，进入项目根目录，打开 package.json 文件，我们可以看到

{
  ...,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
	...
}

https://cli.vuejs.org/zh/guide/cli-service.html#%E4%BD%BF%E7%94%A8%E5%91%BD%E4%BB%A4

打包

打包的具体命令，我们在后期项目开发完成以后再说

项目目录结构文件说明

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y8fpzrwV-1588761039175)(./assets/vue-directory.png)]

src

先来说一个最重要的目录 src ，这个就是存放的就是我们项目源码的目录，我们开发过程中大部分的时间就在这个目录中

main.js

项目的入口文件

App.vue

首先，这是 vue 提供的一种单文件组件的文件模式（后续会讲），一个 .vue 文件就是一个独立的组件，这里的 App.vue 是应用的根组件

存放组件的目录

存放静态资源的目录，比如：图片，css 等。这里的文件与外层 public 目录存放的静态资源的最大区别是：assets 存放的资源是通过 import 等方式作为模块导入，最后打包处理的。而 public 中的资源并不通过模块方式导入，一般都是通过 script 、link 、img 等方式从浏览器引入的资源，比如无法通过模块化处理的 js 文件（这样的需求情况并不多）

public

一些并非通过模块方式引入的资源文件存放的位置，一般都是通过 script 、link 、img 等方式从浏览器引入的资源，比如无法通过模块化处理的 js 文件（这样的需求情况并不多）