专栏首页热爱ITvue-cli2.0与vue-cli3.0区别

vue-cli2.0与vue-cli3.0区别

首先你要熟悉vue-cli2.0

1.项目目录结构

可以明显的看出来,vue-cli2.0与3.0在目录结构方面,有明显的不同(vue3.0我是安装了css预处理器,所以看上去内容更丰富哈)

vue-cli3.0移除了配置文件目录,config 和 build 文件夹

同时移除了 static 静态文件夹,新增了 public 文件夹,细心的你,打开层级目录还会发现, index.html 移动到 public 中

2.配置项

vue-cli2.0的域名配置,分为开发环境和生产环境,所以配置域名时,需要在config中的dev.env.js和prod.env.js中分别配置

前面说过,到了3.0 config文件已经被移除,但是多了.env.production和env.development文件,除了文件位置,实际配置起来和2.0没什么不同

当然,没了config文件,跨域需要配置域名时,从config/index.js 挪到了vue.config.js中,配置方法不变

在3.0中,vue.config.js中有关于mock的配置

要注意的是:mockjs是用来模拟产生一些虚拟的数据,方便前端在后端接口还没有开发出来时独立开发

即使使用了真实的url,但是mockjs拦截了ajax请求,返回的是设定好的本地数据

如果你想正常从后端获取数据,就要关掉mock的使用,我是直接删掉的,当然你可以选择别的办法

main.js中有一段关于mock.js的描述(注意上线前要去掉你的mock)

3.可视化界面

找到项目,vue ui 命令会直接打开可视化界面,里面可以进行配置、依赖等操作

对于不喜欢命令行的朋友可以说是非常友好了

 4.其他

 全局安装vu-cli 3.0 

npm install -g @vue/cli 

  如果之前安装了2.0版本,先卸载 npm uninstall -g vue-cli )

   安装完 3.0 后,有以下两种创建项目的方式:

  1: vue create < project-name> 

  然后会出现默认和手动两个选项,跟着步骤走就好(傻瓜式操作)

  2:   用视图创建项目  vue  ui (上面已经说了)

 在2.x0中,你使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行

 而在3.0中,只有依赖那个属性的 watcher 才会重新运行 ,这样使得变更通知更加精准

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 可视化构建工具探索之Vue Cli3.0 & 阿里飞冰

    安装了最新的Vue CLI。打开Terminal,输入: npm install -g @vue/cli or yarn global add @vue/cli

    用户2356368
  • Vue-Cli4笔记

    如果仍然需要使用vue init webpack初始化项目的话,则需要安装cli-init,但是拉取的仍然是Vue-Cli2.0版本

    WindrunnerMax
  • Vue(CLI3.0)多环境配置问题2020

    程序员不务正业
  • 通过Node.js完美解决Vue-Cli3.0上线时的二大痛点

    在前端框架的历史中,React 和 Angular 一直都处于主角的位置。其间,有众多的新框架试图冲杀进来分一杯羹,但都未成功,除了 Vue。

    用户1272076
  • 大厂的面试题

    Qiang
  • 全栈的自我修养: 002使用@vue/cli进行vue环境搭建 (使用Vue,SpringBoot,Flask完成前后端分离)

    前言删代码,不用跑路安装@vue/cli创建 Vue 项目项目结构vue-cli3.0修改端口号使用 elementUI安装 Vuex安装 axiosgithu...

    双鬼带单
  • 摸鱼的新发现,滚动条无限滚动

    上班摸鱼,下班摸鱼,一直摸一直爽。在一次调试的过程中,我按下了F12刚好是掘金的页面,然后把代码输入到控制台之后,顺手滚动了几下右侧的滚动条,发现个问题如下图所...

    小丑同学
  • 从零开始,手摸手搭建前端组件库

    https://majunchang.github.io/mi.vant/#/quickStart

    念念不忘
  • vue vuecli3 前端解决跨域问题

    指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。

    kirin

扫码关注云+社区

领取腾讯云代金券