webpack5.0工程化实战（1）搭建vue开发环境

·  阅读 1662
webpack5.0工程化实战（1）搭建vue开发环境

前言

前段时间由于工作需要及个人兴趣，对webpack进行了一些学习，查阅很多文档发现，各插件版本更新迭代较快，安装中会产生一些报错，所以想写一个最新版的webpack供大家学习

简介

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

webpack文档

​​​

正文

1.初始化项目

新建目录，初始化npm

npm init
复制代码

1.1安装webpack包（建议将三个包同时安装）

npm i -D webpack webpack-cli webpack-dev-server
复制代码
  • npm i -D 为npm install --save-dev的缩写
  • npm i -S 为npm install --save的缩写

1.2配置webpack.config.js

新建webpack.config.js,实现更多的自定义配置

webpack.config.js

const path = require('path')

module.export  ={
    entry:path.reslove(`__dirname,'./src/index.js'`) //入口文件
    output:{
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
        filename:'bundle.js', //打包后的文件名称
        path:path.resolve(__dirname,'./build') //打包后的目录
    }

}
复制代码

1.3安装各插件

html-webpack-plugin
使用html-webpack-plugin创建html页面，并将打包后的js文件需要引入到html中  使用该插件引入对应的js文件

npm i -D html-webpack-plugin 
//新建build同级的文件夹 public 新建一个index.html
复制代码
clean-webpack-plugin 

npm i -D clean-webpack-plugin
将dist文件夹残留上次打包的文件清空
复制代码

1.4 引入css

在引入css时也需要一些loader来解析我们的css

npm i -D style-loader css-loader

css的作用是将css模块转化为JS模块，但不会使用这个模块

style-loader 就可以把css-loader转化的模块通过style标签追加到页面上

使用less构建样式
npm i -D less less-loader
复制代码

配置文件如下

// webpack.config.js

module.exports ={
//...省略其他配置
module：{
      rules:[{
           // 用正则去匹配要用该 loader 转换的 CSS 文件
                test: /\.css$/,
                exclude: path.resolve(__dirname, 'node_modules'),
                use: [ 'style-loader', 'css-loader','postcss-loader'] // 切记从右向左解析原则
            },
            {
                test:/.less$/, 
                use:['style-loader','css-loader','less-loader'] // 从右向左解析原则   
            } 
      ]
    }

}
复制代码

1.5 为css添加浏览器前缀

npm i -D postcss-loader autoprefixer  //为了兼容各浏览器  添加此插件
复制代码

需要在根目录创建postcss.config.js 文件 

module.exports = {    plugins: [require('autoprefixer')]  // 引用该插件}
复制代码

1.6 把css样式从js文件中提取到单独的css文件中

npm i -D mini-css-extract-plugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
        //...省略其他配置
        module: {   
        rules: [  
        {   test: /.less$/,   
        use: [   MiniCssExtractPlugin.loader,   
        'css-loader',   
        'less-loader'   ],
            }   
          ]   
        },   
        plugins: [
        new MiniCssExtractPlugin({
        filename: "[name].[hash].css",
        chunkFilename: "[id].css", 
                   }) 
            ] 
        }
        //需要配置 MiniCssExtractPlugin 插件 一起使用


复制代码

1.7   babel转义js文件

需要注意版本对应的关系

ES6/7/8 转 ES5代码

安装插件

npm i -D babel-loader @babel/preset-env @babel/core @babel/plugin-proposal-decorators

