• webpack搭建vue脚手架

    初始化项目

    npm init -y

    安装webpack相关

    npm i  webpack webpack-cli webpack-dev-server -D

    安装解析vue的插件

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

    根目录下创建webpack.config.js文件

    这里注意vue-loader不支持oneOf 不然会报错

    1. const path = require('path')
    2.  
    3. //  引入vue-loader的内置插件
    4. const {VueLoaderPlugin} = require('vue-loader')
    5.  
    6.  
    7. module.exports = {
    8.     // 配置入口文件
    9.     entry:'./src/main.js',
    10.     // 配置文件的出口
    11.     output:{
    12.         path:path.resolve(__dirnamem, 'dist'),
    13.         filename:'main.js'
    14.     },
    15.     // 配置loader
    16.     module:{
    17.         rules:[
    18.             {
    19.                 test:/\.vue$/i,
    20.                 use:['vue-loader']
    21.             }
    22.         ]
    23.     },
    24.     plugins:[
    25.         new VueLoaderPlugin(),
    26.     ]
    27. }

    创建html模板

    1. public/index.html
    2.  
    3. <!DOCTYPE html>
    4. <html lang="en">
    5. <head>
    6.     <meta charset="UTF-8">
    7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    9.     <title>Document</title>
    10. </head>
    11. <body>
    12.     <div id="app"></div>
    13. </body>
    14. </html>

    安装解析生产html插件

    npm i  html-webpack-plugin --save-dev

    配置

    1. // 引入 html-webpack-plugin
    2. const HtmlWebpackPlugin = require('html-webpack-plugin')
    3.  
    4.  
    5.     new HtmlWebpackPlugin({
    6.       template: path.resolve(__dirname, "../public/index.html"),
    7.     }),

    解析样式

    npm i css-loader less-loader postcss-loader postcss-preset-env style-loader --save-dev

    1.             {
    2.                 test:/\.vue$/i,
    3.                loader: 'vue-loader'
    4.             },
    5.             {
    6.                 test:/\.css$/i,
    7.                 use:['stylel-loader', 'css-loader']
    8.             },
    9.             {
    10.                 test:/\.less$/i,
    11.                 use:['stylel-loader'，'css-loader', 'less-loader']
    12.             },

    安装postcss-preset-env 能解决css大多数样式兼容性问题 需要和packjson.js中的browserslist指定兼容性配合使用

    1. packjson.js
    2.  
    3. "browserslist": [
    4.     "last 2 version",
    5.     "> 1%",
    6.     "not dead"
    7.   ]

    封装样式loader

    1. const getStyleLoaders = (pre) => {
    2.   return [
    3.     "style-loader",
    4.     "css-loader",
    5.     {
    6.       loader: "postcss-loader",
    7.       options: {
    8.         postcssOptions: {
    9.           plugins: [
    10.             "postcss-preset-env", // 需要安装postcss-preset-env 能解决css大多数样式兼容性问题 和packjson.js中的browserslist来指定兼容性
    11.           ],
    12.         },
    13.       },
    14.     },
    15.     pre
    16.   ].filter(Boolean);
    17. };
    1.             {
    2.                 test:/\.vue$/i,
    3.                loader: 'vue-loader'
    4.             },
    5.             {
    6.                 test:/\.css$/i,
    7.                 use: getStyleLoaders()
    8.             },
    9.             {
    10.                 test:/\.less$/i,
    11.                 use: getStyleLoaders("less-loader"),
    12.             },

    处理图片

    1. npm i image-minimizer-webpack-plugin imagemin
    2. 无损压缩 
    3. npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D
    1.       {
    2.         test: /\.(png|jpe?g|gif|svg)$/,
    3.         type: "asset",
    4.         parser: {
    5.           dataUrlCondition: {
    6.             maxSize: 10 * 1024, // 小于10kb的图片会被转为base64处理
    7.           },
    8.         },
    9.       },
    1. const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");//压缩图片
    2.  
    3.   optimization: {
    4.     minimizer: [
    5.       // 压缩图片
    6.       new ImageMinimizerPlugin({
    7.         minimizer: {
    8.           implementation: ImageMinimizerPlugin.imageminGenerate,
    9.           options: {
    10.             plugins: [
    11.               ["gifsicle", { interlaced: true }],
    12.               ["jpegtran", { progressive: true }],
    13.               ["optipng", { optimizationLevel: 5 }],
    14.               [
    15.                 "svgo",
    16.                 {
    17.                   plugins: [
    18.                     "preset-default",
    19.                     "prefixIds",
    20.                     {
    21.                       name: "sortAttrs",
    22.                       params: {
    23.                         xmlnsOrder: "alphabetical",
    24.                       },
    25.                     },
    26.                   ],
    27.                 },
    28.               ],
    29.             ],
    30.           },
    31.         },
    32.       }),
    33.     ],
    34.   },

    这里也可以不做图片的压缩配置，自己手动压缩图片

    压缩css并提取css成单独文件

    npm i css-minimizer-webpack-plugin mini-css-extract-plugin -D
    1. const MiniCssExtractPlugin = require("mini-css-extract-plugin");//将css代码单独打包
    2. const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");//css压缩
    3.  
    4. //提取css成单独文件
    5. const getStyleLoaders = (pre) => {
    6.   return [
    7.     MiniCssExtractPlugin.loader,//修改
    8.     "css-loader",
    9.     {
    10.       loader: "postcss-loader",
    11.       options: {
    12.         postcssOptions: {
    13.           plugins: [
    14.             "postcss-preset-env",
    15.           ],
    16.         },
    17.       },
    18.     },
    19.     pre
    20.   ].filter(Boolean);
    21. };
    22.  压缩css
    23.  new MiniCssExtractPlugin({
    24.       filename: 'static/css/[name].[contenthash:10].css',
    25.       chunkFilename: 'static/css/[name].[contenthash:10].chunk.css'
    26.     }),
    27.  
    28.     minimizer: [
    29.       new CssMinimizerPlugin(),//css压缩
    30.       new TerserWebpackPlugin(),//js压缩 因为css压缩了不压缩代码会有问题
    31.       new ImageMinimizerPlugin({
    32.     ...
    33.       }),
    34. ]

    配置eslint 和babel处理js文件

    npm i babel-loader eslint-webpack-plugin  eslint eslint-webpack-plugin eslint-plugin-vue

    创建.eslintrc.js和babel.config.js

    eslintrc.js

    1. module.exports = {
    2.   root: true,
    3.   env: {
    4.     node: true,
    5.   },
    6.   extends: ["plugin:vue/vue3-essential", "eslint:recommended"],
    7.   parserOptions: {
    8.     parser: "@babel/eslint-parser",
    9.   },
    10. };

    babel.config.js

    1. module.exports = {
    2.   presets: ["@vue/cli-plugin-babel/preset"],
    3. };
    1.       {
    2.         test: /\.(jsx|js)$/,
    3.         include: path.resolve(__dirname, "../src"),
    4.         loader: "babel-loader",
    5.         options: {
    6.           cacheDirectory: true,
    7.           cacheCompression: false,
    8.         },
    9.       },
    const ESLintWebpackPlugin = require("eslint-webpack-plugin");
    1.     new ESLintWebpackPlugin({
    2.       context: path.resolve(__dirname, "../src"),处理src文件夹中的内容
    3.       exclude: "node_modules",//不处理node_modules文件夹中的内容
    4.       //开启缓存
    5.       cache: true,
    6.       cacheLocation: path.resolve(
    7.         __dirname,
    8.         "../node_modules/.cache/.eslintcache"//缓存文件路径
    9.       ),
    10.     }),

    环境变量处理

    npm i cross-env
    1. // 需要通过 cross-env 定义环境变量 获取环境变量
    2.  
    3. const isProduction = process.env.NODE_ENV === "production";

    packjson.js

    1.   "scripts": {
    2.     "start": "npm run dev",
    3. //开发模式
    4.     "dev": "cross-env NODE_ENV=development webpack serve --config ./config/webpack.config.js",
    5. //生产模式
    6.     "build": "cross-env NODE_ENV=production webpack --config ./config/webpack.config.js"
    7.   },

    webpack.config.js

    1. // 需要通过 cross-env 定义环境变量 获取环境变量
    2. const isProduction = process.env.NODE_ENV === "production";
    3. const { DefinePlugin } = require("webpack");
    4.  
    5.     //定义环境变量
    6.     //cross-eny定义的环境变量给webpack打包工具使用
    7.     //DefinePlugin 定义的环境变量才是给源代码使用的 从而解决vue3页面警告的问题
    8.     new DefinePlugin({
    9.       __VUE_OPTIONS_API__: true,
    10.       __VUE_PROD_DEVTOOLS__: false
    11.  
    12.     }),

    处理图标

    在index中引入

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <link rel="short icon" href="favicon.ico">
    9.   <title>reactcli</title>
    10. </head>
    11.  
    12. <body>
    13.   <div id="app"></div>
    14. </body>
    15.  
    16. </html>

    这还不能实现效果，因为webpack只打包了src下的文件，index.html所处的public文件不会处理，

    单纯只是引入找不到public下的图标文件

    通过copyplugin处理

    1. const CopyPlugin = require("copy-webpack-plugin");//webpack没有处理public文件夹下文件 所有我们直接复制过去
    2.  
    3.     // 将public下面的资源复制到dist目录去（除了index.html）
    4.   new CopyPlugin({
    5.       patterns: [
    6.         {
    7.           from: path.resolve(__dirname, "../public"),
    8.           to: path.resolve(__dirname, "../dist"),
    9.           toType: "dir",
    10.           noErrorOnMissing: true, // 不生成错误
    11.           globOptions: {
    12.             // 忽略文件
    13.             ignore: ["**/index.html"],
    14.           },
    15.           info: {
    16.             // 跳过terser压缩js
    17.             minimized: true,
    18.           },
    19.         },
    20.       ],
    21.     }),
    22.   ].filter(Boolean)

    根据环境变量配置开发模式和生产模式下配置

    1. // webpack.config.js
    2. const path = require("path");
    3. const ESLintWebpackPlugin = require("eslint-webpack-plugin");
    4. const HtmlWebpackPlugin = require("html-webpack-plugin");
    5. const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    6. const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
    7. const TerserWebpackPlugin = require("terser-webpack-plugin");
    8. const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
    9. const { VueLoaderPlugin } = require("vue-loader");
    10. const { DefinePlugin } = require("webpack");
    11. const CopyPlugin = require("copy-webpack-plugin");
    12.  
    13. // 需要通过 cross-env 定义环境变量
    14. const isProduction = process.env.NODE_ENV === "production";
    15.  
    16. const getStyleLoaders = (preProcessor) => {
    17.   return [
    18.     isProduction ? MiniCssExtractPlugin.loader : "vue-style-loader",
    19.     "css-loader",
    20.     {
    21.       loader: "postcss-loader",
    22.       options: {
    23.         postcssOptions: {
    24.           plugins: ["postcss-preset-env"],
    25.         },
    26.       },
    27.     },
    28.     preProcessor,
    29.   ].filter(Boolean);
    30. };
    31.  
    32. module.exports = {
    33.   entry: "./src/main.js",
    34.   output: {
    35.     path: isProduction ? path.resolve(__dirname, "../dist") : undefined,
    36.     filename: isProduction
    37.       ? "static/js/[name].[contenthash:10].js"
    38.       : "static/js/[name].js",
    39.     chunkFilename: isProduction
    40.       ? "static/js/[name].[contenthash:10].chunk.js"
    41.       : "static/js/[name].chunk.js",
    42.     assetModuleFilename: "static/js/[hash:10][ext][query]",
    43.     clean: true,
    44.   },
    45.   module: {
    46.     rules: [
    47.       {
    48.         // 用来匹配 .css 结尾的文件
    49.         test: /\.css$/,
    50.         // use 数组里面 Loader 执行顺序是从右到左
    51.         use: getStyleLoaders(),
    52.       },
    53.       {
    54.         test: /\.less$/,
    55.         use: getStyleLoaders("less-loader"),
    56.       },
    57.       {
    58.         test: /\.s[ac]ss$/,
    59.         use: getStyleLoaders("sass-loader"),
    60.       },
    61.       {
    62.         test: /\.styl$/,
    63.         use: getStyleLoaders("stylus-loader"),
    64.       },
    65.       {
    66.         test: /\.(png|jpe?g|gif|svg)$/,
    67.         type: "asset",
    68.         parser: {
    69.           dataUrlCondition: {
    70.             maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
    71.           },
    72.         },
    73.       },
    74.       {
    75.         test: /\.(ttf|woff2?)$/,
    76.         type: "asset/resource",
    77.       },
    78.       {
    79.         test: /\.(jsx|js)$/,
    80.         include: path.resolve(__dirname, "../src"),
    81.         loader: "babel-loader",
    82.         options: {
    83.           cacheDirectory: true,
    84.           cacheCompression: false,
    85.           plugins: [
    86.             // "@babel/plugin-transform-runtime" // presets中包含了
    87.           ],
    88.         },
    89.       },
    90.       // vue-loader不支持oneOf
    91.       {
    92.         test: /\.vue$/,
    93.         loader: "vue-loader", // 内部会给vue文件注入HMR功能代码
    94.         options: {
    95.           // 开启缓存
    96.           cacheDirectory: path.resolve(
    97.             __dirname,
    98.             "node_modules/.cache/vue-loader"
    99.           ),
    100.         },
    101.       },
    102.     ],
    103.   },
    104.   plugins: [
    105.     new ESLintWebpackPlugin({
    106.       context: path.resolve(__dirname, "../src"),
    107.       exclude: "node_modules",
    108.       cache: true,
    109.       cacheLocation: path.resolve(
    110.         __dirname,
    111.         "../node_modules/.cache/.eslintcache"
    112.       ),
    113.     }),
    114.     new HtmlWebpackPlugin({
    115.       template: path.resolve(__dirname, "../public/index.html"),
    116.     }),
    117.     new CopyPlugin({
    118.       patterns: [
    119.         {
    120.           from: path.resolve(__dirname, "../public"),
    121.           to: path.resolve(__dirname, "../dist"),
    122.           toType: "dir",
    123.           noErrorOnMissing: true,
    124.           globOptions: {
    125.             ignore: ["**/index.html"],
    126.           },
    127.           info: {
    128.             minimized: true,
    129.           },
    130.         },
    131.       ],
    132.     }),
    133.     isProduction &&
    134.       new MiniCssExtractPlugin({
    135.         filename: "static/css/[name].[contenthash:10].css",
    136.         chunkFilename: "static/css/[name].[contenthash:10].chunk.css",
    137.       }),
    138.     new VueLoaderPlugin(),
    139.     new DefinePlugin({
    140.       __VUE_OPTIONS_API__: "true",
    141.       __VUE_PROD_DEVTOOLS__: "false",
    142.     }),
    143.   ].filter(Boolean),
    144.   optimization: {
    145.     minimize: isProduction,
    146.     // 压缩的操作
    147.     minimizer: [
    148.       new CssMinimizerPlugin(),
    149.       new TerserWebpackPlugin(),
    150.       new ImageMinimizerPlugin({
    151.         minimizer: {
    152.           implementation: ImageMinimizerPlugin.imageminGenerate,
    153.           options: {
    154.             plugins: [
    155.               ["gifsicle", { interlaced: true }],
    156.               ["jpegtran", { progressive: true }],
    157.               ["optipng", { optimizationLevel: 5 }],
    158.               [
    159.                 "svgo",
    160.                 {
    161.                   plugins: [
    162.                     "preset-default",
    163.                     "prefixIds",
    164.                     {
    165.                       name: "sortAttrs",
    166.                       params: {
    167.                         xmlnsOrder: "alphabetical",
    168.                       },
    169.                     },
    170.                   ],
    171.                 },
    172.               ],
    173.             ],
    174.           },
    175.         },
    176.       }),
    177.     ],
    178.     splitChunks: {
    179.       chunks: "all",
    180.     },
    181.     runtimeChunk: {
    182.       name: (entrypoint) => `runtime~${entrypoint.name}`,
    183.     },
    184.   },
    185.   resolve: {
    186.     extensions: [".vue", ".js", ".json"],
    187.   },
    188.   devServer: {
    189.     open: true,
    190.     host: "localhost",
    191.     port: 3000,
    192.     hot: true,
    193.     compress: true,
    194.     historyApiFallback: true, // 解决vue-router刷新404问题
    195.   },
    196.   mode: isProduction ? "production" : "development",
    197.   devtool: isProduction ? "source-map" : "cheap-module-source-map",
    198. };

    vue的全家桶配置

    vue-router

    npm i vue-router


    在src文件下创建一个 router 文件夹，里边创建一个index.js

    1. import { createRouter,createWebHistory } from 'vue-router'
    2. import index from './components/index.vue'
    3. import login from './components/login.vue'
    4. const routerHistory = createWebHistory()
    5. const routes = [
    6.     {
    7.         path:'/',
    8.         name:'index',
    9.         component:index
    10.     }, 
    11.     {
    12.         path:'/login',
    13.         name:'login',
    14.         component:login
    15.     }
    16. ]
    17. const router = createRouter({
    18.     history: routerHistory,
    19.     routes
    20. })
    21. export default router



    在main.js中引入router

    1. import { createApp } from 'vue'
    2. import App from './App.vue'
    3. import router from './router'
    4. import './index.css'
    5. const app = createApp(App);
    6. app.use(router);
    7. app.mount('#app')


    vuex


    安装 vuex

    npm i vuex


    在src文件下创建一个 store 文件夹，里边创建一个index.js

    1. //  准备引入 vuex
    2. import { createStore } from 'vuex'
    3.  
    4. const store = createStore({
    5.     // state:{},
    6.     state(){},
    7.     mutations:{},
    8.     getters:{},
    9.     actions:{},
    10.     modules:{}
    11. })
    12. export default store


    在main.js中引入veux

    1.  
    2. import { createApp } from 'vue'
    3. import App from './App.vue'
    4. import router from './router'
    5.  
    6. // 挂载 
    7. createApp(App).use(router).mount('#app')
  • 相关阅读:
    [CSS]浮动
    Fedora Linux 38 下可以安装几个数学软件
    vcluster -- 基于虚拟集群的多租户方案
    [机缘参悟-73]：深度思考：心智提升的七个阶段
    算法篇：查找算法
    C++ map / multimap容器
    pytest合集（7）— 参数化/数据驱动
    基于SSM的餐厅点餐系统设计与实现（Java+MySQL）
    xlsxStyle + xlsx.full.min 导出数据，并设置导出样式
    C#基础入门教程-数据类型
  • 原文地址：https://blog.csdn.net/qq_60587956/article/details/126808303