浅谈vue-cli 3 和 vue-cli 2的区别

发布时间:2018-12-20 作者:一点通


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>'
            }
        },  // 配置多个代理
    }
}

好了,终于完事了。

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

来源:https://blog.csdn.net/weixin_42080056/article/details/81631661