npm i -D @babel/plugin-transform-arrow-functions @babel/plugin-transform-runtime
复制代码
rules:[
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    // 缓存，加快babel-loader编译速度
                    cacheDirectory: true,
                    // 一系列插件的集合，包括处理箭头函数等，配置后是否需要配置plugins? 后面再看
                    // 2021/5/12 结论：不需要配置其他plugins
                    // useBuiltIns corejs 解决es6新增api无法编译问题（只能编译语法，例如箭头函数）
                    presets: [
                      // ['@babel/preset-env', { targets: 'defaults' }]
                      ['@babel/preset-env', { useBuiltIns: 'usage', corejs: 3, targets: 'defaults' }]
                    ],
                    plugins: [
                      // 编译箭头函数
                      '@babel/plugin-transform-arrow-functions',
                      // 编译装饰器
                      ['@babel/plugin-proposal-decorators', { legacy: true }],
                      // 编译类，loose true时是赋值法定义属性，false时是使用Object.defineProperty定义属性，后者是默认
                      ['@babel/plugin-proposal-class-properties', { loose: false }]
                    ]
                  }
                }
              },]
复制代码

1.8 打包 图片 字体等

在webpack5中  svg属于inline asset,内置loader

           [
            {
                test:/\.svg$/,
                type:'asset/inline',
                generator:{
                  filename:"icons/[name]--[hash].[ext]"
                }
              },
              {
                test:/\.(png|jpe?g|gif)(\?.*)?$/,
                type:'asset/resource',
                generator: {
                  filename: 'imgs/[name]--[hash].[ext]'
                }
              },
              {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                type: 'asset/resource',
                generator: {
                  filename: 'media/[name]--[hash].[ext]'
                }
              },
              {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                type: 'asset/resource',
                generator: {
                  filename: 'fonts/[name]--[hash].[ext]'
                }
              }
              ]
复制代码

2.搭建vue开发环境

接下来搭建一个vue开发环境 结合上面例子的依赖，还需要以下几种配置

2.1解析vue文件

npm安装插件

npm i -D vue-loader vue-template-compiler vue-style-loader

npm i -S vue
复制代码

vue-loader 用于解析.vue文件

vue-template-compiler 用于编译模板

具体配置见后文完整配置

2.2 配置webpack-dev-server进行热更新

devServer:{
      port:3000,
      hot:true,
      open：true，
      contentBase:'./build'
    },
复制代码

2.3 配置打包命令

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --watch --config webpack.config.js",
    "dev": "webpack server "
  },
复制代码

2.3.1 在src下新建index.js

import Vue from 'vue'
import App from './App.vue'
new Vue({
  render: h => h(App)
}).$mount('#app')

复制代码

2.3.2 新建App.vue

<template>
  <div class="style" id="app">
    {{ str }}

    <canvas id="myCanvas" width="600" height="400" ref="can"></canvas>
  </div>
</template>

<script>
console.log("加载");
export default {
    name:'App',
    data (){
    return{
        str:'hello'
          }
    },
    mounted (){
    console.log(Math.trunc(12.1))
    },
    method:{}
}
</script>
复制代码

2.3.3 新建index.html

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id='app'>
       
    </div>
</body>

</html>
复制代码

2.3.4 完整配置

2.4 区分开发环境与生产环境

