精华内容
下载资源
问答
  • vue cli 3 升级vue cli 4 方法步骤及升级点总结

    万次阅读 多人点赞 2019-10-26 18:45:44
    vue cli 3 升级vue cli 4 指南 vue cli 3 升级vue cli 4 方法步骤及升级点总结 vue-cli 3升级vue-cli 4 官方英文升级文档,中文滞后 一.首先,在全局安装最新的 Vue CLI: npm install -g @vue/cli # OR yarn ...

    vue cli 3 升级到 vue cli 4 方法步骤及升级点总结

    官方升级英文文档中文文档相对滞后。

    简介:vue cli 4 官方已经更新有一段时间了,现在是4.0.5 版本,看了官方文档大概有二十几点的更新,还是干货满满呀,值得升级一下,下面是升级步骤。

    一.首先,在全局安装最新的 Vue CLI:

    npm install -g @vue/cli
    # OR
    yarn global add @vue/cli
    

    检查安装的版本

    vue -V  # 输出:@vue/cli 4.x.x  说明@vue/cli 4安装成功( vue cli 3的版本会输出 3.x.x )
    

    踩坑记录

    npm install -g @vue/cli 执行成功,但是执行 vue -V 输出的还是3.5.6(我以前安装的版本),

    于是又重新执行 npm install -g @vue/cli,显示成功,执行 vue -V 输出的还是3.5.6

    一脸懵逼 ,然后重启电脑,再执行vue -V 输出 @vue/cli 4.0.5,解决 。

    二.在项目根目录下执行

    vue upgrade
    

    然后出现
    在这里插入图片描述

    提示 继续升级这些插件吗? 输入 Y 即可.

    三.等步骤二 执行完会发现主要有 2 个文件被修改

    1.文件 babel.config.js

    主要是 babel 的预设由@vue/app 改成了@vue/cli-plugin-babel/preset

    原来的

    module.exports = {
      presets: [
        '@vue/app', //  这行
        [
          '@babel/preset-env',
          {
            useBuiltIns: 'entry'
          }
        ]
      ]
    }
    

    升级后的

    module.exports = {
      presets: [
        '@vue/cli-plugin-babel/preset', //  这行
        [
          '@babel/preset-env',
          {
            useBuiltIns: 'entry'
          }
        ]
      ]
    }
    

    2.文件 package.json (package-lock.json 也会更改)

    主要是依赖升级

    原来的

    {
      "@vue/cli-plugin-babel": "^3.11.0",
      "@vue/cli-plugin-eslint": "^3.11.0",
      "@vue/cli-service": "^3.11.0"
    }
    

    升级后的

    {
      "@vue/cli-plugin-babel": "^4.0.5",
      "@vue/cli-plugin-eslint": "^4.0.5",
      "@vue/cli-service": "^4.0.5"
    }
    

    四.然后启动项目

    npm run serve
    

    然后报下面的错

    在这里插入图片描述

    1.第一个错(警告)

     WARN  A new version of sass-loader is available. Please upgrade for best experience.
    

    这行是 vue cli 4 升级了自己的依赖 sass-loader 导致的

    它把 sass-loader^7.x.x 的版本升级到了 ^8.0.0,而我项目中使用的是^7.1.0

    所以升级一下自己项目的 sass-loader 就好了

    执行下面命令即可

    npm i sass-loader@8.0.0 -D
    

    2.然后第二个错说没有安装core-js

    vue cli 4core-js^2.x.x 的版本升级到了 ^3.x.x

    于是安装一下

    npm i core-js
    

    然后重启项目还是不行,看了下官方文档和 babel 有关

    main.js 代码中

    import '@babel/polyfill'
    

    隐藏这个代码

    重启好了

    然后把 @babel/polyfill 换成 babel-polyfill 即可

    npm i babel-polyfill
    

    main.js 代码中 改为

    import 'babel-polyfill'
    

    五.vue cli 4 主要升级点总结

    1."@vue/cli-plugin-babel", "@vue/cli-plugin-eslint", "@vue/cli-service"v3 的版本升级到了 v4

    2.sass-loaderv7 的版本升级到了 v8

    3.core-jsv2 的版本升级到了 v3

    4.webpack-chainv4 的版本升级到了 v6

    5.css-loaderv1 的版本升级到了 v3

    6.url-loaderv1 的版本升级到了 v2

    7.file-loaderv3 的版本升级到了 v4

    8.copy-webpack-pluginv4 的版本升级到了 v5

    9.terser-webpack-pluginv1 的版本升级到了 v2

    10.@vue/cli-plugin-pwav3 的版本升级到了 v4

    11.新增插件 vue add vuex vue add router

    12.pug-plain已重命名为pug-plain-loader

    13.默认目录结构已更改

    src/store.js 改为 src/store/index.js

    src/router.js 改为 src/router/index.js

    14.由于兼容性原因,仍支持 router&routerHistoryMode 选项 preset.json

    但是现在建议使用它来 plugins: { '@vue/cli-plugin-router': { historyMode: true } }

    获得更好的一致性

    15.api.hasPlugin('vue-router')不再受支持,现在 api.hasPlugin('router')

    16.lintOnSave 选项的默认值(未指定时)从 true 更改为 default

    17.废弃vue-cli-service test:e2e

    18.@vue/cli-plugin-e2e-nightwatch Nightwatch.js已从0.9升级到1.x

    19.@vue/cli-plugin-unit-mocha 升级到Mocha 6

    20.@vue/cli-plugin-unit-jest jestv23 升级到v24

    21.@vue/cli-plugin-typescript 更好的ts(x)支持 ,胜过js(x)

    参考链接

    vue cli 4 官方英文升级文档

    展开全文
  • vue cli升级webapck4总结

    2020-08-27 17:57:57
    主要介绍了vue cli升级webapck4的步骤以及需要注意的地方,大家可以跟着操作学习下。
  • 1. 为什么 vue升级到 3.x 以上版本? 这里关于一篇 vue 实战教程 :https://www.bilibili.com/video/BV1EE411B7SU?t=111&p=5 如果vue 版本为 2.x 时,无法使用 vue ui 指令生成 下面为 vue 3.x 以上版本才能...

    1. 为什么 vue 要升级到 3.x 以上版本?

    这里关于一篇 vue 实战教程 :https://www.bilibili.com/video/BV1EE411B7SU?t=111&p=5
    如果vue 版本为 2.x 时,无法使用 vue ui 指令生成

    下面为 vue 3.x 以上版本才能执行,并且显示的 UI 页面效果

    在这里插入图片描述
    在这里插入图片描述

    2. 如果当前mac系统下的 vue 版本为2.x

    查看vue版本指令 注意:这里V是大写

    vue -V 
    

    执行升级指令

    npm i -g @vue/cli
    

    会出现如下效果
    在这里插入图片描述
    正常情况下,mac系统执行指令无法将 vue 升级

    3. 如何将 vue 优雅的升级到 3.x 以上的版本

    3. 1 第一步:找到 vue的路径

    which vue
    

    在这里插入图片描述

    3. 2 第二步:cd url (/usr/local/bin) 进到vue项目上级的文件夹

    注意:这里进行一个知识的扫盲,usr是Unix System Resource并不是user的缩写(这里存放系统级别的程序文件)

    cd /usr/local/bin
    

    在这里插入图片描述

    3. 3 第三步:rm -rf vue 彻底删除vue文件夹及其所有文件

    rm -rf vue 
    

    3. 4 第四步:重新安装 vue 最新版本

    使用sudo时,会输入本机的密码(如果不使用sudo 则仍旧报错)

    sudo npm install -g @vue/cli
    

    3. 5 第五步:检查是否安装成功

    vue -V
    

    在这里插入图片描述

    4. 启动 vue ui 界面

    在这里插入图片描述

    展开全文
  • vue 2项目升级 vue 4

    2020-03-27 11:56:21
    1、写在vue2 ...2、安装vue4 npm install -g @vue-cli 3、新建项目 npm creat xxx 4、 5、 Vue CLI v3.0.0-beta.6 ? Please pick a preset: (Use arrow keys) > xs-default (vue-router, vuex, stylus, ...

    1、写在vue2
    npm uninstall vue-cli -g
    2、安装vue4
    npm install -g @vue-cli
    3、新建项目
    npm creat xxx
    4、是否选择使用淘宝镜像
    5、

    Vue CLI v3.0.0-beta.6
    ? Please pick a preset: (Use arrow keys)
    > xs-default (vue-router, vuex, stylus, babel, pwa, eslint, unit-jest) // 这是我运行过之后的默认设置,第一次执行create是没有的
      default (babel, eslint)
      Manually select features
    

    按键盘上下键选择默认(default)还是手动(Manually),如果选择default,一路回车执行下去就行了(注:现在vue-cli3.0默认使用yarn下载),这里我选择手动,
    6、选择配置,这时你会看见一些选项,
    你要集成什么就选就行了,我这里选个我比较常用的(注:空格键是选中与取消,A键是全选)

    ? Please pick a preset: Manually select features
    ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
    >( ) Babel         **Es6转Es5
    ( ) TypeScript    **js超集
     ( ) Progressive Web App (PWA) Support       **渐进式Web应用
     ( ) Router       **路由
     ( ) Vuex         **状态管理
     ( ) CSS Pre-processors       **CSS预处理
     ( ) Linter / Formatter          **规范类型
     ( ) Unit Testing          ***单元测试
     ( ) E2E Testing        **E2E测试,即端对端测试
    

    7、

    Use class-style component syntax? (Y/n):是否使用babel做转义 yes
    

    8、TypeScript

    Use Babel alongside TypeScript (required for modern mode,auto-detected polyfills, transpiling JSX)? (Y/n) :是否使用class风格的组件语法 yes
    

    9、Router 路由管理器

    ? Use history mode for router?       ***路由使用历史模式
    

    10、CSS Pre-processors css预处理

    选择CSS 预处理类型:Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)  
    选项:
    	Less
    	Sass
    	Stylus
    
    

    11、 Linter / Formatter 代码风格、格式校验

    选择Linter / Formatter类型:Pick a linter / formatter config:
    选项:
    	TSLint
    	ESLint with error prevention only  仅错误预防
    	ESLint + Airbnb config  Airbnb配置
    	ESLint + Standard config 标准配置
    	ESLint + Prettier
    选择lint方式:Pick additional lint features
    选项:
    	Lint on save 保存时检查
        Lint and fix on commit 提交时检查
    
    

    12、Unit Testing 单元测试

    选择unit testing类型:Pick a unit testing solution: (Use arrow keys)
    选项:
    	Mocha + Chai  
        Jest 
    

    13、 E2E Testing E2E(End To End)即端对端测试

    选择unit testing类型:Pick a unit testing solution: (Use arrow keys)
    选项:
    	Mocha + Chai  
        Jest 
    

    14、选择 Babel, PostCSS, ESLint 等自定义配置的存放位置

    选择unit testing类型:Pick a unit testing solution: (Use arrow keys)
    选项:
    	Mocha + Chai  
        Jest 
    

    15、 将此作为将来项目的预置吗?

    Save this as a preset for future projects? 
    选项: In dedicated config files 在专用的配置文件中
     In package.json 在package.json
    

    16、保存预设为

    save preset as
    
    展开全文
  • 如何升级Vue的版本 vue2.9.6升级vue3.0卸载原来的版本安装新版本通过GUI界面创建项目 卸载原来的版本 由于目前的vue3.0支持通过UI界面创建vue项目,所以对于学vue前端的人来说是相当大的诱惑。界面效果如下图所示 ...

    如何升级Vue的版本 vue2.9.6升级到vue3.0

    卸载原来的版本

    由于目前的vue3.0支持通过UI界面创建vue项目,所以对于学vue前端的人来说是相当大的诱惑。界面效果如下图所示
    在这里插入图片描述

    那么如何更换你的vue版本呢?
    首先需要卸载你之前的vue2.9.6
    打开cmd窗口输入如下命令

    npm uninstall vue-cli -g
    

    然后运行命令vue-V会发现不是可执行的命令,就说明已经卸载成功了

    安装新版本

    首先你要确保你的Node.js的版本高于最低要求的版本
    Vue CLI 3需要 nodeJs ≥ 8.9 (官方推荐 8.11.0+,你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本)。
    运行命令
    这里的命令直接用cnpm,不要用npm,这个我亲自试验过,npm装的话装不上去。

    cnpm install -g @vue/cli
    

    然后运行命令vue-V查看vue的版本
    如果显示版本就说明成功了,我这里装过之后直接到最高版本了
    在这里插入图片描述

    通过GUI界面创建项目

    cmd输入命令

    vue ui
    

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • Vue版本升级

    2020-04-25 11:37:59
    Vue版本升级 bug 因为vue@2.6.0版本有提供了大量新的功能,所以我想直接用npm升级我自己的vue版本,导致vue-router解析错误。 解决方式 将版本号更新升级vue@2.6.10,就可以解决vue@2.6.0的vue-router解析的问题 ...
  • vue2升级vue3

    2020-12-18 18:30:12
    一.vue cli2升级vue cli3 因为安装包的不同,所以需要先删除vue-cli安装vue-cli3.0。 1.先升级npm的版本 npm install -g npm 2.再卸载之前的vue cli 2.9.6 npm uninstall -g @vue/cli 若是mac可能会报错,没有...
  • Vue脚手架升级

    千次阅读 2020-06-02 23:20:51
    Vue脚手架升级 第一步 查看自己脚手架版本 vue --version 第二步:卸载原来的脚手架 npm uninstall vue-cli -g 第三步:安装脚手架 npm i @vue/cli -g 第四步查看Vue-cli版本即可
  • vue-cli 构建vue项目升级webpack4

    千次阅读 2018-08-17 14:14:16
    现在比较轻松又在为新的项目做准备,webpack4 搞一发。 vue-cli 搭建项目 还是使用 vue 的自带脚手架进行项目初始化 我本地vue-cli 版本是 2.9.1 项目初始化成功。看一下composer.json 可以看...
  • Vue 项目从 Vue CLI 2 升级Vue CLI 4

    千次阅读 2020-01-11 14:57:48
    介绍如何将使用 Vue CLI 2 构建的项目升级Vue CLI 4 更多精彩 更多技术博客,请移步 IT人才终生实训与职业进阶平台 - 实训在线 相关网址 介绍 - Vue CLI 配置参考 - Vue CLI 升级细则 实际升级起来还算比较...
  • vue2.0升级vue3.0报错

    2019-08-01 12:31:10
    vue2.0升级vue3.0报错 报错误[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the ...
  • vue升级

    2019-04-11 20:04:21
    1.先卸载 npm uninstall vue-cli -g 2.重新安装(记得要用npm哦). npm install -g @vue/cli 打开终端(cmd),输入vue -V 就可以看到版本已经升级了.
  • 层出不穷,公司原项目使用vuecil2版本开发,elementUI等一系列库版本太低,也脱离世界很久远了,新版本库需要webpack4等环境,而老版本配置起来bug很多,在使用过程中很多东西都不能实现,所以升级真的是迫在眉睫;...
  • 主要介绍了详解基于Vue cli生成的Vue项目的webpack4升级,本文将详细介绍从webpack3到webpack4升级过程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue2升级vue3.x

    千次阅读 2019-08-08 15:26:57
    无需要装卸 vue2.x : npm uninstall -g vue-cli 可以直接升级 npm install -g @vue/cli
  • Vue 2升级 Vue 3初探小细节.pdf
  • Vue项目升级到Webpack 4.x初步踩坑总结

    万次阅读 2018-06-26 21:15:54
    Vue项目升级到Webpack 4.x初步踩坑总结,包括压缩JS/CSS,分离CSS/提取CSS到单独文件,分离Chunk,以及vue-loader 15.x版本的使用和基于vue项目的修改
  • vue1.0升级vue2.0

    千次阅读 2017-09-06 20:07:55
    1.配置文件修改 1) Package.json文件修改 2) Build目录修改 3) Config目录修改 2.升级方法 升级的方法很简单,利用2.0的脚手架生成一个空文件夹,之后把pachage.json、build目录... 3.vue1.0和vue2.0的区别
  • vue项目升级

    千次阅读 2019-06-06 18:13:36
    一、需要升级的依赖包 项目中使用的依赖包版本比较旧,在新的版本中一些指令被废弃了,也添加了一些新的指令用法,修复了之前版本存在的局限性。如果不定期升级版本,后期维护起来会很麻烦。 依赖包 旧版本号 新...
  • Vue2升级Vue3

    千次阅读 2020-10-29 21:38:48
    如题,Vue3已经是beta版了,想玩玩Vue3,就对原来Vue2的项目进行了升级。参考了慕课网Dell Lee的课程内容和Vue3官方文档。 一、main.js中的变化 从技术上讲,Vue 2 没有“app”的概念,我们定义的应用只是通过 new ...
  • 2018/6/19 升级webpack, 使用 webpack4 推荐新的插件mini-css-extract-plugin 安装 #克隆该项目 git clone https://github.com/iTaster/webpack4-template # 安装依赖关系 npm install # 编译开发环境 npm run dev ...
  • 项目vue2升级vue3记录之前的包版本更新版本嘛,多简单遇到的几个坑现在的package.json 之前的包版本 看视频的时候发现vue3的一些基础配置代码有变,比如出使用createApp,app.use(),app.mount(’#app’)等,跟我现在...
  • 升级项目:vue2+webpack4+babel7 最近需要将vue项目升级,以获得更好的构建性能和开发便利,由于网上没有一个可以参考的实用用性文章,故此将升级项目过程记录并分享给各位,希望对各位有用。也欢迎关注本人的公众号...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,729
精华内容 9,491
关键字:

vue4升级

vue 订阅