Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。
vue-cli 工具的初衷就是为了让开发者能够开箱即用快速地进行应用开发而开发的,它秉承的是“约定大于配置”思想,简单说就是”能不配置的就不配置,你就按照我的方式来,也不要去争论这个好不好,快速进行业务开发才是正经事”。他们不建议你去配置,但也不会拦着你去配置。另外 Webpack 对初学者并不是十分友好,‘又长又臭’的配置,普通开发者很难写入定义良好,性能优化的配置。不然就不会各种 cli 工具冒出来了,比如parcel,create-react-app。这些工具都宣称零配置,目的就是让开发者能够愉快的进行代码开发。
Vue CLI 提供:
· 通过 @vue/cli 实现的交互式的项目脚手架,会随本版本进行迭代更新(社区更好)。
· 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
· 一个运行时依赖 (@vue/cli-service),该依赖:
· 一个丰富的官方插件集合,集成了前端生态中最好的工具。
· 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
· Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。
· 提供了本地测试服务器(vue-cli提供了一套本地的node测试服务器,使用vue-cli自己提供的命令,就可以启动服务器),集成打包上线方案,还有一些优点,包括:模块化,转译,预处理,热加载,静态检测和自动化测试等。
vue 3 移除了配置文件目录 config 和 build 文件夹。CLI 3 也隐藏了 webpack 配置文件。如果需要自定义配置,需要自己新建vue.config.js文件。同时vue.config.js支持webpack-chain写法,可以更加方便。
vue 3移除了 static 静态资源文件夹,新增 public 文件夹,静态资源转移到public目录中,通过/xx.xx可以直接访问,并且 index.html 移动到 public 中。
vue 3 在 src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件。
vue 3 安装项目时会自动下载node-model文件夹
具体区别可以参考官网文档:https://cn.vuejs.org
vue-cli 2.x更像一个模板拷贝器,所有webpack配置和构建命令都是耦合在具体的项目里面,package.json会包含一大堆开发依赖。而@vue/cli才算一个构建
CLI
,它的优势在于开箱即可用。
打包速度:
vue-cli 3 是基于 webpack 4 打造,启动打包速度更快,vue-cli 2 还是 webapck 。
抽离cli service层
CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包,局部安装在每个 @vue/cli 创建的项目中。分离了vue-cli-service之后,项目构建更新只是一个命令的事情,除非做了很多特殊化操作。特殊化操作应该封装到vue-cli的插件中。
· CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。它包含了:
vue
命令行工具命令。CLI命令的做的事情比较少,所以更新不会太频繁(开发者也很少会去更新这些命令)。插件化:
CLI 插件是向你的 Vue 项目提供可选功能的 npm 包,例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头,非常容易使用。当你在项目内部运行 vue-cli-service 命令时,它会自动解析并加载 package.json 中列出的所有 CLI 插件。
vue-cli 的插件机制很灵活,相比create-react-app, vue-cli是在太仁慈了。通过webpack-chain和webpack-merge可以实现webpack完全定制化。如果你要做深度的vue-cli定制化,不建议直接写在vue.config.js中,而是封装在插件中,独立的维护这个插件,然后项目再依赖这个插件。这样就可以简化升级的成本和复杂度。
GUI界面: 虽然大部分人都觉得作用不大,因为确实对开发效率并实际的提升效果。就是看着舒服直观,这就够了。
快速原型开发:vue-cli3 支持直接将一个 vue 文件跑起来。打开速度提升,这里的优化有默认开启了多核构建、缓存。
现代模式:给先进的浏览器配合先进的代码(ES6之后),同时兼容旧版本的浏览器,先进的代码不管从文件体积还是脚本解析效率都有较高的提升。现代模式可以提供一个只面对现代浏览器的版本,和一个旧浏览器的回退版本,可以使用 vue-cli-service build --modern执行,启用该模式会自动构建两个版本的 js 包,针对支持现代浏览器的原生 ES2015+ 包,和针对其他旧浏览器的包,生成的 HTML 会通过
vue 脚手架版本目前有2,3,4.不管搭建哪个版本的脚手架,首先都需要安装node。
node安装成功之后,然后检测一下之前是否安装过脚手架vue-cli,检测方法是输入命令vue -V或者vue --version如果能看到版本号说明之前安装过脚手架,
全局安装webpack和脚手架:
继续在窗口里输入以下命令:
1.npm install webpack -g
2.npm install -g vue-cli
也可以安装指定版本的脚手架,命令行执行如下:
如果是安装3以下版本的脚手架,命令npm install -g vue-cli@版本号
如果是安装3以上版本的脚手架,命令npm install -g @vue/cli@版本号
1.安装node,方法也是node官网下载安装。
2.命令npm install -g @vue/cli 和命令npm install webpack -g
3.vue create project // project是项目名称
4.第3步执行回车后就让我们选择模板:
在这里插入图片描述
default (babel, eslint): 默认配置,只有Babel和eslint,其他的都要自己另外再配置
Manually select features: 手动配置
这里我们选择手动配置,也就是选择Manually这个
3.0 将带来一个基于 Proxy 的 observer 实现,它可以提供覆盖语言 ( JavaScript) 全范围的响应式能力,消除了当前 Vue 2 系列中基于 Object.defineProperty 所存在的一些局限,这些局限包括:
对属性的添加、删除动作的监测; 对数组基于下标的修改、对于 .length 修改的监测; 对 Map、Set、WeakMap 和 WeakSet 的支持
Vue 3.0与编译器相关的代码编译将会有一个大的提升,用一句话概括为:“摇树友好”的输出;更多的 AOT 优化;更良好的解析错误;支持 source map。
如果采用的是支持“摇树优化”的打包器,模板中使用到的那些可选特性,在生成的代码中将通过 ES的模块语法导入;而在打包后的文件中,那些没用到的可选特性就会被“摇掉”。 由于新的虚拟 DOM 实现所带来的提升,我们可以执行一些更加高效的编译耗时优化,如静态树提升(static tree hoisting)、静态属性提升(static props hoisting);以及为运行时提供一些来自编译器的提示,以此避开子组件的规范过程 (children normalization);提供VNode 快速创建路径等等。 解析器重写,以便在对模板进行编译发生错误时,可以提供错误发生的位置信息;除此之外还可以带来对模板的 source map支持;还可以支持第三方工具如 eslint-plugin-vue 和 IDE 的语言服务 (language services) 特性。
新的代码库目前只针对主流浏览器,而且我们假定他们都支持 ES2015。但是,哎,我们也知道在可预见的未来还有很多用户仍然需要支持 IE11。除了 Proxy 外,大多数 ES2015 的特性都可以用转译或者垫片的方式在 IE11 中使用。我们的计划是另外单独实现一个具有同样 API 的替代性 observer,不过是基于老式的 Object.defineProperty API;然后再通过单独构建一个使用这个实现的 Vue 3.x 版本 (build) 进行发布,不过这个单独的版本还是会有 Vue 2.x 在变动探测方面所存在的问题,所以它其实并不是一个完全兼容 3.x 的一个版本。我们也意识到这会给第三方库的作者们带来某些不便,因为他们需要考虑两个不同版本之间的兼容性问题,不过当我们真的推进到那个阶段时,那时我们肯定会确保提供一份清晰的指导。
文章浏览阅读1w次,点赞7次,收藏24次。制作Youtube-dl下载工具
文章浏览阅读360次。15天入门MySQL和高性能调优视频教程 负责过多个软件项目的研发、设计和管..._mysql调优视频
文章浏览阅读294次。《第7章 -Java集合与泛型-精品课件(PPT)-精品课件(PPT).ppt》由会员分享,可免费在线阅读全文,更多与《第7章 -Java集合与泛型-精品课件(PPT)-精品课件(PPT)》相关文档资源请在帮帮文库(www.woc88.com)数亿文档库存里搜索。1、类中容纳的元素都是Object类型,一旦把一个对象置入集合类中,它的类信息将丢失()集合类的大小可改变提示:数组是有固定长度的,在..._第七章集合和泛型ppt
文章浏览阅读1.3k次。《计算机专业教育及新技术讲座》课 程 论 文题目 对计算机专业的认识学 院 : 计算机科学与工程学院专 业 : 计算机科学与技术班 级 : 1103070A学 号 : 1110307..._计算机科学与技术论文讲座内容
文章浏览阅读377次。#include#include const bool TURE=1;const bool FAULT=0;using std::cout;using std::cin;using std::endl;class Node{//链式堆栈的节点类public:Node();//构造函数重载1Node(int , int , int ,Node *);//构造函数重载2void const get_d..._java顺序队列跳舞匹配
文章浏览阅读8k次,点赞2次,收藏9次。模拟并发请求, 来测试api性能---压力测试以及需要后端[如: php ]直接请求远程服务器[调用远程服务],但是需求是一次发送多个请求._ab工具模拟并发
文章浏览阅读203次。https://blog.csdn.net/wuzuyu365/article/details/77994201做了个java版的rgb2hsv/** RGB转HSV* 输入范围R,G,B, 0~255* 输出范围[0]:0~1,[1]:0~1,[2]:0~255*/public static float[] rgb2hsvF(int R, int G, int B){ int tMax, tMin; float H=0,S=0,V=0; flo..._rgb2hsv java
文章浏览阅读493次。普通指针的使用隐患和智能指针的解决办法普通指针在使用过程中的三个隐患:指针没有初始化。指针没有释放。释放后没有置空。智能指针的解决办法:构造函数中初始化。使用计数器,计数器为0时释放。将指针封装在智能指针中,析构时释放。标准库中的智能指针为shared_ptr,而android Binder相关代码使用wp,sp作为智能指针。android中的智能指针计数器由obje..._android::sp指针, shared_ptr
文章浏览阅读1.2w次,点赞10次,收藏17次。在对系统问题进行排查时,我发现了一个奇怪的现象:明明是对方断开请求,系统却报告一个查询失败的错误,但从用户角度来看请求的结果正常返回,没有任何问题。对这个现象深入分析后发现,这是一个基于 epoll 的连接池实现上的问题,或者说是特性 :)首先解释一下导致这个现象的原因。在使用 epoll 时,对端正常断开连接(调用 close()),在服务器端会触发一个 epoll 事件_epollrdhup
文章浏览阅读70次。java计算机毕业设计迅腾游戏交流网站源码+系统+lw+数据库+调试运行注意:该项目只展示部分功能,如需了解,文末获取源码地址。临近学期结束,还是毕业设计,你还在做java程序、网络编程。课程设计,老师的毕设要求觉得大了吗?不知道毕业设计该怎么办?系统功能的数量是否太多?没有合适的类型或系统?等等。这里,你想解决的问题,都能满足你的系统需求。原始Jsp,SSM、SpringBoot,以及HTML+CSS+JS页面设计,web毕设、课程设计源码等等都可以参考得到解决。系统功能:首页个人中心游戏分类管理游
文章浏览阅读252次。DescriptionThe whole family was excited by the news. Everyone knew grandpa had been an extremely good bridge player for decades, but when it was announced he would be in the Guinness Book of Wor_he needs a program which, when given a list of weekly rankings, finds out wh
文章浏览阅读6.2k次,点赞2次,收藏17次。参考: https://baike.baidu.com/item/%E8%B5%8B%E8%8C%83%E7%A9%BA%E9%97%B4/2285667?fr=aladdin http://blog.csdn.net/mr_hai_cn/article/details/53207307#reply http://blog.csdn.net/soudog/article/details/20..._向量之间的距离