实际运用到项目时，  需要区分开发环境与生产环境的关系

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin') //引入对应文件
const webpack = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
//将css样式从js文件中提取到单独css文件
// const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
// 默认路径,将entry的前置路径放到这个字段
    // context:path.resolve(__dirname,'src'),
    entry:path.resolve(__dirname,'./src/index.js'),
    output:{
        // 把所有依赖的模块合并输出到一个 bundle.js 文件
        filename:'[name].[hash:8].js',
        path:path.resolve(__dirname,'./build')
    },
    devServer: {
        contentBase: path.join(__dirname, './build'),
        compress: true,
        port: 4000,
        hot: true,
        open: true
      },
      devtool: 'source-map',
    module:{
        rules:[
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            // css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css将css挂载到style，require 时用
            {
                // 用正则去匹配要用该 loader 转换的 CSS 文件
                test: /\.css$/,
                exclude: path.resolve(__dirname, 'node_modules'),
                use: [ 'style-loader', 'css-loader','postcss-loader']
            },
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    // 缓存，加快babel-loader编译速度
                    cacheDirectory: true,
                    // 一系列插件的集合，包括处理箭头函数等，配置后是否需要配置plugins? 后面再看
                    // 2021/5/12 结论：不需要配置其他plugins
                    // useBuiltIns corejs 解决es6新增api无法编译问题（只能编译语法，例如箭头函数）
                    presets: [
                      // ['@babel/preset-env', { targets: 'defaults' }]
                      ['@babel/preset-env', { useBuiltIns: 'usage', corejs: 3, targets: 'defaults' }]
                    ],
                    plugins: [
                      // 编译箭头函数
                      '@babel/plugin-transform-arrow-functions',
                      // 编译装饰器
                      ['@babel/plugin-proposal-decorators', { legacy: true }],
                      // 编译类，loose true时是赋值法定义属性，false时是使用Object.defineProperty定义属性，后者是默认
                      ['@babel/plugin-proposal-class-properties', { loose: false }]
                    ]
                  }
                }
              },
              {
                test:/\.svg$/,
                type:'asset/inline',
                generator:{
                  filename:"icons/[name]--[hash].[ext]"
                }
              },
              {
                test:/\.(png|jpe?g|gif)(\?.*)?$/,
                type:'asset/resource',
                generator: {
                  filename: 'imgs/[name]--[hash].[ext]'
                }
              },
              {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                type: 'asset/resource',
                generator: {
                  filename: 'media/[name]--[hash].[ext]'
                }
              },
              {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                type: 'asset/resource',
                generator: {
                  filename: 'fonts/[name]--[hash].[ext]'
                }
              }
        ]
    },
    plugins:[
        new htmlWebpackPlugin({
            filename:'index.html',
            template:path.resolve(__dirname,'./src/index.ejs'),
            minify: {
              collapseWhitespace: true,
              removeAttributeQuotes: true,
              removeComments: true,
              minifyJS: true,
              minifyCSS: true
            },
        }),
        new CleanWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new VueLoaderPlugin()
    ]
}
复制代码

新建两个文件夹

  • webpack.dev.js 开发环境使用
  • webpack.prod.js 生产环境使用
  • webpack.config.js 公用配置

2.4.1 开发环境

  1. 不需要压缩代码
  2. 需要热更新
  3. css不需要提取到css文件
  4. devtool使用source-map
  5. ...

2.4.2 生产环境

  1. 压缩代码
  2. 不需要热更新
  3. 提取css,压缩css文件
  4. sourceMap
  5. 构建前清除上一次构建的内容
  6. ...

2.4.3 安装所需依赖

npm i optimize-css-assets-webpack-plugin mini-css-extract-plugin clean-webpack-plugin webpack-merge copy-webpack-plugin -D
复制代码
  • webpack-merge 合并配置
  • copy-webpack-plugin 拷贝静态资源
  • optimize-css-assets-webpack-plugin 压缩css
  • uglifyjs-webpack-plugin 压缩js

开发环境配置

//开发环境
const webpackConfig = require('./webpack.config.js')
const WebpackMerge = require('webpack-merge')
const webpack = require('webpack')

// Webpack-merge 提供了一个函数，该函数将数组串联并合并创建新对象的对象。如果遇到函数，它将执行它们，通过算法运行结果，然后再次将返回的值包装在函数中。

module.exports = WebpackMerge.merge(webpackConfig,{
mode:'development', 
devtool:'source-map',
devServer:{ 
port:3000, 
hot:true, 
contentBase:'./build' 
}, 
plugins:[ 
    new webpack.HotModuleReplacementPlugin()] 
}) 
复制代码

生产环境配置

const path = require('path')
const webpackConfig = require('./webpack.config.js')
const WebpackMerge = require('webpack-merge')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') //压缩css
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')       //压缩js
module.exports = WebpackMerge.merge(webpackConfig,{
    mode:'production',
    devtool:'cheap-module-source-map',
    plugins:[
      new CopyWebpackPlugin({
        patterns:[{
        from:path.resolve(__dirname,'src'),
        to:path.resolve(__dirname,'build')
      }]}),
    ],
    optimization:{
      minimizer:[
        new UglifyJsPlugin({//压缩js
          cache:true,
          parallel:true,
          sourceMap:true
      }),
      new OptimizeCssAssetsPlugin({})
      ],
      splitChunks:{
        chunks:'all',
        cacheGroups:{
          libs: {
            name: "chunk-libs",
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: "initial" // 只打包初始时依赖的第三方
          }
        }
      }
    }
  })
  

