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

我会带着你远行 2023-10-02 16:25 17阅读 0赞

原文网址：[@vue/cli3--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][vue_cli3--_IT_-CSDN]

## 简介 ##

**说明**

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

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

**官网**

[介绍 | Vue CLI][_ Vue CLI]

**系列文章**

1.  [Vue-cli2--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue-cli2--_IT_-CSDN]
2.  [@vue/cli3--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][vue_cli3--_IT_-CSDN]
3.  [@vue/cli3--使用图形化界面创建项目--方法/实例\_IT利刃出鞘的博客-CSDN博客][vue_cli3--_--_IT_-CSDN]
4.  [@vue/cli3--使用命令创建项目--方法/实例\_IT利刃出鞘的博客-CSDN博客][vue_cli3--_--_IT_-CSDN 1]
5.  [@vue/cli4--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客\_vuecli4中文文档][vue_cli4--_IT_-CSDN_vuecli4]
6.  [@vue/cli4--使用图形化界面创建项目--方法/实例\_IT利刃出鞘的博客-CSDN博客][vue_cli4--_--_IT_-CSDN]
7.  [@vue/cli4--使用命令创建项目--方法/实例\_IT利刃出鞘的博客-CSDN博客][vue_cli4--_--_IT_-CSDN 1]

## @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 有几个独立的部分——如果你看到了我们的[源代码][Link 1]，你会发现这个仓库里同时管理了多个单独发布的包。

**[\#][Link 2]CLI**

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

**[\#][Link 3]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]章节涵盖了它的具体用法。

**[\#][Link 4]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][preset] 章节进行深入讨论。

## **@vue/cli3和VueCli2的区别** ##

1.  **命令**
    
    1.  **创建项目**
        
         *  3.0：vue create project\_name
         *  2.0：vue init webpack project\_name
    2.  **启动项目**
        
        1.  3.0：npm run serve
        2.  2.0：npm run dev
2.  **项目配置**
    
    1.  3.0：设计原则是 “0配置”。
        
        1.  移除根目录下的build和config目录。
        2.  提供vue ui 命令，提供了可视化配置，更加人性化。
        3.  可在根目录下创建 vue.config.js 文件进行配置。
    2.  2.0：使用配置文件配置
        
        1.  根目录下的build和config目录下的文件进行webpack、多环境和打包等配置。
3.  静态文件的位置
    
    1.  3.0：移除 static 文件夹，新增public文件夹，且index.html移动到public中
    2.  2.0：在static文件夹中
4.  router路径
    
    1.  3.0：有router.js单独文件
    2.  2.0：在router文件夹下
5.  webpack版本
    
    1.  3.0：基于 webpack 4
    2.  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文件夹)

## 配置文件 ##

**其他网址**

[官方文档][Link 5]

**简介**

可以在项目根目录下新建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: {
            // ...
    
        }
    
    }

## **其他网址** ##

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

[vue_cli3--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/121482954
[_ Vue CLI]: https://cli.vuejs.org/zh/guide/
[Vue-cli2--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/121482857
[vue_cli3--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/125436578
[vue_cli3--_--_IT_-CSDN 1]: https://knife.blog.csdn.net/article/details/125436648
[vue_cli4--_IT_-CSDN_vuecli4]: https://knife.blog.csdn.net/article/details/121482997
[vue_cli4--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/125397525
[vue_cli4--_--_IT_-CSDN 1]: https://knife.blog.csdn.net/article/details/125436695
[Link 1]: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue
[Link 2]: https://cli.vuejs.org/zh/guide/#cli
[Link 3]: https://cli.vuejs.org/zh/guide/#cli-%E6%9C%8D%E5%8A%A1
[webpack]: http://webpack.js.org/
[webpack-dev-server]: https://github.com/webpack/webpack-dev-server
[create-react-app]: https://github.com/facebookincubator/create-react-app
[CLI]: https://cli.vuejs.org/zh/guide/cli-service.html
[Link 4]: https://cli.vuejs.org/zh/guide/#cli-%E6%8F%92%E4%BB%B6
[preset]: https://cli.vuejs.org/zh/guide/plugins-and-presets.html
[Link 5]: https://cli.vuejs.org/zh/config/
[Vue-cli3.0]: https://juejin.cn/post/6844903714017247246