Advertisement

Vue-cli3升级至Vue-cli4的方法总结

  •  5星
  •     浏览量: 0
  •     大小:None
  •      文件类型:None


简介:
本文档详细记录了从Vue-cli3到Vue-cli4的升级步骤和注意事项,帮助开发者顺利过渡并体验新版本带来的优化与功能更新。 这是我对以前基于vue-cli3搭建的前端H5模板进行的一次升级工作,主要任务是将项目从vue-cli3迁移到vue-cli4,并移除一些过时插件。同时,我也更新了所有使用的插件到2020年3月19日的最新版本(涉及多个webpack插件)。完成这些改动后,我还添加了一个多域名代理配置功能。 根据官方文档进行升级的过程中会遇到不少问题和挑战,但最终可以顺利完成,并直接投入使用。主要的功能包括: - webpack 打包扩展:支持 css、sass、normalize.css 以及 _mixin.scss 和 _variables.scss 文件。 - vw和rem布局方式的支持 - 多域名代理跨域设置的实现 - eslint + standard 的配置优化 - 常用库通过cdn引入 以上升级工作完成后,可以确保项目更加现代化,并且具备了更多的灵活性与可维护性。

全部评论 (0)

还没有任何评论哟~
客服
客服
  • Vue-cli3Vue-cli4
    优质
    本文档详细记录了从Vue-cli3到Vue-cli4的升级步骤和注意事项,帮助开发者顺利过渡并体验新版本带来的优化与功能更新。 这是我对以前基于vue-cli3搭建的前端H5模板进行的一次升级工作,主要任务是将项目从vue-cli3迁移到vue-cli4,并移除一些过时插件。同时,我也更新了所有使用的插件到2020年3月19日的最新版本(涉及多个webpack插件)。完成这些改动后,我还添加了一个多域名代理配置功能。 根据官方文档进行升级的过程中会遇到不少问题和挑战,但最终可以顺利完成,并直接投入使用。主要的功能包括: - webpack 打包扩展:支持 css、sass、normalize.css 以及 _mixin.scss 和 _variables.scss 文件。 - vw和rem布局方式的支持 - 多域名代理跨域设置的实现 - eslint + standard 的配置优化 - 常用库通过cdn引入 以上升级工作完成后,可以确保项目更加现代化,并且具备了更多的灵活性与可维护性。
  • 详解将项目vue-cli3正确
    优质
    本文详细介绍了如何将现有Vue.js项目迁移到使用Vue CLI 3的新环境中的步骤和技巧,帮助开发者轻松完成项目升级。 我以为升级Vue CLI 3的步骤如下:创建一个Vue CLI 3项目,并按照原有项目的配置选择相应的选项进行迁移;将目录src移动到src,static移到public中;对比新旧package.json文件后执行yarn install命令完成升级。 然而,在运行项目时遇到了错误:“You are using the runtime-only build of Vue...”,这提示我需要手动编写Vue CLI 3的webpack相关配置文件。于是根据官方文档指引,在项目的根目录下创建了vue.config.js,并进行了基本设置:chainWebpack: co,以此来解决遇到的问题。
  • Vue CLI2到Vue CLI3与步骤
    优质
    本文详细介绍了如何将基于Vue CLI2构建的项目迁移到Vue CLI3的新版本中,涵盖了迁移过程中可能遇到的问题及解决方案。适合有一定Vue.js开发经验的技术人员阅读。 本段落主要介绍了如何将Vue CLI2升级至Vue CLI3的方法步骤,并通过示例代码进行了详细的讲解。文章内容对学习或工作中遇到此类问题的读者具有一定的参考价值。希望需要的朋友能从中学到所需的知识。
  • Vue-cli4中使用全局LESS变量配置
    优质
    本教程详细介绍了如何在基于Vue-cli 4搭建的项目中配置和使用全局LESS变量,帮助开发者简化样式管理。 需求:在Navgation.vue中使用global.less中的变量 对于vue-cli3的配置方法,请参考相关文档。 对于vue-cli4的配置方法如下: 1. 安装 style-resources-loader 插件: ``` npm i style-resources-loader -D ``` 2. 在 vue.config.js 文件中添加以下配置,如果该文件不存在则需要创建它(注意不要更改文件名): ```javascript const path = require(path); module.exports = { lintOnSave: false, chainWebpack: config => { // 配置部分省略,请根据实际情况调整。 } }; ``` 请确保按照上述说明进行操作,以使全局样式变量在Navigation.vue中可用。
  • 使用 Vue Cli3 创建项目步骤
    优质
    本教程详细介绍了如何利用Vue CLI 3快速搭建一个Vue.js项目,包括初始化、配置及开发环境设置等步骤。 Vue CLI是一个用于快速开发Vue.js应用的完整系统。本段落主要介绍了使用Vue Cli3创建项目的步骤方法,具有很高的实用价值,需要的朋友可以参考一下。
  • Vue编写H5页面
    优质
    本文档是对使用Vue框架开发H5页面过程中常用技巧和经验进行归纳总结,旨在帮助开发者提高效率。 以下是关于如何使用Vue编写H5页面的方法分享,希望能对大家有所帮助。 1. 当收到设计师提供的UI设计图后,前端开发的第一步通常是进行布局和样式的设计与实现。对于大部分前端工程师来说,这已经是一个相对熟悉且容易解决的问题了。在移动端的布局上,相对于PC端而言要简单一些,但关键在于如何针对不同的设备进行适配。 2. 之前介绍过一种适用于移动端的rem布局方案,这是网易H5页面的一种适配方法。但在实践中发现淘宝开源的一个可伸缩性更强且使用更为简便的方法效果更佳。该方案的核心思想是:根据屏幕宽度除以750得到的比例等于所需字体大小与基准字体大小之间的比例关系,从而动态调整html元素的font-size属性。 3. 另一个解决方案则是通过设备像素比来设置页面缩放(scale)值,并保持视口为device-width。
  • 在同一台电脑上实现Vue-CLI2与Vue-CLI3共存
    优质
    本文将详细介绍如何在同一台电脑上同时安装和使用Vue-CLI2和Vue-CLI3版本,解决项目兼容性问题,为开发者提供实用的操作指南。 本段落主要介绍了如何在一台电脑上同时安装并使用vue-cli2与vue-cli3的方法,并通过示例代码进行了详细的讲解。文章内容对于学习或工作中需要同时处理这两种版本的开发者具有一定的参考价值,有需求的朋友可以继续阅读以获取更多信息。
  • Vue设置接口域名
    优质
    本文档详细总结了在Vue项目中配置和更改接口域名的各种方法,帮助开发者轻松应对不同的环境需求。 在Vue项目中配置接口域名的方式如下:首先,在开发环境下使用运行脚手架自带的Node.js后台环境并通过`proxyTable`解决跨域问题。然而,上线或进入生产环境后更改域名会变得复杂,因此需要进行一些配置来简化这一过程。 具体操作步骤包括: 1. 修改两个文件以启动时根据环境自动切换域名。 2. 在开发环境下,在config/index.js 文件中进行如下配置: 3. 其他相关配置内容。 这样设置之后,Vue项目在不同环境中可以灵活地使用不同的接口地址。
  • Vue设置接口域名
    优质
    本文档详细记录了在使用Vue框架开发项目时,如何灵活高效地配置和更改接口域名的各种方法。适合中级开发者参考。 本段落分享了关于Vue配置接口域名的方法及相关的知识点总结,有需要的朋友可以参考操作。
  • 关于Vue注册组件
    优质
    本文档对Vue框架中的注册组件方法进行了全面总结,旨在帮助开发者深入理解并灵活运用各种注册技巧,提升开发效率。 Vue.js 是一款流行的前端JavaScript框架,用于构建用户界面。在Vue应用中,组件是构建UI的基本单元,可以复用和组合。本段落将详细介绍Vue组件的注册方式。 1. 全局注册 全局注册组件意味着在整个Vue应用程序中,一旦组件被注册,则可以在任何地方使用。这种注册方式应在Vue实例化之前进行,确保组件可以在任何Vue实例中引用。全局注册的基本语法如下: ```javascript Vue.component(tagName, { 组件选项, template:
    我是全局注册的组件
    , 或者使用其他选项,如: data: function () {...}, methods: {...} }) ``` 优点在于方便复用组件,但缺点是如果项目中有过多的全局组件可能导致命名冲突。 2. 局部注册 局部注册仅限于Vue实例内部,这样可以限制组件的作用域,并避免全局污染。在创建Vue实例时,通过`components`选项来注册组件: ```javascript var Child = { template:
    我是局部注册的组件
    } new Vue({ ... components: { child-component: Child } }) ``` 局部注册的组件只能在其父组件模板内使用,并不能被其子组件或同级组件访问,这有助于保持代码模块化。 3. 扩展实例 Vue的`extend`方法允许你创建一个新的Vue实例,继承自已有的实例。这对于混合(mixin)特别有用,混合可以将一组功能添加到多个组件中: 首先定义一个混合对象,然后在组件中使用 `Vue.extend`扩展它: ```javascript var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log(hello from mixin!) } } } var Component = Vue.extend({ mixins: [myMixin] }) var component = new Component() ``` 在上面的例子中,`Component`组件会拥有 `myMixin`中的 `created` 钩子和 `hello` 方法。 总结:Vue组件的注册是构建应用的关键步骤。全局注册适用于广泛应用的组件,局部注册则更适用于模块化的组件管理;扩展实例和使用混合允许我们复用和组合组件的功能。理解并熟练掌握这些注册方式将有助于编写更加高效、可维护的Vue应用,在实际开发中应根据项目的具体需求与组件的复用程度来选择合适的策略。