vue项目最强优化 webpack

最新推荐文章于 2024-09-18 08:54:28 发布
最新推荐文章于 2024-09-18 08:54:28 发布
阅读量362 收藏 1
点赞数
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/darksociety/article/details/112646952
版权

文章目录

打包优化的目的

1、项目启动速度，和性能
2、必要的清理数据
3、减少打包后的体积
第一点是核心，第二点呢其实主要是清理console

提示：以下是本篇文章正文内容，下面案例可供参考

一、性能优化的主要方向

1、去除.map文件
2、开启CDN加速
3、代码压缩
4、图片压缩
5、公共代码抽离，写在configureWebpack模块中
6、首屏骨架屏优化
7、开启Gzip压缩

二、打包优化

1.去除.map文件

代码如下（示例）：
在vue.config.js中添加

productionSourceMap: false, //不输出map文件

2.开启CDN加速

代码如下（示例）：
快速查找对应cdn:

// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development';

// 本地环境是否需要使用cdn
const devNeedCdn = false

// cdn链接
const cdn = {
    // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
    externals: {
        vue: 'Vue',
        vuex: 'Vuex',
        'vue-router': 'VueRouter',
        'marked': 'marked',
        'highlight.js': 'hljs',
        'nprogress': 'NProgress',
        'axios': 'axios'
    },
    // cdn的css链接
    css: [
        
    ],
    // cdn的js链接
    js: [
        'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
        'https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js',
        'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
        'https://cdn.bootcss.com/axios/0.19.2/axios.min.js'
    ]
}

module.exports = {
    chainWebpack: config => {
        // ============注入cdn start============
        config.plugin('html').tap(args => {
            // 生产环境或本地需要cdn时，才注入cdn
            if (isProduction || devNeedCdn) args[0].cdn = cdn
            return args
        })
        // ============注入cdn start============
    },
    configureWebpack: config => {
        // 用cdn方式引入，则构建时要忽略相关资源
        if (isProduction || devNeedCdn) config.externals = cdn.externals
    }
}

