【 Vue全家桶 · Vue CLI（一）】快速入门Vue.js标准开发工具 —— Vue CLI 4.0

最新推荐文章于 2024-06-01 16:49:07 发布

Code_Zevin_J

最新推荐文章于 2024-06-01 16:49:07 发布

阅读量818

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/JZevin/article/details/108587688

版权

Vue 专栏收录该内容

14 篇文章 20 订阅

订阅专栏

文章目录

一. webpack开发 VS CLI开发

在这里插入图片描述

1.1 webpack开发的痛点

webpack无疑是最优秀的项目构建工具，大而全的功能确实能满足我们绝大部分的需求，但它同样存在问题：

① 项目整体目录结构仍需要我们手动创建；
每次项目都需要我们手动创建目录结构，这种简单低级的劳动，完全可以用更高效的模板代替。

在这里插入图片描述

② 绝大部分loader和plugins都需要安装并配置；
通常稍复杂一些的项目里配置webpack文件往往就会花费很多时间。对于我们初学者来说高度可配置的webpack可谓是不太友好，很难写出定义良好，性能优化的配置。

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry:__dirname + '/src/js/main.js',
    output:{
        path:__dirname + '/dist',
        filename:'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                        },
                    },
                ],
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('最终版权归zevin所有'),
        new HtmlWebpackPlugin({
            template:'index.html'
        })
    ]
}

俗话说的好，写完一个 webpack.config.js 你的项目就做完一半了，哈哈 … 为了解决webpack配置的痛点，各类CLI工具应运而生。

1.2 CLI工具

CLI，全称是Command-Line Interface，即命令行工具，一种通过命令行来交互式的快速搭建项目结构的工具或者应用。 例如Vue CLI、Parcel、create-react-app、dva-cli等都是CLI工具。

在这里插入图片描述
通常他们都具有以下功能点：

一键生成项目架构模板；
提供一套默认的webpack配置；
构建打包功能；

目前在网页，APP，游戏，小程序等各类开发中，使用CLI工具已经成为了行业共识。借助CLI工具开发的优势在于：

减少了低级重复劳动；
提高了开发效率；
使开发工作流程（develop workflow）更加规范；

二. Vue.js标准开发工具 —— Vue CLI 4.0

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，是我们进行Vue开发的必备工具。

👉 Vue CLI官方文档
 👉 Vue源码

在这里插入图片描述
Vue CLI 具体由多个独立的部分组成，具体可见源码。这里主要介绍其中四个：

2.1 交互式的项目脚手架（@vue/cli）

CLI (@vue/cli) 是Vue CLI 的主包，需要通过 npm 全局安装：

npm install -g @vue/cli

是我们使用Vue CLI 的基础，它提供了终端里的 vue 命令。上述命令安装完成后，可在终端中输入vue查看可执行的所有命令：

在这里插入图片描述
比如我们以后会经常用到的（本处仅罗列，具体后续章节再介绍）：

命令	作用
vue -V	查看Vue CLI 的版本号
vue create	快速搭建一个新项目
vue serve	构建新想法的原型
vue ui	在浏览器打开Vue CLI的图形化界面

2.2 运行时开发环境依赖（@vue/cli-service）

（这一小节内容涉及到Vue项目创建完成之后的内容，小白可跳过2.2节）

CLI 服务 (@vue/cli-service) 是一个运行时的开发环境依赖，当我们使用如下命令：

vue create projectName

创建新的Vue项目时，都会让我们选择需要的插件后继续帮我们下载依赖 —— node_modules文件夹内容。

在这里插入图片描述
或者我们在拿到一个Vue项目时（一般是没有依赖文件的），就需要我们自己安装依赖。具体用到的命令为：

npm init

这样会帮你下载安装所有的依赖。CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。它包含了：

2.2.1 其它 CLI 插件的核心服务

node_modules文件夹中包含了我们常用的各种依赖，当然也包括我们在创建项目时，选装的其他Vue生态工具（Vue Router / Vuex）或者其他插件依赖。

在这里插入图片描述

2.2.2 默认的 webpack 配置方案

Vue CLI 是基于webpack构建的Vue手脚架工具，并且Vue CLI官方给我们提供了一套默认的可满足大众开发需求的webpack配置方案，不再需要我们自己去手动配置。虽然如此，但是我们仍然有途径去修改webpack配置：

在Vue CLI 3.0 之前还可以看到自动生成的webpack.config.js配置文件，此时的配置方法和官方一样。但是到了Vue CLI 3.0及以上版本中，就不再默认生成了。

