zoukankan      html  css  js  c++  java
  • 浅谈vuecli 3 和 vuecli 2的区别!!!

    Vue-cli3.0于8.11日正式发布,看了下评论,不是特别的乐观,说说我个人的意见,我是Vue的忠实粉,so....

    大概三个月前超哥就已经得知3.0的消息,试着用了下,相比之下现在的3.0和测试时的区别:

    modern mode。启用该模式会自动构建两个版本的 js 包,针对支持现代浏览器的原生 ES2015+ 包,和针对其他旧浏览器的包,生成的 HTML 会通过 <script type="module"> 和 <script nomodule> 进行自动降级,不需要任何特殊部署配置。原生 ES2015 包几乎不需要任何 polyfill 和编译,代码尺寸更小,现代浏览器 parse 和运行也更快。

    然后直接正题,我把版本降回到的2.9,接下来直接使用3.0的安装命令:

    3.0的安装:vue create 3.0project;

    2.0的安装:vue init webpack(据我所知有五个,这个是我常用的) 2.0project(项目名);

    如果版本为>3.0npm 会提示,如果你想运行请升级到3.0,还等啥升级呗。

    一路回车是完事了嘛?,猛的一看,哦NO,本人并不喜欢eslint,是特别反感的那种,相信很多朋友都不喜欢。

    来回头看 ,他是问你是否使用默认的preset 还是手动配置功能,而我们却回车回车再回车,让我们从新来过,手动选择,只因eslint,强迫症又来了。

    上图是手动的情形,如果选择手动则出现这个这个页面,可以使用空格键选中或取消,a选中所有,i反选,来让我们看看好像和2.0+没啥太大的的区别,简单的过目一下猛的一看多了VUEX?之前有vuex嘛?反正我是自己配的,其他的什么单元测试、路由...2.0+也都有。

    接下来看看 2.0+的:

    上图是2.0+的

    确实VUEX是新加的。来启动一下3.0:

    3.0启动npm run serve

    2.0启动npm run dev

    至于为什么会变,来看一下package.json

    这就秒懂了吧!!!

    接下来简单的看一下项目目录对比:

    build没了、config没了、哦对了还有最重要的一点,3.0的安装项目时自动下载node-model。

    如果vue.config.js没了怎么破。

    慌鸡毛,超哥带你走向人生巅峰!!!

    在根目录下创建一个vue.config.js不就行了,哈哈哈哈哈,我也觉着逗,具体配置看文档,写的很详细!!!

    还是给你们写两个常用的吧,一群吃瓜群众。。。

    module.exports = {
    baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',
    // outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'
    // outputDir: 'dist',
    // pages:{ type:Object,Default:undfind }
    devServer: {
    port: 8888, // 端口号
    host: 'localhost',
    https: false, // https:{type:Boolean}
    open: true, //配置自动启动浏览器
    // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
    proxy: {
    '/api': {
    target: '<url>',
    ws: true,
    changeOrigin: true
    },
    '/foo': {
    target: '<other_url>'
    }
    }, // 配置多个代理
    }
    }
    好了,终于完事了。

    本文仅限于需要的人和自家人看 ,所以...不喜勿喷,布鞋!!!

  • 相关阅读:
    SQL Server-数据库架构和对象、定义数据完整性(二)
    SQL Server-语句类别、数据库范式、系统数据库组成(一)
    ASP.NET WebAPi之断点续传下载(下)
    ConcurrentDictionary线程不安全么,你难道没疑惑,你难道弄懂了么?
    ASP.NET WebAPi之断点续传下载(中)
    ASP.NET WebAPi之断点续传下载(上)
    ASP.NET WebAPi(selfhost)之文件同步或异步上传
    JSTL fn:contains()函数
    用jstl标签判断一个字符串是否包含了另一个字符串
    fn:replace()函数
  • 原文地址:https://www.cnblogs.com/onesea/p/15523060.html
Copyright © 2011-2022 走看看