zoukankan      html  css  js  c++  java
  • VueCli 原理与实践

    目前我们的主要目的是:将VueCli2 与 VueCLi3,4进行对比,同时我们还会将 React-Script进行剖析和对比,并实现一个简单的【基础框架】开发

     

    一、VueCli2 实践

     

    根据 VueCli2 的官网,我们看到有三个点需要注意:

    1. VueCli2 使用的安装名与 VueCli3 的安装名不同

    2. 当 vue init 时需要一个模版名,并根据模版名安装对应的项目,不只有weboack一个模版

    3. 看到 vuejs-templates/webpack 点击进入

    二、剖析 VueCli 2 生成 目录,及存在问题

    结论:从以上代码中,我们可以清楚的明白,webpack是安装在了项目目录下,可通过自己配置相关webpack

    存在的问题:VueCli2拉取的项目中,其实我们更改编辑的只有业务代码,对于基础代码类似webpack,我们并不会频繁使用,加上如果很多和项目,使用的基础代码相同的情况下,导致在后期基础代码的升级和维护上需要一些花费时间和成本。

    解决办法:1. 将基础代码封装

         2. 所有的项目,共用同一个基础代码

    保留目前存在的问题

     

    三、VueCli 3 的实践

    1. 安装 

    2. 使用

    3. 分析

    疑问:为什么要做了再一次的封装

    解答:@vue/cli-service 这个脚手架,主要是帮我们将基础代码进行了封装,例如webpack

    疑问:为什么将基础代码封装?它会给我带来什么好处?

    解答:在vueCli2 的时候我们会发现,我们需要新增的只有业务代码,在基础代码webpack上我们并没有对其进行大的更改,当我们开发的项目越来越多的时候,我们会发现基本代码很类似,但webpack的维护成本就很大,基本每个项目我们都需要维护,如果我们共用一套基础代码的话,就只会维护一套代码就可,在版本更新或者修改版本的情况下,我们就会节省人力和时间

    疑问:@vue/cli-plugin 是什么?

    解答:

    脚手架我们在设计的时候会有这么几种情况,

    1. 根据脚手架的规则去设计,但有弊端,扩展性不是很好

    2. 将所有可以考虑用到的插件和逻辑,全部在一个脚手架实现,但有弊端,扩展性

    1. @vue/cli-plugin 主要是插件,在vueCli2安装项目时,会提示我们是否安装 router, less 等等插件,

    2. 因每个人选择的插件会不同,比如有的人喜欢less,有的喜欢sass,但vueCLi2的模式,就是将所有的可能性都包含在脚手架里面,就会让脚手架变得很重,

    3. 所以我们以插件的形式把基础代码跟插件分开,就会使脚手架只做自己需要做的事,不需要考虑太多

    疑问:在项目中我需要额外配置基础代码,那应该如何修改基础代码里面的内容呢?

    1. 在项目的根目录下,新建Vue.config.js 文件,可通过该文件进行配置基础代码的一些配置,也可覆盖基础代码

     

    四、react-Script 实践

    1. 安装

     2. 使用

    总结:

    1. 执行npm run eject 命令,会提示我这是一个不可逆的操作,

    2. 如果我们需要执行这个操作,那么就表示我们的webpack后期需要我们自己去维护,但如果我们但项目脚手架内的webpack已经满足不了我们的需求的时候,我们就不得不执行这个不可逆的操作,那后期我们就需要自己去维护webpack ,

    3. 项目下就会安装webpack和一些其他文件,

    4. 目录下就会多出一个config文件,内部是webpack的配置文件,可自行修改

  • 相关阅读:
    Compile Groovy/Spock with GMavenPlus
    Jenkins Slave Nodes – using the Swarm Plugin
    [NodeJS]Jenkins-cli
    [CoffeeScript]使用Yield功能
    [JavaScript]String.format
    [CoffeeScript]在WebStorm里运行CoffeeScript
    自动化运维的三阶段理论
    [Ruby]Unzipping a file using rubyzip
    测试文章引用
    敏捷软件测试读书笔记
  • 原文地址:https://www.cnblogs.com/gqx-html/p/14024406.html
Copyright © 2011-2022 走看看