Vue CLI

最新推荐文章于 2025-04-28 17:54:30 发布

原创最新推荐文章于 2025-04-28 17:54:30 发布 · 588 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

45 篇文章

订阅专栏

一、安装
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
使用下面命令安装包，并查看版本：

npm install -g @vue/cli

安装完成后查看版本
vue --V

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)
二、项目创建

1、使用命令创建

命令：vue create vueapp

这里注意自己切换到自己到目录下，新建项目，vue create 项目名
2、使用上下箭头选择默认设置还是手动选择功能

Vue CLI v3.0.3
? Please pick a preset:
  default (babel, eslint)
> Manually select features

3、按空格键选择你需要的功能，选完后按回车
空格键是选中与取消，A键是全选

babel：javascript转译器，将最新版的js语法（es6、es7）转换为现阶段浏览器可以兼容的js代码
typescript：使用 TypeScript 书写源码
PWA：渐进式WEB应用
Router：使用vue-router
Vuex：使用vuex
CSS Pre-processors：css预处理器
Linter / Formatter：代码规范标准
Unit Testing：单元测试
E2E Testing：e2e测试

Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

4、router是否使用history模式，history需要服务器支持详，情请看这儿https://router.vuejs.org/zh/guide/essentials/history-mode.html
这里我就选no

5、css预处理器的选择，我习惯用sass

6、代码格式化检测选择，我用的是vscode个人感觉搭配插件用着很舒服，所以我选Prettier

7、是否保存刚才的配置，下一次就不用重新配置了，我就直接回车

8、关于Babel, PostCSS, ESLint, etc.这些配置文件你是想放在package.json里面还是单独放在外面
编辑器一般默认会在项目根目录下寻找配置文件，这里我就直接回车选择In dedicated config files

8、是否保存为未来项目的预配置吗，我也是直接回车

最后配置如下

Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes

三、图形化界面

通过 vue ui 命令以图形化界面创建和管理项目

vue ui

访问 http://localhost:8000 你就可以创建，管理，导入项目

四、拉取 2.x 模板 (旧版本)

如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

五、vue-cli服务

在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。
你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令
Vue CLI 项目有三个模式： development 模式用于启动，production 模式用于打包和e2e测试，test 模式用于unit测试

启动

用法：vue-cli-service serve [options] [entry]

选项：
  --open    在服务器启动时打开浏览器

  --copy    在服务器启动时将 URL 复制到剪切版

  --mode    指定环境模式 (默认值：development)

  --host    指定 host (默认值：0.0.0.0)

  --port    指定 port (默认值：8080)

  --https   使用 https (默认值：false)

打包

用法：vue-cli-service build [options] [entry|pattern]
build:vue-cli-service build

  --modern 使用现代模式构建应用，为现代浏览器交付原生支持的 ES2015 代码，并生成一个兼容老浏览器的包用来自动回退。

  --target 允许你将项目中的任何组件以一个库或 Web Components 组件的方式进行构建。更多细节请查阅构建目标。

  --report 和 --report-json 会根据构建统计生成报告，它会帮助你分析包中包含的模块们的大小

测试

 test: vue-cli-service test:e2e  端到端测试
       vue-cli-service test:unit  单元测试

六、实用新功能

node_modules
public
src
.browserslistrc
.eslintrc.js
.gitignore
babel.config.js
package.json
postcss.config.js
README.md
以上是项目根目录，3.x对比2.x文件结构明显精简了不少，多了一个public文件夹用于存放静态文件少了config、build等一系列的配置文件，这些配置文件都被放在了node_modules@vue文件下
(1) node_modules
依赖包放在这个文件夹

(2) public 文件夹
任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。
(1)在 public/index.html 或其它通过 html-webpack-plugin 用作模板的 HTML 文件中，你需要通过 <%= BASE_URL %> 设置链接前缀：

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

(3)src文件夹
在这里面编写.vue文件,路由等
(4) browserslist

根目录中多了一个.browserslist文件，可以指定项目的目标浏览器的范围
用于转译的 JavaScript 特性和添加CSS 浏览器前缀，可以减少兼容代码提高代码质量
如果想少一个文件，你也可以在package.json中添加browserslist字段，参数是一个数组

这是默认设置，兼容所有最新版本，不支持ie8以下

1%
last 2 versions
not ie <= 8
使用 npx browserslist 可以查看项目的浏览器兼容情况
将需要支持的目标浏览器参数放在文件中就好

(5).eslintrc.js
eslint配置
(6).gitignore

.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln

