这两天公司搭建新项目的时候发现vue-cli3有一个神奇的的东西:preset(预设)。preset其实是你在create新vue项目的时候,生成的插件配置项预设,也就是你在项目中需要用到的插件安装成功了之后,会生成一个关于preset的文件,当你再次create新的vue项目的时候,就不需要再去选择同样的插件,直接用preset安装就好了。可以参考这两篇博客,写的很详细:https://www.jianshu.com/p/7f0563dbe792,https://segmentfault.com/a/1190000016389996。

这里我演示下如何生成预设并使用这个预设:

1.创建一个新的项目:vue create new-test3

红色框起来的部分就是我之前创建项目时保存的预设,括号中是这个预设中包含的插件,移动上下键可以选择一个预设安装,如果不需要或者自己配置,选择最后一项,按回车

2.选择需要安装的插件,移动上线键,按空格键切换选中之后保存,这里我选择babel、router、vuex、css pre-processors这四个插件,按回车到下一步

3.是否按照history的方式创建路由,我选择否,回车下一步

4.选择css预编译工具,我选择less,回车下一步

5.这些组件的配置文件是放在一个package.json中还是分开放,我选第一项分开放,回车下一步

6.重点来了,重点来了,重点来了,重要的事情说三遍!

这里会问你是否需要保存预设并用到以后的项目中,我选择yes,回车下一步

7.问你保存的preset的名字是什么,我设为testPreset,回车下一步直到安装完成。

在你设置保存预设的时候系统会自动生成一个.vuerc的文件,一般在c盘,可以在c盘全局搜索并找到这个文件,用编辑器打开可以看到之前做的预设配置

那么再创建新项目的时候会出现上次预设的插件配置,这样就省去了再次一个一个添加插件的烦恼,如下图:

红框部分为上一次预设的配置,选中回车就可以创建和test3同样配置的项目文件。当然,你也可以对.vuerc文件中这些配置进行修改,删除。修改之后的预设会再下一次新建项目的时候生效。可以拷贝这个文件到别的电脑,这样在新建项目的时候也会使用同样的预设,远程预设还在研究,后续会加上远程预设怎么操作。

vue-cli3预设preset记录的更多相关文章

  1. vue-cli 如何修改或删除预设preset记录

    preset其实是你在create新vue项目的时候,生成的插件配置项预设,也就是你在项目中需要用到的插件安装成功了之后,会生成一个关于preset的文件,当你再次create新的vue项目的时候,就 ...

  2. vue cli3 项目配置

    [转]https://juejin.im/post/5c63afd56fb9a049b41cf5f4 基于vue-cli3.0快速构建vue项目 本章详细介绍使用vue-cli3.0来搭建项目. 本章 ...

  3. VUE CLI3.X 创建项目

    Node.js环境搭建 Node.js基于V8引擎,可以让js代码脱离浏览器运行 Vue CLI3.0 需要Node.js 8.9或者更高版本. 用nvm或者nvm-windows在同一台电脑中管理多 ...

  4. vue cli3超详细创建多页面配置

    1.首先按照vue cli3 给的入门文档下载个vue cli3 如果之前下载了vue cli2的要先卸载之前的 2.检查安装是否成功 3.ok,现在环境搭建好了,新建项目 vue create he ...

  5. Vue CLi3入门

    摘自:https://www.jianshu.com/p/cf9b56efd3b8 Vue CLi3入门 12018.11.15 14:16:17字数 1222阅读 8895 地址 Vue CLi3 ...

  6. Vue Cli3 TypeScript 搭建工程

    Vue Cli3出来也一段时间了,我想尝试下Vue结合TypeScript搭建个工程,感受下Vue下用TS...网上有一篇讲的非常详细的教程  vue-cli3.0 搭建项目模版教程(ts+vuex+ ...

  7. 在 vue cli3 的项目中配置双服务,模拟 ajax 分页请求

    最近安装了下vue cli3版本,与 cli 2 相比,文件少了,以前配置方法也不管用了.demo 中的大量的数据,需要做成 ajax 请求的方式来展示数据,因此,需要启动两个服务,一个用作前端请求, ...

  8. 安装VUE Cli3 框架方法

    下面为大家介绍一下怎样安装  VUE Cli3的步骤 官网地址  https://cli.vuejs.org/zh/guide/installation.html 一.首先要检查一下是否安装node环 ...

  9. vue cli3.0 结合echarts3.0和地图的使用方法

    echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...

随机推荐

  1. Luogu 4449 于神之怒加强版

    挺套路的题,然而一开始还是想错了…… $\sum_{i = 1}^{n}\sum_{j = 1}^{m}gcd(i, j) ^ {k} = \sum_{T = 1}^{min(n, m)}\left ...

  2. Workflow笔记2——状态机工作流(转)

    出处:http://www.cnblogs.com/jiekzou/p/6192813.html 在上一节Workflow笔记1——工作流介绍中,介绍的是流程图工作流,后来微软又推出了状态机工作流,它 ...

  3. IP多播技术及其应用

    随着全球互联网(Internet)的迅猛发展,上网人数正以几何级数快速增长,以因特网技术为主导的数据通信在通信业务总量中的比列迅速上升,因特网业务已成为多媒体通信业中发展最为迅速.竞争最为激烈的领域. ...

  4. 百度地图 Javascript API 笔记

    因为最近的一个项目用到,所以自己整理了一下遇到的一些坑 自己写了一个类库来二次封装用于调起常用的功能:https://github.com/iRuxu/iBMap 快速文档链接 Javascript ...

  5. Exception in thread "main" java.lang.Error: Unresolved compilation problem

    初学java,使用eclipse编译时,可能会遇到如下图所示的编译错误(Exception in thread "main" java.lang.Error: Unresolved ...

  6. CSS实现图片阴影效果

    <title>无标题文档</title> <style type="text/css"> /*方法一:使用一个GIF文件的方法*/ .gifsh ...

  7. Linux命令行下的vim文本编辑器

    Linux命令行下的vim文本编辑器 下面这个网站的地址讲解的非成分清楚!!!! http://blog.csdn.net/niushuai666/article/details/7275406 学习 ...

  8. Oracle ERP View - fnd_global.apps_initialize

    在ORACLE APPLICATION FORM中已存储了数据,在客户端TOAD中查找其TABLE找到相关数据行,但当查找其VIEW时就无法找到数据. 原因ORACLE的权责及OU安全机制屏蔽问题. ...

  9. Tomcat 配置用户认证服务供C#客户端调用

    项目里,遇到的一个小问题来好好的总结一下.因为我们这个项目是用Java写的服务端发布WebService,客户端呢使用C#来调用WebService(本人以前搞过一段时间C#客户端,还总结了一个MVP ...

  10. 日志框架 NLog

    这里按老规矩先进行和其它产品进行比较: 目前在.net平台存在两个比较老牌的日志框架分别为Log4net和NLog. 我们进行对这两种框架进行比较下 Log4net Log4net是一个老牌的日志框架 ...