精华内容
下载资源
问答
  • vue项目升级

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

    一、需要升级的依赖包

    项目中使用的依赖包版本比较旧,在新的版本中一些指令被废弃了,也添加了一些新的指令用法,修复了之前版本存在的局限性。如果不定期升级版本,后期维护起来会很麻烦。

    依赖包旧版本号新版本号升级命令
    vue2.5.162.6.10npm update vue
    vue-router3.0.13.0.3npm update vue-router
    vuex3.0.13.1.1npm update vuex
    @vue/cli3.0.0-rc.33.8.2npm update @vue/cli

    二、升级方式

    1. 手动修改pageage.json文件中依赖项版本号。
    2. 命令行升级。

    三、node版本升级

    1. 查看node的安装路径:which node
    2. 查看远程node版本:nvm ls-remote
    3. 查看本地安装的node版本:nvm list
    4. 安装不同版本node:nvm install v8.11.3
    5. 选定node版本作为开发环境:nvm use 8.11.3
    6. 卸载对应的node版本:nvm uninstall v8.11.3
    7. 切换本地最新node版本:nvm use node
    
    展开全文
  • vue项目升级(02):vue项目中的旧版本 npm包怎么持续升级维护 前言 话说身为一个站在巨人的肩膀上的API工程师,在日常开发中,肯定会使用很多插件,如果你当前项目的插件已经落后新版很多代了,怎么办? 之前介绍了vue...

    前言

    话说身为一个站在巨人的肩膀上的API工程师,在日常开发中,肯定会使用很多插件,如果你当前项目的插件已经落后新版很多代了,怎么办?

    之前介绍了vuecil3的语法和配置,而我的项目升级是直接替换了整个src文件夹来完成的,但是那我们插件包怎么升级?

    那这篇来介绍vue项目中的npm包怎么持续的升级维护

    一、替换package.json

    升级过程后,将旧版本的packag.json文件中的npm包相关代码复制到新版本;

    cnpm installnpm install下载包,然后启动项目,看是否正常。

    这时候的插件也是老版本的,所以我们还需要升级npm包,身为优秀的API工程师的我,肯定不会用npm update这种来一个一个升级啊,肯定找个合适的插件让它来帮我升级~

    下面介绍升级及之后维护的必备插件:

    二、插件:npm-check

    2.1 安装升级插件-npm-check

     npm install -g npm-check
    

    npm-check 检查是否安装完成
    在这里插入图片描述

    2.2 npm-check 升级

    • 操作命令概览
      -u, --update          交互更新
      -y, --update-all      全部更新
      -g, --global          查看全局模块
      -s, --skip-unused     跳过检查未使用的包
      -p, --production      跳过开发环境依赖模块.
      -d, --dev-only        只看devDependencies;
    
    • 常用命令
    >> npm-check -u
    

    在这里插入图片描述
    这样会检测到所有npm包的情况,最后使用空格选择所要升级的包,回车确认,这样你就会获得一个新版本框架下的包均为最新的项目,
    在这里插入图片描述
    然后看新的版本包是否有语法改变,去完善即可。

    三、内网环境更换镜像库

    由于我们的项目是在内网环境开发,特记录一下如何在内网环境更换npm镜像地址;

    3.1 临时更换npm镜像地址

    npm install <registry-name> --registry https://registry.npmjs.org
    

    3.2 永久更换npm镜像地址

    npm config set registry https://registry.npmjs.org  
    npm config list
    

    小结

    这篇就主要讲npm包怎么持续升级维护以及内网环境更换镜像库,之后继续记录vue项目插件的升级及打包优化…

    over~有问题留言

    如果本文对你有帮助的话,请不要忘记给我一键三连点赞打call哦~o( ̄▽ ̄)do

    展开全文
  • vue项目升级element-ui

    2020-05-07 11:15:25
    由于之前项目使用的element-ui 1.X版本,目前1.X的版本已停止维护,所以项目升级到最新2.X版本。 以下是对vue项目,element-ui 1.X版本升级到2.X版本的记录。 ① 卸载老版本 npm uninstall element-ui ② 安装最新...

    由于之前项目使用的element-ui 1.X版本,目前1.X的版本已停止维护,所以项目升级到最新2.X版本。

    以下是对vue项目,element-ui 1.X版本升级到2.X版本的记录。

    ① 卸载老版本

    npm uninstall element-ui
    

    ② 安装最新版本

    npm install element-ui -S
    

    ③ 修改项目中main.js中theme-default修改为theme-chalk

    import ‘element-ui/lib/theme-chalk/index.css’
    在这里插入图片描述
    如果对你有帮助,公众号搜索:前端早知道笔记 或扫描公众号二维码:在这里插入图片描述

    展开全文
  • 如何在已有的项目更新项目的插件,不少刚入门的人一头雾水,本文档提供三步式解决方案,一看就懂。
  • 最近需要将vue项目升级,以获得更好的构建性能和开发便利,由于网上没有一个可以参考的实用用性文章,故此将升级项目过程记录并分享给各位,希望对各位有用。也欢迎关注本人的公众号:前端学海 根据多次尝试总结出的...

    项目升级目标:

    原版项目:vue2+webpack3+babel6
    升级项目:vue2+webpack4+babel7

    最近需要将vue项目升级,以获得更好的构建性能和开发便利,由于网上没有一个可以参考的实用用性文章,故此将升级项目过程记录并分享给各位,希望对各位有用。也欢迎关注本人的公众号:前端学海

    根据多次尝试总结出的经验,先升级与webpack无关的组件,然后再升级webpack,注意webpack不同的版本需要的webpack-cli也不同,否则会产生兼容报错,切记!!!

    最好按照一下给出的升级顺序进行,每个包后面的版本为我升级成功的包的版本,大部分是我升级时的最高稳定版,给位可以根据自己的需要,升级到指定版本。小心升级哦~

    项目包的升级和卸载:

    babel部分:

    (1)babel-core卸载掉,从新安装@babel/core
    npm un babel-core // 卸载 不然不同版本的core会发生冲突,构建失败
    
    npm i -D @babel/core // 重新安装babel7的core
    npm i -D babel-loader@8.1.0 // babel7需要babel-loader8以上的版本,否则报错
    npm i -D @babel/polyfill  "@babel/polyfill": "^7.10.1", 
    npm i -D @babel/runtime   "@babel/runtime": "^7.10.2",
    npm i -D @babel/plugin-transform-runtime "@babel/plugin-transform-runtime": "^7.10.1",
    npm i -D @babel/preset-env "@babel/preset-env": "^7.10.2",
    
    // 安装后,卸载不需要的babel6的相关插件,进行.babelrc 的文件配置
    {
      "presets": [
        ["@babel/env", { // babel7的写法,
          "targets": {
            "edge": "17",
            "firefox": "60",
            "chrome": "67",
            "safari": "11.1"
          },
          "corejs": "2", // 指定编译的corejs版本,否则构建线上环境时会报警告
          "useBuiltIns": "usage"
        }]
      ],
      "plugins": ["transform-vue-jsx", "@babel/plugin-transform-runtime"]
    }
    
    // 如果编译报错:
     this.setDynamic is not a function
     Cannot find module '@transform-runtime/babel-plugin'
     // 诸如此类,大部分均为部分配置写法未从babel6转为babel7的写法问题
    

    到这里基本的babel的替换完成,项目启动成功

    webpack部分:

    注意:webpck4,需要升级其他包,否则webpack4不支持,会运行报错,如
    
    webpack-dev-server、vue-loader 15版本以上html-webpack-plugin最新版 stylus-loader最新版
    
    1、安装全局webpack-cli cnpm install webpack-cli -g
    2、安装项目webpack-cli cnpm install --save-dev webpack-cli
    3、升级webpack npm install webpack@4.43.0 -D
    4、升级 webpack-dev-server cnpm install webpack-dev-server@3.1.14 -D // webpack4需要webpack-dev-server 3以上的版本,否则不兼容会报错
    5、升级vue-loader cnpm install vue-loader@15.0.0 -D
    6、cnpm install html-webpack-plugin@3.2.0 -D
    7、安装mini-css-extract-plugin -D 替换卸载 extract-text-webpack-plugin
    8、升级 stylus-loader cnpm i stylus-loader@3.0.2 -D 最新版本
    

    修改原项目的配置,和删除废弃的插件配置:

    1、utils.js

    // const ExtractTextPlugin = require('extract-text-webpack-plugin') // dl删除
    const MiniCssExtractPlugin = require('mini-css-extract-plugin') // dl新增
    
     if (options.extract) {
          // return ExtractTextPlugin.extract({ dl 删除
          //   use: loaders,
          //   fallback: 'vue-style-loader',
          //   publicPath: '../../'
          // })
          return [MiniCssExtractPlugin.loader].concat(loaders) // dl新增
        } else {
          return ['vue-style-loader'].concat(loaders)
        }
    

    2、webpack.dev.conf.js

    const { VueLoaderPlugin } = require('vue-loader') // dl新增
    mode: 'development', // 新增
    new VueLoaderPlugin(), //dl新增
    

    3、webpack.base.conf.js

    {
          test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
          loader: 'url-loader',
          exclude: /node_modules/,
          options: {
            limit: 10000,
            publicPath: '../../', // 添加路径,否则element icon图标路径不对,打包后不显示,
            name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
          }
        },
    

    4、webpack.prod.conf

    const { VueLoaderPlugin } = require('vue-loader') // dl新增
    const MiniCssExtractPlugin = require('mini-css-extract-plugin') // dl 新增
    // const ExtractTextPlugin = require('extract-text-webpack-plugin') // dl 删除
    mode: 'production', // 新增
     optimization: { // dl新增
        runtimeChunk: {
          name: 'manifest'
        },
        minimizer: [
          new UglifyJsPlugin({
            cache: true,
            parallel: true,
            sourceMap: config.build.productionSourceMap,
            uglifyOptions: {
              warnings: false
            }
          }),
          new OptimizeCSSPlugin({
            cssProcessorOptions: config.build.productionSourceMap
              ? { safe: true, map: { inline: false } }
              : { safe: true }
          }),
        ],
        splitChunks: {
          chunks: 'async',
          minSize: 30000,
          minChunks: 1,
          maxAsyncRequests: 5,
          maxInitialRequests: 3,
          name: false,
          cacheGroups: {
            vendors: {
              test: /[\\/]node_modules[\\/]/,
              name: 'vendor',
              chunks: 'initial',
              priority: -10
            }
          }
        }
      },
      plugins: [
           new VueLoaderPlugin(), //dl新增
           // new ExtractTextPlugin({ dl--删除
        //   filename: utils.assetsPath('css/[name].[contenthash].css'),
        //   // Setting the following option to `false` will not extract CSS from codesplit chunks.
        //   // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
        //   // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
        //   // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
        //   allChunks: true,
        // }),
        new MiniCssExtractPlugin({ // dl 新增
          filename: utils.assetsPath('css/[name].css'),
          chunkFilename: utils.assetsPath('css/[name].[contenthash].css')
        }),
         //--------------------dl 删除
        // new webpack.optimize.CommonsChunkPlugin({
        //   name: 'vendor',
        //   minChunks (module) {
        //     // any required modules inside node_modules are extracted to vendor
        //     return (
        //       module.resource &&
        //       /\.js$/.test(module.resource) &&
        //       module.resource.indexOf(
        //         path.join(__dirname, '../node_modules')
        //       ) === 0
        //     )
        //   }
        // }),
        // // extract webpack runtime and module manifest to its own file in order to
        // // prevent vendor hash from being updated whenever app bundle is updated
        // new webpack.optimize.CommonsChunkPlugin({
        //   name: 'manifest',
        //   minChunks: Infinity
        // }),
        // // This instance extracts shared chunks from code splitted chunks and bundles them
        // // in a separate chunk, similar to the vendor chunk
        // // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
        // new webpack.optimize.CommonsChunkPlugin({
        //   name: 'app',
        //   async: 'vendor-async',
        //   children: true,
        //   minChunks: 3
        // }),
      ]
      
      
    
    
    可能会报错:
    Cannot find module 'webpack-cli/bin/config-yargs'
    直接删除node_modul包,重新下载即可
    

    我的项目到这里就运行正常了,仅仅是对vue-cli脚手架的基本配置进行升级,也没有什么大的优化,只是升级,基本满足一般的项目使用,

    后期开始进行逐个优化,个人建议:一定要先升级完babel,再来升级webpack, 根据我之前几次失败的折腾总结的经验。

    后面一篇文章,会分享我升级后的vue项目的具体优化步骤,升级了哪些?有什么作用?效果怎样?

    欢迎各位批评指正!!!
    
    展开全文
  • vue项目升级更新element ui版本

    万次阅读 2019-03-03 21:17:40
    一、升级element-ui需要先卸载原先的版本,在cmd中输入npm uninstall element-ui 二、然后重新安装element-uinpm i element-ui -S 三、最后在main.js中把default修改为theme-chalk ...
  • 主要给大家介绍了关于如何快速将Vue项目升级到webpack3的方法步骤文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
  • Vue项目升级到Webpack 4.x初步踩坑总结

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

    千次阅读 2018-08-17 14:14:16
    原因 从前车马慢,打包一打一上午。 在上一个项目中,打包速度的问题是个大问题,...还是使用 vue 的自带脚手架进行项目初始化 我本地vue-cli 版本是 2.9.1 项目初始化成功。看一下composer.json 可以看...
  • 报错信息 ...其他依赖版本相关更新(2020/11/17) Recently updated (since 2020-11-10) Today: → vue-loader@13.7.3 › css-loader@0.28.11 › cssnano@3.10.0 › autoprefixer@6.7.7 › browsersl
  • 创建VUE项目,2.0版本和3.0版本的区别使用vue2.0版本创建vue项目创建前的准备开始创建创建过程项目正常创建使用vue3.0版本创建vue项目 使用vue2.0版本创建vue项目 你好! 这是你第一次使用 Markdown编辑器 所展示的...
  • 项目升级Vue-CLI3后浏览器报错: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates in...
  • 只需要在原项目的终端中输入 ...其实将vue2项目转成vue3项目绝对是有意义的 比起vue2 vue3有这些优势 性能更好 体积更小 更好的ts开发 更好的代码组织 更好的逻辑抽离 更多性功能 做更新绝对是不亏的 ...
  • 索引 概括 基于 vue-cli 的 . 更新说明 2018/6/19 升级webpack, 使用 ...为确保项目模块后续更新 # 检测模块 npm outdated # 更新模块 npm update # 删除 node_modules 文件 npm install rimraf -g rimraf node_modules
  • vue项目升级到webpack4.x 有些老项目在开发了一段时间之后会出现项目越来越慢, 以及打包时间过长, 加载时间变成等问题, 如果我们讲项目中的webpack升级到4.x项目的性能至少可以提升到百分之六十 第一步骤:删除 ...
  • Vue 项目Vue CLI 2 升级Vue CLI 4

    千次阅读 2020-01-11 14:57:48
    介绍如何将使用 Vue CLI 2 构建的项目升级Vue CLI 4 更多精彩 更多技术博客,请移步 IT人才终生实训与职业进阶平台 - 实训在线 相关网址 介绍 - Vue CLI 配置参考 - Vue CLI 升级细则 实际升级起来还算比较...
  • 层出不穷,公司原项目使用vuecil2版本开发,elementUI等一系列库版本太低,也脱离世界很久远了,新版本库需要webpack4等环境,而老版本配置起来bug很多,在使用过程中很多东西都不能实现,所以升级真的是迫在眉睫;...
  • 主要介绍了详解基于Vue cli生成的Vue项目的webpack4升级,本文将详细介绍从webpack3到webpack4的升级过程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue 2项目升级 vue 4

    2020-03-27 11:56:21
    1、写在vue2 npm uninstall vue-cli -g ...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, ...
  • 现在只需要在原来的 vue项目目录下通过命令 vue add vue-next 来将Vue2升级成Vue3
  • vue项目升级vue-cli3.0问题总结

    千次阅读 2019-07-22 15:45:21
    升级步骤 1、删除原vue-cli并安装vue-cli3.0 2、删除新项目中src下的内容,把原项目中src目录覆盖到新项目中 3、把router从目录文件夹改为文件,src/router/index.js提高一层变成src/router.js 4、我的项目中src已经...
  • 1.依赖升级后遇到的问题由autoprefixer版本引起的 warning: Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules 解决方法: // 将样式中像...
  • vue js项目升级typescript

    2020-08-23 00:18:53
    vue 老旧项目升级typescript 先装包 npm i typescript ts-loader @types/webpack-env -D 创建tsconfig.json文件 { "compilerOptions": { "sourceMap": true, "strict": true }, "include": ["src/**/*"], } ...
  • 项目vue2升级vue3记录之前的包版本更新版本嘛,多简单遇到的几个坑现在的package.json 之前的包版本 看视频的时候发现vue3的一些基础配置代码有变,比如出使用createApp,app.use(),app.mount(’#app’)等,跟我现在...
  • 搭建vue项目vue2.x升级到vue3

    千次阅读 2020-10-11 16:43:44
    1.安装vs code ... 验证是否安装成功: ...5.进入自己要创建项目的路径并创建项目(vue init webpack 项目名): 6.按照上一步中给出的黄色提示进入项目目录,安装依赖,运行项目: cd wyh-xingua.

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,298
精华内容 6,919
关键字:

vue项目升级更新

vue 订阅