(7)babel.config.js
配置 presets和env
(8)package.json
用来管理本地安装 npm 包的唯一文件。它描述了当前项目依赖的包的列表，包含项目依赖包的版本，便于项目管理和移植

“name” ：全部小写，没有空格，可以使用下划线或者横线
“version” ：x.x.x 的格式，符合“语义化版本规则
description：描述信息，有助于搜索，如果 package.json 中没有 description 信息，npm 使用项目中的
README.md 的第一行作为描述信息。这个描述信息有助于别人搜索你的项目，因此建议好好写 description 信息。
main: 入口文件,不固定，可自定义
scripts：支持的脚本，默认是一个空的 test
keywords：关键字，有助于在人们使用 npm search 搜索时发现你的项目
author：作者信息
license：默认是 MIT
bugs：当前项目的一些错误信息，如果有的话
包有两种依赖方式：

dependencies：在生产环境中需要用到的依赖
devDependencies：在开发、测试环境中用到的依赖，在上线打包后的代码是不存在的
npm install 默认会安装 package.json 中 dependencies 和 devDependencies 里的所有模块。
npm install <package_name> --save 表示将这个包名及对应的版本添加到 package.json的 dependencies
npm install <package_name> --save-dev 表示将这个包名及对应的版本添加到 package.json的 devDependencies
依赖包版本选择:

_{会匹配最近的小版本依赖包，比如}1.2.3会匹配所有1.2.x版本，但是不包括1.3.0
^{会匹配最新的大版本依赖包，比如}1.2.3会匹配所有1.x.x的包，包括1.3.0，但是不包括2.0.0
*会匹配最新版本的依赖包,但会产生兼容问题,一般不推荐

七、现代模式

为了兼容那些不支持js新特性的浏览器我们需要Babel转译，但转译后的代码笨重冗长，这次3.x提供了一个现代模式

npx vue-cli-service build --modern

这个命令会产生两个应用的版本：一个现代版的包，面向支持 ES modules 的现代浏览器，另一个旧版的包，面向不支持的旧浏览器
而且不需要我们手动去部署和设置什么，简直很贴心

现代版的包会通过

八、插件的添加

在一个已经被创建好的项目中安装一个插件,使用vue add命令

CLI 插件安装

每个 CLI 插件都会包含一个 (用来创建文件的) 生成器和一个 (用来调整 webpack 核心配置和注入命令的) 运行时插件
对于这种cli插件需要加入@vue的前缀，这个命令将 @vue/eslint 解析为完整的包名 @vue/cli-plugin-eslint，然后从 npm 安装它，调用它的生成器

插件添加
vue add @vue/eslint

向被安装的插件传递生成器选项 (这样做会跳过命令提示)
vue add @vue/eslint --config airbnb --lintOn save

第三方插件安装

安装并调用 vue-cli-plugin-apollo，不带 @vue 前缀，该命令会换作解析一个 unscoped 的包
执行此命令后src里会创建一个plugins文件夹，里面会自动生成关于插件的配置文件
vue add axios

基于一个指定的 scope 使用第三方插件，如果一个插件名为 @foo/vue-cli-plugin-bar，你可以这样添加它：
vue add @foo/bar

配置修改

例：向所有 Sass 样式传入共享的全局变量
在根目录新建一个vue.config.js，加入以下配置

module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.scss` 这个文件
        data: `@import "@/variables.scss";`
      }
    }
  }
}

打包后路径问题

在vue.config.js文件中加入’baseUrl: ‘./’’

module.exports = {
    //...
    baseUrl: './'
    //...
}

虽然官方说这个文件会被 @vue/cli-service 自动加载，但如果你启动项目用的是npm run serve，那么你最好使用npx vue-cli-service serve重启一下

九、HTML和静态资源
URL 转换规则

(1)如果 URL 是一个绝对路径 (例如 /images/foo.png)，它将会被保留不变。

(2)如果 URL 以 . 开头，它会作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析。

(3)如果 URL 以 ~ 开头，其后的任何内容都会作为一个模块请求被解析。这意味着你甚至可以引用 Node 模块中的资源：

<img src="~some-npm-package/foo.png">

(4)如果 URL 以 @ 开头，它也会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向 /src 的别名 @。(仅作用于模版中)

十、预处理器

你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选好，内置的 webpack 仍然会被预配置为可以完成所有的处理。你也可以手动安装相应的 webpack loader：

# Sass
npm install -D sass-loader sass

# Less
npm install -D less-loader less

# Stylus
npm install -D stylus-loader stylus

然后你就可以导入相应的文件类型，或在 *.vue 文件中这样来使用：

<style lang="scss">
$color: red;
</style>