@vue/cli3--使用/教程/实例-CFANZ编程社区

简介

说明

本文介绍Vue的脚手架工具@vue/cli的用法。

本文介绍的vue-cli的版本为3.0。

官网

介绍 | Vue CLI

@vue/cli3介绍

Vue CLI 3.0后的包名称由 vue-cli 改成了 @vue/cli。

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供的功能如下：

通过 @vue/cli 实现的交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
一个运行时依赖 (@vue/cli-service)，该依赖：

可升级；
基于 webpack 构建，并带有合理的默认配置；
可以通过项目内的配置文件进行配置；
可以通过插件进行扩展。

一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

该系统的组件

Vue CLI 有几个独立的部分——如果你看到了我们的源代码，你会发现这个仓库里同时管理了多个单独发布的包。

#CLI

CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。我们会在接下来的指南中逐章节深入介绍。

#CLI 服务

CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。

CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。它包含了：

加载其它 CLI 插件的核心服务；
一个针对绝大部分应用优化过的内部的 webpack 配置；
项目内部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。

如果你熟悉 create-react-app 的话，@vue/cli-service 实际上大致等价于 react-scripts，尽管功能集合不一样。

CLI 服务章节涵盖了它的具体用法。

#CLI 插件

CLI 插件是向你的 Vue 项目提供可选功能的 npm 包，例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。Vue CLI 插件的名，@vue/cli-service 实际上大致等价于 react-scripts，字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头，非常容易使用。

当你在项目内部运行 vue-cli-service 命令时，它会自动解析并加载 package.json 中列出的所有 CLI 插件。

插件可以作为项目创建过程的一部分，或在后期加入到项目中。它们也可以被归成一组可复用的 preset。我们会在插件和 preset 章节进行深入讨论。

@vue/cli3和VueCli2的区别

命令

创建项目

3.0：vue create project_name
2.0：vue init webpack project_name

启动项目

3.0：npm run serve
2.0：npm run dev

项目配置

3.0：设计原则是 “0配置”。

移除根目录下的build和config目录。
提供vue ui 命令，提供了可视化配置，更加人性化。
可在根目录下创建 vue.config.js 文件进行配置。

2.0：使用配置文件配置

根目录下的build和config目录下的文件进行webpack、多环境和打包等配置。

静态文件的位置

3.0：移除 static 文件夹，新增public文件夹，且index.html移动到public中
2.0：在static文件夹中

router路径

3.0：有router.js单独文件
2.0：在router文件夹下

webpack版本

3.0：基于 webpack 4
2.0：基于 webpack 3

命令

安装

npm install -g @vue/cli

一定要在全局模式下安装vue-cli，否则无法使用vue命令
上边命令默认安装最新版vue-cli，可自行指定版本：npm install -g @vue/cli@版本号

安装完之后，可以验证是否安装成功：

vue //会打印Vue-Cli帮助信息
vue -V //打印Vue-Cli版本

启动/打包

这是个很棒的功能，用于开发一个库、组件，做一些小demo等都是非常适合的！

安装扩展

npm install -g @vue/cli-service-global

随便找个文件夹建一个.vue文件，然后跑起来

vue serve App.vue // 启动服务

服务启动时生成一个node_modules包，服务支持ES6语法和热更新

vue build App.vue // 打包出生产环境的包并用来部署

打包时会生成一个dist文件夹。(新建一个test.vue文件也只有一个node_modules/dist文件夹)

配置文件

其他网址

官方文档

简介

可以在项目根目录下新建vue.config.js文件进行配置。

vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。

如果使用vue ui命令进行图形化配置，最终配置的保存路径为：/node_modules/@vue/cli-service/lib/webpack.config.js

示例配置