在index.html head标签内写入

 <!-- 使用CDN的CSS文件 -->
 <% for (var i in htmlWebpackPlugin.options.cdn &&
  htmlWebpackPlugin.options.cdn.css) { %>
  <link
          href="<%= htmlWebpackPlugin.options.cdn.css[i] %>"
          rel="stylesheet"
  />
  <% } %>
  <!-- 使用CDN的CSS文件 -->


  <!-- 使用CDN的JS文件 -->
 <% for (var i in htmlWebpackPlugin.options.cdn &&
  htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>
  <!-- 使用CDN的JS文件 -->

3.代码压缩

安装插件 npm i -D uglifyjs-webpack-plugin

// 代码压缩
//在configureWebpack中加入
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// 代码压缩
config.plugins.push(
    new UglifyJsPlugin({
        uglifyOptions: {
            //生产环境自动删除console
            compress: {
                drop_debugger: true,
                drop_console: true,
                pure_funcs: ['console.log']
            }
        },
        sourceMap: false,
        parallel: true
    })
)

4.图片压缩

安装插件 npm install image-webpack-loader --save-dev

在chainWebpack中新增以下代码
 // ============压缩图片 start============
        config.plugins.delete('prefetch')
        config.module.rule('images')
          .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
          .use('image-webpack-loader')
          .loader('image-webpack-loader')
          .options({ bypassOnDebug: true })
// ============压缩图片 end============

图片生成在线地址

5.公共代码抽离，写在configureWebpack模块中

// 公共代码抽离
config.optimization = {
    splitChunks: {
        cacheGroups: {
            vendor: {
                chunks: 'all',
                test: /node_modules/,
                name: 'vendor',
                minChunks: 1,
                maxInitialRequests: 5,
                minSize: 0,
                priority: 100
            },
            common: {
                chunks: 'all',
                test: /[\\/]src[\\/]js[\\/]/,
                name: 'common',
                minChunks: 2,
                maxInitialRequests: 5,
                minSize: 0,
                priority: 60
            },
            styles: {
                name: 'styles',
                test: /\.(sa|sc|c)ss$/,
                chunks: 'all',
                enforce: true
            },
            runtimeChunk: {
                name: 'manifest'
            }
        }
    }
}

6.骨架屏

在src下新建Skeleton文件夹，其中新建index.js以及index.vue，在其中写入以下内容，其中，骨架屏的index.vue页面样式请自行编辑

 npm install vue-skeleton-webpack-plugin

index.js

import Vue from 'vue'
import home from './index.vue'
import list from './a.vue'
export default new Vue({
  components: {
    home,
    list
  },
  template: `
  <div>
   <home id="home" style="display:none"/>
   <list id="list" style="display:none"/>
  </div>
 `
})

骨架屏页面 index.vue

<template>
  <div class="skeleton-wrapper">
    <header class="skeleton-header"></header>
    <section class="skeleton-block">
      <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTA4MCAyNjEiPjxkZWZzPjxwYXRoIGlkPSJiIiBkPSJNMCAwaDEwODB2MjYwSDB6Ii8+PGZpbHRlciBpZD0iYSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSIgeD0iLTUwJSIgeT0iLTUwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48ZmVPZmZzZXQgZHk9Ii0xIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggaW49InNoYWRvd09mZnNldE91dGVyMSIgdmFsdWVzPSIwIDAgMCAwIDAuOTMzMzMzMzMzIDAgMCAwIDAgMC45MzMzMzMzMzMgMCAwIDAgMCAwLjkzMzMzMzMzMyAwIDAgMCAxIDAiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGw9IiNGRkYiIHhsaW5rOmhyZWY9IiNiIi8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCA0NGg1MzN2NDZIMjMweiIvPjxyZWN0IHdpZHRoPSIxNzIiIGhlaWdodD0iMTcyIiB4PSIzMCIgeT0iNDQiIGZpbGw9IiNGNkY2RjYiIHJ4PSI0Ii8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCAxMThoMzY5djMwSDIzMHpNMjMwIDE4MmgzMjN2MzBIMjMwek04MTIgMTE1aDIzOHYzOUg4MTJ6TTgwOCAxODRoMjQydjMwSDgwOHpNOTE3IDQ4aDEzM3YzN0g5MTd6Ii8+PC9nPjwvc3ZnPg==">
      <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTA4MCAyNjEiPjxkZWZzPjxwYXRoIGlkPSJiIiBkPSJNMCAwaDEwODB2MjYwSDB6Ii8+PGZpbHRlciBpZD0iYSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSIgeD0iLTUwJSIgeT0iLTUwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48ZmVPZmZzZXQgZHk9Ii0xIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggaW49InNoYWRvd09mZnNldE91dGVyMSIgdmFsdWVzPSIwIDAgMCAwIDAuOTMzMzMzMzMzIDAgMCAwIDAgMC45MzMzMzMzMzMgMCAwIDAgMCAwLjkzMzMzMzMzMyAwIDAgMCAxIDAiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGw9IiNGRkYiIHhsaW5rOmhyZWY9IiNiIi8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCA0NGg1MzN2NDZIMjMweiIvPjxyZWN0IHdpZHRoPSIxNzIiIGhlaWdodD0iMTcyIiB4PSIzMCIgeT0iNDQiIGZpbGw9IiNGNkY2RjYiIHJ4PSI0Ii8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCAxMThoMzY5djMwSDIzMHpNMjMwIDE4MmgzMjN2MzBIMjMwek04MTIgMTE1aDIzOHYzOUg4MTJ6TTgwOCAxODRoMjQydjMwSDgwOHpNOTE3IDQ4aDEzM3YzN0g5MTd6Ii8+PC9nPjwvc3ZnPg==">
    </section>
  </div>
</template>
 
<script>
  export default {
    name: 'skeleton'
  }
</script>
 
<style scoped>
  .skeleton-header {
    height: 40px;
    background: #1976d2;
    padding:0;
    margin: 0;
    width: 100%;
  }
  .skeleton-block {
    display: flex;
    flex-direction: column;
    padding-top: 8px;
  }
 
</style>

vue.config.js 中配置

//骨架屏渲染
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')

//path引入
const path = require('path')

//configureWebpack模块中写入内容
// 骨架屏渲染
config.plugins.push(new SkeletonWebpackPlugin({
      webpackConfig: {
        entry: {
          app: path.join(__dirname, './src/Skeleton/index.js'),
        },
      },
      minimize: true,
      quiet: true,
      // 如果不设置那么所有的路由都会共享这个骨架屏组件
      router: {
        mode: 'hash',
        // 给对应的路由设置对应的骨架屏组件，skeletonId的值根据组件设置的id
        routes: [
	      { path: '/list', skeletonId: 'home' },
	      { path: '/kc', skeletonId: 'list' },
	    ]
    }))

7.开启Gzip压缩

注意的是，服务器上nginx也必须开启gzip才能生效 需要配合后端授权使用

// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development';

// gzip压缩
const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {
    productionSourceMap: false,
    configureWebpack: config => {
        // 生产环境相关配置
        if (isProduction) {
            //gzip压缩
            const productionGzipExtensions = ['html', 'js', 'css']
            config.plugins.push(
                new CompressionWebpackPlugin({
                    filename: '[path].gz[query]',
                    algorithm: 'gzip',
                    test: new RegExp(
                        '\\.(' + productionGzipExtensions.join('|') + ')$'
                    ),
                    threshold: 10240, // 只有大小大于该值的资源会被处理 10240
                    minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
                    deleteOriginalAssets: false // 删除原文件
                })
            )
        }
    }
}

nginx中

    # 开启gzip
    gzip on;

    # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
    gzip_min_length 1k;

    # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明
    gzip_comp_level 2;

    # 进行压缩的文件类型。javascript有多种形式，后面的图片压缩不需要的可以自行删除
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

    # 是否在http header中添加Vary: Accept-Encoding，建议开启
    gzip_vary on;

    # 设置压缩所需要的缓冲区大小     
    gzip_buffers 4 16k;

全部代码

// vue.config.js
//骨架屏渲染
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')


//path引入
const path = require('path')
// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development';
// 代码压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

// 本地环境是否需要使用cdn
const devNeedCdn = false
// cdn链接
const cdn = {
  // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
  externals: {
      vue: 'Vue',
      vuex: 'Vuex',
      'vue-router': 'VueRouter',
      'axios': 'axios',
      'element-ui': 'ELEMENT',
      'vant':'vant'
  },
  // cdn的css链接
  css: [
      'https://unpkg.com/element-ui/lib/theme-chalk/index.css',
      'https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css',
  ],
  // cdn的js链接
  js: [
      'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
      'https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js',
      'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
      'https://cdn.bootcss.com/axios/0.19.2/axios.min.js',
      'https://unpkg.com/element-ui/lib/index.js',
      'https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js'
  ]
}

module.exports = {
  lintOnSave: false,
  publicPath: './',
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-plugin-px2rem')({
            rootValue:35, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
            // unitPrecision: 5, //允许REM单位增长到的十进制数字。
            //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
            // propBlackList: [], //黑名单
            // exclude: /(page_pc)/i,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            exclude: /node_modules/i,
            // selectorBlackList: ['van-'], //要忽略并保留为px的选择器,我们一般不转换vantui中的大小
            // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
            // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
            mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。
            minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
          }),
        ]
      }
    }
  },
  productionSourceMap: false, //不输出map文件
  chainWebpack: config => {
    // ============注入cdn start============
    config.plugin('html').tap(args => {
        // 生产环境或本地需要cdn时，才注入cdn
        if (isProduction || devNeedCdn) args[0].cdn = cdn
        return args
    })
    // ============注入cdn start============
    // ============压缩图片 start============
    config.module
    .rule('images')
    .use('image-webpack-loader')
    .loader('image-webpack-loader')
    .options({bypassOnDebug: true
    })
    .end()
// ============压缩图片 end============
  },
  configureWebpack: config => {
    if (isProduction || devNeedCdn) config.externals = cdn.externals
    config.plugins.push(new SkeletonWebpackPlugin({
      webpackConfig: {
        entry: {
          app: path.join(__dirname, './src/Skeleton/entry-skeleton.js'),
        },
      },
      minimize: true,
      quiet: true,
      router: {
        mode: 'hash',
        // 给对应的路由设置对应的骨架屏组件，skeletonId的值根据组件设置的id
        routes: [
          { path: '/list', skeletonId: 'skeleton' }
        ]
     }
    }))

      // 用cdn方式引入，则构建时要忽略相关资源
      // if (isProduction || devNeedCdn) config.externals = cdn.externals
// 公共代码抽离
config.optimization = {
  splitChunks: {
      cacheGroups: {
          vendor: {
              chunks: 'all',
              test: /node_modules/,
              name: 'vendor',
              minChunks: 1,
              maxInitialRequests: 5,
              minSize: 0,
              priority: 100
          },
          common: {
              chunks: 'all',
              test: /[\\/]src[\\/]js[\\/]/,
              name: 'common',
              minChunks: 2,
              maxInitialRequests: 5,
              minSize: 0,
              priority: 60
          },
          styles: {
              name: 'styles',
              test: /\.(sa|sc|c)ss$/,
              chunks: 'all',
              enforce: true
          },
          runtimeChunk: {
              name: 'manifest'
          }
      }
  }
}

      // 代码压缩
config.plugins.push(
  new UglifyJsPlugin({
      uglifyOptions: {
          //生产环境自动删除console
          compress: {
              drop_debugger: true,
              drop_console: true,
              pure_funcs: ['console.log']
          }
      },
      sourceMap: false,
      parallel: true
  })
)


  },

}

