zoukankan      html  css  js  c++  java
  • vue-cli2.0 与 vue-cli3.0 配置的区别

    提示:要了解vue-cli2.0与vue-cli3.0区别,首先你要熟悉vue-cli2.0

    从最明显最简单的开始

    项目目录结构

     

     

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

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

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

    配置项

    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)

    可视化界面

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

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

     其他

     全局安装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 才会重新运行 ,这样使得变更通知更加精准

    再有其他的变化,可能就涉及到底层了,暂且不讨论,毕竟实际项目进度优先,研究底层技术这个事,就留给诸位大牛吧

    之前大部分地方vue-cli3.0和vue-cli2.0都写的vue2.0 vue3.0 

    好在被一楼的姐妹儿指出来了 

    感谢 有机会请你吃火锅

  • 相关阅读:
    开发中的一些总结2
    XML与DataTable/DataSet互转(C#) 把数据库中表的内容转存为XML文件
    闲来无事。。。。
    一:Js的Url中传递中文参数乱码问题,重点:encodeURI编码,decodeURI解码:
    20120301 14:10 js函数内部实现休眠
    设为首页和收藏本站的代码
    Jquery实现对a标签改变选中的背景色 支持多选 再次点击背景色消失
    asp.net上传图片并生成等比例缩略图(.Net自带函数完成)
    类中只有 成员变量 和 一个成员函数表
    CListCtrl 使用技巧
  • 原文地址:https://www.cnblogs.com/tongjiaojiao/p/11812194.html
Copyright © 2011-2022 走看看