module.exports = {
    //  基本路径
    publicPath: "./",

    //  构建时的输出目录
    outputDir: "dist",

    //  放置静态资源的目录
    assetsDir: "static",

    //  html 的输出路径
    indexPath: "index.html",

    //文件名哈希
    filenameHashing: true,

    //用于多页配置，默认是 undefined
    pages: {
        index: {
            // page 的入口文件
            entry: 'src/index/main.js',

            // 模板文件
            template: 'public/index.html',

            // 在 dist/index.html 的输出文件
            filename: 'index.html',

            // 当使用页面 title 选项时，
            // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'Index Page',

            // 在这个页面中包含的块，默认情况下会包含
            // 提取出来的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        },

        // 当使用只有入口的字符串格式时，
        // 模板文件默认是 `public/subpage.html`
        // 如果不存在，就回退到 `public/index.html`。
        // 输出文件默认是 `subpage.html`。
        subpage: 'src/subpage/main.js'
    },

    //  是否在保存的时候使用 `eslint-loader` 进行检查。
    lintOnSave: true,

    //  是否使用带有浏览器内编译器的完整构建版本
    runtimeCompiler: false,

    //  babel-loader 默认会跳过 node_modules 依赖。
    transpileDependencies: [ /* string or regex */ ],

    //  是否为生产环境构建生成 source map？
    productionSourceMap: true,

    //  设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。
    crossorigin: "",

    //  在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。
    integrity: false,

    //  调整内部的 webpack 配置
    configureWebpack: () => {}, //(Object | Function)
    chainWebpack: () => {},

    // 配置 webpack-dev-server 行为。
    devServer: {
        open: process.platform === 'darwin',

        host: 'localhost',
        port: 8080,
        https: false,
        hotOnly: false,

        // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理

        proxy: {
            '/api': {
                target: "http://app.ly.com",
                changeOrigin: true,
                secure: false,
                pathRewrite: {
                    "^/api": ""
                }

            },

            '/foo': {
                target: '<other_url>'
            }

        }, // string | Object

        before: app => {}
    },

    // CSS 相关选项
    css: {
        // 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中)
        // 也可以是一个传递给 `extract-text-webpack-plugin` 的选项对象
        extract: true,

        // 是否开启 CSS source map？

        sourceMap: false,

        // 为预处理器的 loader 传递自定义选项。比如传递给
        // Css-loader 时，使用 `{ Css: { ... } }`。

        loaderOptions: {
            css: {
                // 这里的选项会传递给 css-loader
            },

            postcss: {
                // 这里的选项会传递给 postcss-loader
            }
        },

        // 为所有的 CSS 及其预处理文件开启 CSS Modules。
        // 这个选项不会影响 `*.vue` 文件。
        modules: false

    },

    // 在生产环境下为 Babel 和 TypeScript 使用 `thread-loader`
    // 在多核机器下会默认开启。
    parallel: require('os').cpus().length > 1,

    // PWA 插件的选项。
    // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli-plugin-pwa/README.md

    pwa: {},

    // 三方插件的选项
    pluginOptions: {
        // ...

    }

}

实例：使用命令行创建项目

1. 创建工程

vue create hello-cli3

hello-cli3是文件夹名字，若不存在会自动创建，若存在会安装到那个文件夹中。
项目名不允许含有大写字母
vue-cli2.x需要自己手动创建一个文件夹。

2. 选择模板

一开始只有两个选项: default(默认配置)和Manually select features(手动配置)

默认配置只有babel和eslint其他的都要自己另外再配置，所以我们选第二项手动配置。

在每次选择手动配置之后，会询问你是否保存配置，也就是图片中的koro选项，这样以后我们在进行创建项目的时候只需使用原先的配置就可以了，而不用再进行配置。

@vue/cli3--使用/教程/实例_vue

3. 选择配置

根据你的项目需要来选择配置，空格键是选中与取消，A键是全选
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) // 检查项目所需的功能:(按<space>选择，<a>切换所有，<i>反转选择） >( ) TypeScript // 支持使用 TypeScript 书写源码 ( ) Progressive Web App (PWA) Support // PWA 支持 ( ) Router // 支持 vue-router ( ) Vuex // 支持 vuex ( ) CSS Pre-processors // 支持 CSS 预处理器。 ( ) Linter / Formatter // 支持代码风格检查和格式化。 ( ) Unit Testing // 支持单元测试。 ( ) E2E Testing

4. 选择css预处理器

如果你选择了Css预处理器选项，会让你选择这个
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): // 选择CSS预处理器（默认支持PostCSS，Autoprefixer和CSS模块）： > SCSS/SASS LESS Stylus

5. 是否使用路由的history模式（若选history：页面路由不使用 #）

这里我建议选No，这样打包出来丢到服务器上可以直接使用了，后期要用的话，也可以自己再开起来。
选yes的话需要服务器那边再进行设置。
Use history mode for router? (Requires proper server setup for index fallback in production) // 路由使用history模式?(在生产环境中需要适当的服务器设置以备索引)

6. 选择Eslint代码验证规则

> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

可选择ESLint + Standartd

7. 选择什么时候进行代码规则检测

建议选保存就检测，等到commit的时候，问题可能都已经积累很多了。
之前写了篇VsCode保存时自动修复Eslint错误推荐一下。
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) >( ) Lint on save // 保存时检测 ( ) Lint and fix on commit // commit时检测和修复

8. 选择e2e测试

? Pick a E2E testing solution: (Use arrow keys)
❯ Cypress (Chrome only) 
  Nightwatch (Selenium-based)

9. 把babel,postcss,eslint等配置文件放哪

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
  > In dedicated config files // 独立文件放置
    In package.json           // 放package.json里

通常我们会选择独立放置，让package.json干净些

10. 是否保存配置

// 是否保存以便下次继续使用这套配置
Save this as a preset for future projects? (Y/n) 
// 若选保存，则会让你写一个配置的名字：
Save preset as:  name

11. 下载依赖

12. webpack配置的目录不见了

在自定义一下webpack的配置，我们需要在根目录新建一个vue.config.js文件，文件中应该导出一个对象，然后进行配置，详情查阅官方文档// vue.config.js module.exports = { // 选项... }

13.启动项目

启动项目：npm run serve // 不是之前的 npm run dev
打开http://localhost:8080：

实例：图形化界面的使用

简介

图形化配置之后，配置会保存到：/node_modules/@vue/cli-service/lib/webpack.config.js

启动图形化界面

vue ui

这是个全局的命令在哪个文件夹都可以打开
界面(下图)，重要的项目可以收藏起来(置顶)：

创建项目和导入项目

目录选中之后，导入项目点击下面的导入就可以了。
创建项目，填一个文件夹名字：
然后选一下预先保存好的设置就可以了，非常方便，建议采用图形界面来创建项目

项目管理

当我们点击hello -cli3项目，就会进入项目管理的界面

1. 仪表盘

这个仪表盘，主要是为了我们操作方便而设置的
可以点击右上角的按钮，来添加/移动这些功能选项。

2. vue-cli3.x插件

vue-cli3的插件功能，详情了解官方文档
cli3插件安装的过程：

3. 项目依赖

直接在图形界面管理依赖很舒服了！
安装依赖的时候，要记得选择开发依赖/运行依赖！

4. 项目配置

可以对cli进行一些配置、Eslint规则修改：

5. 任务

serve 运行项目，点击直接运行，再也不用输入命令了！
可以清楚的看到各个模块用了多久，方便我们针对性的进行优化：
build 打包项目：这里主要展示了图表的功能，比以前2.x生成报告更加直观，超级棒！

6. 其他

夜间风格界面
直接打开编辑器，很棒了！
还有一些乱七八糟的按钮

其他网址

一份超级详细的Vue-cli3.0使用教程[赶紧来试试！]