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

作者:神秘网友 发布时间:2020-09-15 08:44:41

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

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

文章目录

    • 一. webpack开发 VS CLI开发
      • 1.1 webpack开发的痛点
      • 1.2 CLI工具
    • 二. Vue.js标准开发工具 —— Vue CLI 4.0
      • 2.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)

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

1.1 webpack开发的痛点

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

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

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

  • ② 绝大部分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 CLIParcelcreate-react-appdva-cli等都是CLI工具。

【 Vue全家桶 · Vue CLI(一)】快速入门Vue.js标准开发工具 —
通常他们都具有以下功能点:

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

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

  • 减少了低级重复劳动;
  • 提高了开发效率;
  • 使开发工作流程(develop workflow)更加规范;

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

?? Vue CLI官方文档
?? Vue源码

【 Vue全家桶 · Vue CLI(一)】快速入门Vue.js标准开发工具 —
Vue CLI 具体由多个独立的部分组成,具体可见源码。这里主要介绍其中四个:

2.1 交互式的项目脚手架(@vue/cli)

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

npm install -g @vue/cli

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

【 Vue全家桶 · Vue CLI(一)】快速入门Vue.js标准开发工具 —
比如我们以后会经常用到的(本处仅罗列,具体后续章节再介绍):

命令作用
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全家桶 · Vue CLI(一)】快速入门Vue.js标准开发工具 —
或者我们在拿到一个Vue项目时(一般是没有依赖文件的),就需要我们自己安装依赖。具体用到的命令为:

npm init

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

2.2.1 其它 CLI 插件的核心服务

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

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

2.2.2 默认的 webpack 配置方案

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

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

【 Vue全家桶 · Vue CLI(一)】快速入门Vue.js标准开发工具 —
修改为用户可以选择创建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

【 Vue全家桶 · Vue CLI(一)】快速入门Vue.js标准开发工具 —
哇咔咔!足足有1300行配置代码!看来写出一个针对绝大部分应用优化过的内部的 webpack 配置确实很有难度,官方大大辛苦啦 ~ ??

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

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

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

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

【 Vue全家桶 · Vue CLI(一)】快速入门Vue.js标准开发工具 —
执行serve命令就相当于是执行了vue-cli-service servebuild同理。其实我们也可以修改命令的关键字,比如之后使用Vue框架vue-element-admin的时候,对应的启动命令关键字就为dev

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

① build 打包命令:

npm run build

【 Vue全家桶 · Vue CLI(一)】快速入门Vue.js标准开发工具 —
打包出来的文件默认放在dist文件夹下,和原生webpack的操作一致:

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

② serve 打包命令:

npm run serve

【 Vue全家桶 · Vue CLI(一)】快速入门Vue.js标准开发工具 —
启动成功后,会自动帮我们部署在本地的8080端口;如果配置了线上IP,那么也会同时部署在线上。

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

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

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

2.3 CLI 插件(@vue/cli-plugin)

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

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

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

2.4 图形化界面(@vue/cli-ui)

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

它的启动命令为:

vue ui

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

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


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

??????

【 Vue全家桶 · Vue CLI(一)】快速入门Vue.js标准开发工具 —相关教程

  1. VueJS -- 使用vue+webpack搭建一个vue简单工程项目
  2. 埋点理论以及基于Vue的前端埋点技术
  3. Java前端Vue-4(Vue的组件)
  4. Myeclipse启动tomcat的debug模式总是跳到Class.class里面的解决
  5. 使用vue学习three.js之材质-材质分类,网格基础材质MeshBasicMat
  6. vue目录树组件(树状结构列表)
  7. ionic4 click防抖指令
  8. Vue observable