在这里插入图片描述
修改为用户可以选择创建webpack.config.js的拓展文件 —— vue.config.js。而且Vue 还对webpack配置做了自己的定制，增加了一些定制属性，配置的方法跟webpack官方提供的方法有了一些不同。

❀ 拓展一下❀

更多有关VueCLI 4.0 中webpack的属性配置问题请看系列：

Vue CLI 4.0 webpack属性讲解以及创建vue.config.js

实际上，VueCLI 3.0及以上构建的项目是有webpack.config.js的，只是被Vue隐藏起来了，里面是Vue CLI的默认webpack配置。而vue.config.js是vue 对webpack.config.js的扩展文件。最终编译时，vue.config.js会被合并到webpack.config.js中。

当然我们也能查看当前项目的实际webpack配置，终端命令为：

vue inspect

更推荐大家把webpack配置存储到一个实际的文件中，这样查看的更方便。比如放到myWebpack.js文件中：

vue inspect > myWebpack.js

在这里插入图片描述
哇咔咔！足足有1300行配置代码！看来写出一个针对绝大部分应用优化过的内部的 webpack 配置确实很有难度，官方大大辛苦啦 ~ 🐶

2.2.3 项目内部的 vue-cli-service 命令

具体的 vue-cli-service 命令有三个：

inspect —— 查看当前项目的webpack配置；
serve —— 启动当前Vue项目；
build —— 打包当前Vue项目；

第一个inspect命令已经给大家演示过了，就直说后两个啦。他俩实际上定义在项目中的npm配置文件package.json文件中。

在这里插入图片描述
执行serve命令就相当于是执行了vue-cli-service serve，build同理。其实我们也可以修改命令的关键字，比如之后使用Vue框架vue-element-admin的时候，对应的启动命令关键字就为dev。

接下来就给大家演示一下这两句命令的终端执行效果：

① build 打包命令：

npm run build

在这里插入图片描述
打包出来的文件默认放在dist文件夹下，和原生webpack的操作一致：

在这里插入图片描述

② serve 打包命令：

npm run serve

在这里插入图片描述
启动成功后，会自动帮我们部署在本地的8080端口；如果配置了线上IP，那么也会同时部署在线上。

可能也会有小伙伴和我一样，本地部署不是8080，而是8081或者8082，这是因为我本地的8080端口被默认自动开启的apache占用了。以此类推，他会部署在你未被其他进程占用的端口。

我们去浏览器打开这个本地端口地址：你会看到这样的Vue默认页面！

在这里插入图片描述

2.3 CLI 插件（@vue/cli-plugin）

CLI 插件是Vue 项目中的可选项，通过 npm 局部安装。 Vue中的插件功能特别丰富，对 Babel、TypeScript、ESLint、PostCSS、PWA、单元测试和 End-to-end 测试提供开箱即用的支持。

插件可以在项目创建过程中选择，或在后期加入到项目中。

在这里插入图片描述

2.4 图形化界面（@vue/cli-ui）

图形化界面（@vue/cli-ui）是Vue CLI中的一大特色，让开发者可以通过配套的图形化界面来创建、开发和管理Vue项目。

它的启动命令为：

vue ui

在你需要创建项目的目录下，终端输入该命令，Vue框架就会自动在你的默认浏览器中打开这套 GUI 图形化界面：

在这里插入图片描述

写在最后

下一篇中将详细介绍使用Vue CLI创建项目的细节，有关GUI 图形化界面的具体操作就放到下下篇吧，加油！👊👊👊

—— zevin 于 2020.9.14 记

每一个不曾起舞的日子,都是对生命的辜负!

—— 尼采

兜兜转转，还是放不下你。

【 Vue全家桶 · Vue CLI（二）】使用 Vue CLI 4.0 快速构建你的第一个Vue项目（2020.10最新版）

—— zevin 于 2020.10.13 更新

Code_Zevin_J

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【 Vue全家桶 · Vue CLI（一）】快速入门Vue.js标准开发工具 —— Vue CLI 4.0

文章目录一. webpack开发 VS CLI开发1.1 webpack开发的痛点1.2 CLI工具二. Vue.js标准开发工具 —— Vue CLI 4.02.1 交互式的项目脚手架（@vue/cli）2.2 运行时开发环境依赖（@vue/cli-service）2.2.1 其它 CLI 插件的核心服务2.2.2 默认的 webpack 配置方案2.2.3 项目内部的 vue-cli-service 命令2.3 CLI 插件（@vue/cli-plugin）2.4 图形化界面（@vue/cli-ui）
复制链接

扫一扫

专栏目录