• 技术文章 >web前端 >Vue.js

    深入研究Vue CLI3

    青灯夜游青灯夜游2020-10-05 16:07:05转载105

    Vue CLI是一个简单而强大的工具,用于搭建Vue.js项目。它可以确保各种构建工具与合理的默认设置一起顺利运行,因此您可以专注于编写应用程序,而不必花时间在配置上进行斗争。

    Vue CLI 3是目前为止Vue生态系统中发生的最好事情,原因如下:

    1、基于插件的架构

    新的CLI实现了我们所谓的基于插件的体系结构,这是对以前使用基于模板的体系结构的版本的重大改进。

    这意味着,现在只有一个模板,您需要的所有其他功能都将作为插件添加。

    2、灵活性

    新的CLI使超级容易地开始一个新项目,而不必考虑将来可能需要的所有功能。

    您可以创建项目,直接进行编码,然后在需要功能时,只需添加即可!

    3、Zero-config快速原型

    这样,您就可以像处理html文件一样来提供vue应用或组件。

    4、Vuex

    新的CLI允许您将vuex添加到项目中,就像在以前版本中添加vue路由器一样。

    5、Typescript

    现在正式的cli支持引导typescript vue.js应用程序

    6、自定义插件

    如果还不够完善的CLI官方插件,则可以创建您自己的自定义插件(当然,还可以发布您的插件,以便其他人可以使用它们)。

    安装Vue CLI 3

    要安装CLI,请运行以下代码。

    npm install -g @vue/cli

    这将安装最新版本的Vue CLI。 完成后,您可以通过运行以下命令确认已安装的版本:

    vue -V

    更改CLI命令

    与以前的版本相比,CLI命令略有变化,并且新命令已添加到好东西包中。

    为此,请在终端中运行以下代码。

    npm install -g @vue/cli-init

    安装完成后。 现在,您随时可以在版本3中直接开始使用版本2。

    vue init webpack newapp

    创建一个新项目

    要创建一个新项目,请在您的终端中运行以下代码

    vue create projectname

    其中projectname是要创建的应用程序的名称。

    系统将提示您选择一个预设,默认预设(包含babel&eslint配置)或手动选择所需的功能。

    如果选择默认预设,则CLI将创建您的项目并安装必要的插件以使其启动并运行。

    如果您选择手动选择功能,则CLI会继续向您显示所有受支持的插件,并要求您选择要添加到项目中的插件。

    若要选择,请使用键盘上的空格键或A键选择所有插件。

    完成后,按Enter键继续。

    根据选择的插件的不同,还会显示其他提示,只需选择所需的内容,然后按Enter键,然后让CLI完成即可。

    新的CLI的一项很酷的功能是,创建的项目还会自动在计算机上为您的项目创建一个新的存储库。

    插件支持开箱即用

    1. Typescript @vue/typescript

    2. 渐进式Web应用程序(PWA)@vue/pwa

    3. Vue Router

    4. Vuex

    5. CSS预处理器(postcss,css模块,sass,less和stylus)

    6. Linter / Formatters @vue/eslint

    7. 单元测试 @ vue / mocha@ vue / jest

    8. E2E测试@ vue / cypress@ vue / nightwatch

    预设值

    在使用CLI创建新项目并手动选择功能时,会创建一个预设。

    CLI使用此创建的预设来创建项目文件。

    它使用JSON编写,包含创建新应用时选择的所有功能。

    预设可以重复使用,从而使您可以轻松地直接跳入应用程序,而无需在创建将来的应用程序时经历整个功能选择过程。

    要使用CLI从先前保存的预设创建新项目,请将目录更改为预设的位置,然后运行以下代码

    vue create -p presetname newproject

    这将使用指定的预设文件来创建名为newproject的项目名称。

    将CLI插件添加到现有项目

    要将插件添加到已创建的项目中,只需运行以下命令

    vue add @vue/pwa

    其中@ vue / pwa是要添加的插件的名称,在这种情况下为Progressive Web App插件。

    需要注意的一件事是,新的CLI现在接受软件包的简写名称,例如@ vue / pwa是CLI软件包@ vue / cli-plugin-pwa的简写。

    CLI将名称@ vue / value解析为@ vue / cli-plugin-value以安装软件包。

    Zero-config快速原型

    新的CLI使得使用vue servevue build命令以开发或生产模式仅提供.vue或.js文件变得非常容易。

    如果您只想测试自己的想法,而又不想打扰配置,那么这是完美的选择。

    要使用此命令,您必须首先安装vue CLI全局服务。

    为此,只需在您的终端中运行以下代码。

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

    安装完成后,您可以使用vue servevue build

    服务视图

    vue serve app.vue

    其中app.vue是要提供服务的组件或文件的名称。

    serve命令还提供了一个选项,可以在运行完命令后启动浏览器,而不仅仅是向您显示当前正在向其提供应用程序的网址。

    为此,请运行vue serve -o app.vue

    Vue build

    vue build app.vue

    其中app.vue是要提供服务的组件或文件的名称。

    vue build命令将构建可用于生产环境的捆绑软件,它还允许您指定是将其构建为库还是Web组件。

    要构建为库,请使用vue build -t lib app.vue,而要构建为Web组件,请使用vue build -t wc app.vue

    环境变量

    新的CLI现在允许您在项目根目录中使用.env文件来使用环境变量。

    该文件由键=值对组成。

    每个人至少需要管理2个环境,这意味着我们需要为此环境指定变量。

    为了有效地做到这一点,CLI引入了我们所说的模式。

    模式只是环境的别称,它指定您是处于开发,生产还是测试模式。

    创建仅由特定模式使用的变量。 您必须将模式名称作为后缀添加到.env文件名中。

    .env.development用于开发模式,.env.production用于生产模式。

    注意:要使CLI将变量嵌入客户端捆绑软件代码中,该变量必须以VUE_APP_名称为前缀。

    现在添加变量seckey变为VUE_APP_SECKEY

    调整Webpack配置

    Vue CLI提供了一种非常简单灵活的方法来调整内部Webpack配置。

    为此,您必须在vue.config.js中使用configureWebpack选项

    // vue.config.js
    module.exports = {
      configureWebpack: {
        plugins: [
          new MyAwesomeWebpackPlugin()
        ]
      }
    }

    以防万一您在项目根目录中没有vue.config.js文件。 您将必须手动创建它。

    您可能想知道:“我如何知道内部Webpack配置中已经存在的内容,所以我知道需要添加什么?”

    好了,这是vue inspect命令变得方便的地方。

    此命令将所有内部Webpack配置输出到您的终端。

    要将其输出到文件,只需指定这样的文件名

    vue inspect > output.js

    相关推荐:

    2020年前端vue面试题大汇总(附答案)

    vue教程推荐:2020最新的5个vue.js视频教程精选

    更多编程相关知识,请访问:编程入门!!

    以上就是深入研究Vue CLI3的详细内容,更多请关注php中文网其它相关文章!

    本文转载于:logrocket,如有侵犯,请联系a@php.cn删除
    专题推荐:Vue CLI Vue.js
    上一篇:深入了解Vue的中间件管道(middleware pipeline) 下一篇:Vuex中常用知识点(总结)
    第13期线上培训班

    相关文章推荐

    • vue项目中关闭Eslint校验的方法介绍• Vue.js中定义组件模板的几种方法介绍• Vue应用程序中实现AJAX的四个地方• Vue项目中使用异步组件来优化性能• 分享Vue项目中会用到的一些实战技巧点• 详解Vue.js中的作用域插槽• Vue.js中使用无状态组件的方法介绍• Vue.js中使用事件发射器修改组件数据的方法• Vue.js中使用道具将数据传递到的子组件

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网