复制代码

修改package.json 配置

{
  "name": "webpack-new",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --watch --config webpack.prod.js",
    "dev": "webpack-dev-server --config webpack.dev.js"
  },
  "author": "",
  "license": "ISC",
  "keywords": [],
  "description": "",
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/plugin-proposal-decorators": "^7.14.5",
    "@babel/plugin-transform-arrow-functions": "^7.14.5",
    "@babel/plugin-transform-runtime": "^7.14.5",
    "@babel/preset-env": "^7.14.7",
    "@intervolga/optimize-cssnano-plugin": "^1.0.6",
    "autoprefixer": "^10.2.6",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^9.0.1",
    "css-loader": "^5.2.6",
    "html-webpack-plugin": "^5.3.2",
    "mini-css-extract-plugin": "^1.6.2",
    "optimize-css-assets-webpack-plugin": "^6.0.1",
    "postcss-loader": "^6.1.0",
    "style-loader": "^2.0.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "vue": "^2.6.14",
    "vue-loader": "^15.9.7",
    "vue-router": "^3.5.2",
    "vue-template-compiler": "^2.6.14",
    "vuex": "^3.6.2",
    "webpack": "^5.40.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.8.0"
  }
}
复制代码

gitee地址

交流讨论

看完文章，同学们可以搭建一下，搭建过程中会遇到许多的坑，同学可以在下方留言。想要获取更多前端资料，关注公众号：前端小嘟 后台留言拉你进前后端交流群