这样一番操作你的代码文件，从12MB左右到500KB 很轻松 亲测有效 这么好的文章收藏一波？？？~~~~~~

Aa丶如何
关注
项目打包 优化
chenghao1111的博客
09-14 268
项目开始时webpack配置 vue-cli3以后，我们修改webpack配置，需要自己在项目根路径下创建vue.config.js文件。 一、 配置 proxy 跨域 使用vue-cli发开项目，在本地开发环境中，如果遇到跨域的问题。可以通过配置proxy的方式，解决跨域问题： module.exports = { devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost port: 606
vue-cli4打包最强优化（10M变300kb）
m0_70275087的博客
05-04 1324
//配置alias别名后 import Home from ‘views/Home.vue’ //也可以这么写 import Home from ‘@/views/Home.vue’ [](()项目结束后打包前webpack配置 ==================================================================================== 目的： 提高打包速度 减小项目体积、提高首屏加载速度 提高用户体验（骨架屏） 打包前必做 项目开
Vue项目打包优化
沃德天，倪维胜么，捺莫帅？
01-08 4456
一、知识点和目的 1、打包优化的目的 1、项目启动速度，和性能 2、必要的清理数据 第一点是核心，第二点呢其实主要是清理console 2、性能优化的主要方向 1、cdn加载 2、压缩js 3、减少项目在首次加载的时长（首屏加载优化） 二、打包优化 1、我们首先是压缩js，并且开启gzip 说明：开启gzip代表你项目实际环境就可以使用gzip。 原因： 第一：浏览器需要支持 第二：需要后端配置，这里提供nginx方式： http:{ gzip on; #开启或关闭gzip on
Webpack 性能优化方案看这篇就够了！
最新发布
LuckyWinty的博客
09-18 653
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群无论在面试还是内部晋升，性能优化方案 一直都是非常重要的部分。性能优化可以分为很多种，比如：打包工具（webpack || vite）性能优化访问速度优化用户感知优化代码标准化...正文在了解 webpack 的性能优化之前，我们需要先对性能优化有一个总体的认知，总共分为 3 点：在业务开发中，不要过早的考虑性能优化，而且业务开发大部分时候...
项目打包优化
weixin_34067102的博客
02-20 140
问题：项目最初没有使用按需加载，直接引入了echarts和element-ui，打包项目会包含使用不到的模块，chunk包过大，如图： 解决方案：引入按需加载插件，babel-plugin-component、babel-plugin-equire，做项目优化 解决步骤： 查看不包含echarts，element-ui的项目代码，打...
【vue】vue项目打包优化
xilejie的博客
04-07 371
vue cli 3.0中, 在vue.config.js中配置 configureWebpack:{ optimization: { minimizer: [ new UglifyJsPlugin({ uglifyOptions: { // 删除注释 output:{ comments:false }, // 删除console debugger 删除警告 compress: { warnin...
vue-cil4最强优化
fengshaopu的博客
06-02 426
一、打包前必须做的 要在文件夹下的vue.config.js文件然后在里面用module.exports导出一个修改资源路径默认的是绝对路径 要的是相对路径 module.exports = { publicPath: './' } 打包的命令行是npm run build 打包玩以后用内置的服务器我们要去下载一个插件： 如果没有配置的话是这样的 绝对路径 配置了的话是这个样子的 相对路径 二、去除生产环境sourceMap module.exports={ publicPath: '
史上最强Vue，面试、项目全靠它
weixin_58361149的博客
08-24 1758
史上最强Vue，面试、项目全靠它
史上最强vue学习资料报大放送，打开网盘即可保存或下载
10-31
这份"史上最强vue学习资料报大放送"无疑是初学者和有经验的开发者提升Vue技能的宝贵资源。 首先，让我们从“VUE基础知识汇总学习教程”开始。这部分内容可能涵盖以下几个关键知识点： 1. **安装与设置**：Vue可以...
vue-cli4打包最强优化（10M变300kb），网易架构师深入讲解前端开发
2401_84023262的博客
04-04 1195
压缩前后大小大致如下：可以看到相应头中存在 Content-Encoding:gzip 表示已经配置成功。
vue项目打包优化
tzz_1122的博客
09-11 313
【代码】vue项目打包优化。
vue打包优化
Ajaloney的博客
01-19 341
首先在项目根目录新建一个vue.config.js文件 打包前必做: module.exports = { publicPath: './', // 静态资源路径（默认/，如果不改打包后会白屏） outputDir: 'dist', // 打包后文件的目录 （默认为dist） assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录 } 1、去除生产环境sourceMap 问题: 在vue项目打包之后js,css文件夹中,会自动生成
vue 打包优化
小皮咖的博客
11-13 606
1. 去除控制台调试时的打印信息修改build/webpack.prod.conf.js在 plugins 中的 UglifyJsPlugin 的 compress 加入这两行： drop_debugger: true, drop_console: true 代码如下 new webpack.optimize.UglifyJsPlugin({ compress:{ wa
vue - 打包优化
weixin_58726419的博客
11-04 510
目录 整体介绍 路由懒加载 什么是路由懒加载 路由懒加载中的魔法注释 包大小分析 去掉 console-log webpack配置排除打包 整体分析 打包瘦身 引用网络资源 具体配置-在生产环境时生效 webpack配置externals配置项 注入CDN配置到html模板 整体小结: 整体介绍 项目开发完成 打包 ： 用webpack做打包（把.vue, .js, .less -----------> .js, .css, .html） 在项目中都会
Vue——打包优化
qq812457115的博客
06-14 425
【打包分析】 【包分割optimization.splitChunks】 【图片压缩】
Vue项目实践：Webpack配置与热更新
"本文主要介绍了如何使用Webpack构建一个基于Vue.js的项目，涵盖了从创建项目的基本结构、配置Webpack，到引入vue-loader处理.vue文件，以及实现热更新的全过程。" 在构建Vue.js项目时，首先确保已经安装了Node.js...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值