分类：
前端
标签：
Webpack前端
分类：
前端
标签：
Webpack前端
相关推荐
  • 无情CV
    10月前
    Webpack
    vue3.0 搭载webpack5
    webpack5搭载vue3上路。感受从0到1的至尊奢华，高贵不失优雅的配置。你值得拥有。葬爱家族用了都说好。v3w5艾玛真香🍚
    • 749
    • 评论
    vue3.0 搭载webpack5
  • Sunshine_Lin
    1月前
    前端 JavaScript Webpack
    每个前端都必须要学会的Webpack优化手段
    前言 大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心 webpack优化很有必要 上一篇文章给大家讲解了简单搭建一个Vuecli，但是只是基本搭建，而没有进
    • 1.8w
    • 25
    每个前端都必须要学会的Webpack优化手段
  • SBDavid
    4年前
    JavaScript Webpack CSS
    如何让webpack打包的速度提升50%？
    随着前端应用包含的模块数量日益增长，代码打包的耗时也越来越长。公司很多项目打包耗时超过了10秒，对于一般人来说超过10秒的等待是比较难受的，虽然后续增量编辑的速度很快。于是我想结合实际开发环境提升一下首次打包的速度。 1. 实际开发环境 许多需求只涉及到js模块的修改，并不涉及…
    • 9037
    • 36
  • 和光不同尘
    10月前
    前端 Vue.js
    保姆级教程：从零搭建 Webpack5+ts+Vue3 开发环境
    2021年再谈 webpack 项目搭建，保姆级教程，手把手带你搭建 webpack5 + ts + vue3 的企业级项目开发环境
    • 3563
    • 9
    保姆级教程：从零搭建 Webpack5+ts+Vue3 开发环境
  • 全栈然叔
    1年前
    前端 Webpack
    做了一夜动画，让大家十分钟搞懂Webpack
    做了一夜动画，让大家十分钟搞懂Webpack 一、什么是webpack webpack是一个打包工具，他的宗旨是一切静态资源皆可打包。 二、原理分析 首先我们通过一个制作一个打包文件的原型。 假设有两
    • 5.3w
    • 96
  • 小jerry
    1年前
    Vue.js
    webpack5（Module Federation）+vue3.0实现微前端
    基于webpack实现微前端服务，可以完全实现一个去中心化的应用部署群：每个应用是单独部署在各自的服务器，每个应用都可以引用其他应用，也能被其他应用所引用。
    • 4459
    • 11
    webpack5（Module Federation）+vue3.0实现微前端
  • LBJ
    2月前
    前端 后端 JavaScript
    焕然一新的 Vue 3 中文文档要来了🎉
    这是一份即将焕然一新的 cn.vuejs.org的学习笔记，此文附50张脑图，带你一起了解 Vue 3 新文档有哪些新的变化🕵️‍♂️
    • 7.5w
    • 162
    焕然一新的 Vue 3 中文文档要来了🎉
  • sturuby40443
    4年前
    Webpack 前端 GitHub
    webpack打包之后的文件过大的解决方法
    以前一直使用create-react-app这个脚手架进行react开发，后面因为一些自定义的配置，转而使用webpack搭建一套自己的脚手架。但是在使用webpack打包之后发现，纳尼？怎么文件这么大？？？ 于是研究了一下如何处理webpack打包之后文件太大的情况，简单记录…
    • 1.4w
    • 6
  • 前端要努力
    8月前
    Webpack 面试
    webpack 十连问你能接住几题
    前言 面试题只是一个引子，快速刷题就是背（面试官问你，但是他不一定很深入），想深入理解还是得花大量精力； webpack 的构建流程是什么 初始化参数：解析webpack配置参数，合并shell传入和
    • 4.1w
    • 46
    webpack 十连问你能接住几题
  • Sunshine_Lin
    10月前
    前端 面试 Vue.js
    「自我检验」熬夜总结50个Vue知识点，全都会你就是神！！！
    前言 大家好，我是林三心，这几天发生了很多事（具体是啥我就不说了），这些事，吓得我把我这些年珍藏的Vue知识点都拿出来整理了一遍，巴不得能多总结出一道是一道，我拿出了我的笔记，并且使劲回忆，终于悟出了
    • 10.6w
    • 205
    「自我检验」熬夜总结50个Vue知识点，全都会你就是神！！！
  • monkeysoft
    1年前
    Vue.js
    史上最强vue总结---面试开发全靠它了
    运行速度更快:相比较与react而言，同样是操作虚拟dom，就性能而言，vue存在很大的优势。 总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 对象为引用类型，当复用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的…
    • 13.9w
    • 115
  • 前端论道
    2年前
    前端 Webpack
    如何使用 splitChunks 精细控制代码分割
    前端小伙伴都知道，为了降低包大小，经常会把依赖的前端模块独立打包，比如把 vue、vue-router 打到一个单独的包 vendor 中。另外，常会将存在多个路由的复杂页面的每个页面都单独打一个包，只有访问某个页面的时候，再去下载该页面的js包，以此来加快首页的渲染。 无论是…
    • 1.5w
    • 9
    如何使用 splitChunks 精细控制代码分割
  • 卤蛋实验室
    2年前
    Webpack 前端
    辛辛苦苦学会的 webpack dll 配置，可能已经过时了
    如果大家看过一些 webpack4 优化的文章，一定会出现 dll 动态链接库。它以配置之复杂让众多初学者记忆犹新。今天我会以一个学习者的角度去一步一步探讨 webpack dll 的配置，最后得出一
    • 1.8w
    • 68
    辛辛苦苦学会的 webpack dll 配置，可能已经过时了
  • 黄小虫
    2年前
    JavaScript
    2020年了,再不会webpack敲得代码就不香了(近万字实战)
    2020年即将到来,在众多前端的招聘要求里,webpack、工程化这些字眼频率越来越高。日常开发者中，我们常常在用诸如vue-cli、create-react-app的脚手架来构建我们的项目。但是如果你想在团队脱颖而出(鹤立鸡群)、拿到更好的offer(还房贷)，那么你必须去深…
    • 16.9w
    • 377
    2020年了,再不会webpack敲得代码就不香了(近万字实战)
  • 甜不辣不甜
    2年前
    Webpack
    webpack实践01：搭建一个简单的前端项目
    我们本次实践的目标是:项目的功能需要具有以下几个功能目录结构：(使用es6语法，并使用scss来进行预编译)Begin：新建文件下，在文件夹下打开终端，初始化项目一路回车，完成后文件夹的根目录会生成一
    • 283
    • 评论
  • 印记中文
    1年前
    Webpack 前端
    阔别两年，webpack 5 正式发布了！
    自从 2018 年 2 月，webpack4 发布以来，webpack 就暂时没有更进一步的重大更新，为了保持 API 的一致性，旧的架构没有做太多改变，遗留了很多的包袱。阔别 2 年多后，2020 年 10 月 10 日，webpack 5 正式发布，并带来了诸多重大的变更，…
    • 2.3w
    • 29
    阔别两年，webpack 5 正式发布了！
  • 程序员依扬
    2年前
    面试 前端
    【1 月最新】前端 100 问：能搞懂 80% 的请把简历给我
    半年时间，几千人参与，精选大厂前端面试高频 100 题，这就是「壹题」。 在 2019 年 1 月 21 日这天，「壹题」项目正式开始，在这之后每个工作日都会出一道高频面试题，主要涵盖阿里、腾讯、头条、百度、网易等大公司和常见题型。得益于大家热情参与，现在每道题都有很多答案，提…
    • 54.0w
    • 311
  • doodlewind
    1年前
    Vue.js 面试
    他写出了 Vue，却做不对这十道 Vue 笔试题
    请原谅我起了这么个浓浓营销号味道的标题。但这可丝毫没有夸大宣传，而是前端娱乐圈今日份的瓜—— 然后他自己也做错了（其中的某两道）。 Vue Core Team 的 @胖茶 40 分，可能说明带他的 mentor 不懂 Vue？不过他第二次做就拿了 90 分……这很赘婿逆袭啊。 …
    • 7.0w
    • 232
    他写出了 Vue，却做不对这十道 Vue 笔试题
  • 杭州程序员张张
    4年前
    Vue.js JavaScript 前端
    Vue.js中 watch 的高级用法
    上面的代码的效果是，当我们输入firstName后，wacth监听每次修改变化的新值，然后计算输出fullName。 这里 watch 的一个特点是，最初绑定的时候是不会执行的，要等到 firstName 改变时才执行监听计算。那我们想要一开始就让他最初绑定的时候就执行改怎么办…
    • 10.5w
    • 44
    Vue.js中 watch 的高级用法
  • ddblue
    2年前
    Vue.js
    正确姿势开发vue后台管理系统
    相信许多人和我一样刚接触 vue 时看文档都很枯燥，看完 vue，还有 vueRouter 、vuex 、vue-cli、es6 (学不动了。。。 ) 对于看完教程之后又迟迟不能上手实际项目，只能写一些简单的小demo,这肯定和实际生产工作是有出入的，于是乎我就打算自己从零开始…
    • 8.8w
    • 176
    正确姿势开发vue后台管理系统
    • 前端工程师 @ 公众号 前端小嘟
    获得点赞 126
    文章被阅读 8,600
    下载稀土掘金APP
    一个帮助开发者成长的社区
    相关文章
    Vue 3 和 Webpack 5 来了，手动搭建的知识该更新了
    646点赞
     · 
    115评论
    前端工程化实战 - 企业级 CLI 开发
    733点赞
     · 
    139评论
    微信小程序工程化探索之webpack实战
    72点赞
     · 
    20评论
    Webpack 详解（一）
    28点赞
     · 
    5评论
    CDN是什么？为什么使用CDN?
    4点赞
     · 
    0评论
    收藏成功！
    已添加到「」， 点击更改