記錄--從原理分析vue開發環境搭建的全部過程

来源:https://www.cnblogs.com/smileZAZ/archive/2022/10/25/16825608.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 平時大家開發vue項目的時候，相信大部分人都是使用 vue-cli腳手架生成的項目架構，然後 npm run install 安裝依賴，npm run serve啟動項目然後就開始寫業務代碼了。 但是對項目里的webpack封裝和配置瞭解 ...


這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

平時大家開發vue項目的時候，相信大部分人都是使用 vue-cli腳手架生成的項目架構，然後 npm run install 安裝依賴，npm run serve啟動項目然後就開始寫業務代碼了。

但是對項目里的webpack封裝和配置瞭解的不清楚，容易導致出問題不知如何解決，或者不會通過webpack去擴展新功能。

該篇文章主要是想告訴兄弟們，如何一步一步的通過 webpack4來搭建自己的vue開發環境

首先我們要知道 vue-cli生成的項目，幫我們配置好了哪些功能？

  1. ES6代碼轉換成ES5代碼
  2. scss/sass/less/stylus轉css
  3. .vue文件轉換成js文件
  4. 使用 jpg、png，font等資源文件
  5. 自動添加css各瀏覽器產商的首碼
  6. 代碼熱更新
  7. 資源預載入
  8. 每次構建代碼清除之前生成的代碼
  9. 定義環境變數
  10. 區分開發環境打包跟生產環境打包
  11. ....

1. 搭建 webpack 基本環境

該篇文章並不會細講 webpack 是什麼東西，如果還不是很清楚的話，可以先去看看 webpack官網

簡單的說，webpack是一個模塊打包機，可以分析你的項目依賴的模塊以及一些瀏覽器不能直接運行的語言jsx、vue等轉換成 js、css文件等，供瀏覽器使用。

 

1.1 初始化項目

在命令行中執行 npm init 然後一路回車就行了，主要是生成一些項目基本信息。最後會生成一個 package.json 文件

npm init

1.2 安裝webpack

1.3 寫點小代碼測試一下webpack是否安裝成功了

新建一個src文件夾，然後再建一個main.js文件

// src/main.js
console.log('hello webpack')

然後在 package.json 下麵加一個腳本命令

 然後運行該命令

npm run serve

如果在 dist 目錄下生成了一個main.js文件，則表示webpack工作正常

2. 開始配置功能

  • 新建一個 build 文件夾，用來存放 webpack配置相關的文件
  • 在build文件夾下新建一個webpack.config.js，配置webpack的基本配置
  • 修改 webpack.config.js配置

  • 修改package.json 文件，將之前添加的 serve 修改為
"serve": "webpack ./src/main.js --config ./build/webpack.config.js"

2.1 配置 ES6/7/8 轉 ES5代碼

  • 安裝相關依賴
npm install babel-loader @babel/core @babel/preset-env
  • 修改webpack.config.js配置

  • 在項目根目錄添加一個 babel.config.js 文件

  • 然後執行 npm run serve 命令，可以看到 ES6代碼被轉成了ES5代碼了

2.1.1 ES6/7/8 Api 轉es5

babel-loader只會將 ES6/7/8語法轉換為ES5語法，但是對新api並不會轉換。

我們可以通過 babel-polyfill 對一些不支持新語法的客戶端提供新語法的實現

  • 安裝
npm install @babel/polyfill
  • 修改webpack.config.js配置

在 entry 中添加 @babel-polyfill

2.1.2 按需引入polyfill

2.1.2 和 2.1.1 只需要配置一個就行

修改時間 2019-05-05、 來自評論區 兮漫天 的提醒

  • 安裝相關依賴
npm install core-js@2 @babel/runtime-corejs2 -S
  • 修改 babel-config.js

配置了按需引入 polyfill 後，用到es6以上的函數，babel會自動導入相關的polyfill，這樣能大大減少 打包編譯後的體積

2.2 配置 scss 轉 css

在沒配置 css 相關的 loader 時，引入scss、css相關文件打包的話，會報錯

  • 安裝相關依賴
npm install sass-loader dart-sass css-loader style-loader -D

sass-loader, dart-sass主要是將 scss/sass 語法轉為css

css-loader主要是解析 css 文件

style-loader 主要是將 css 解析到 html頁面 的 style 上

  • 修改webpack.config.js配置

2.3 配置 postcss 實現自動添加css3首碼

  • 安裝相關依賴
npm install postcss-loader autoprefixer -D
  • 修改webpack.config.js配置

  • 在項目根目錄下新建一個 postcss.config.js

2.3 使用 html-webpack-plugin來創建html頁面

使用 html-webpack-plugin來創建html頁面，並自動引入打包生成的js文件

  • 安裝依賴
npm install html-webpack-plugin -D
  • 新建一個 public/index.html 頁面
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>
  • 修改 webpack-config.js 配置

2.4 配置 devServer 熱更新功能

通過代碼的熱更新功能，我們可以實現不刷新頁面的情況下，更新我們的頁面

  • 安裝依賴
npm install webpack-dev-server -D
  • 修改webpack.config.js配置

通過配置 devServer 和 HotModuleReplacementPlugin 插件來實現熱更新

2.5 配置 webpack 打包 圖片、媒體、字體等文件

  • 安裝依賴
npm install file-loader url-loader -D

file-loader 解析文件url，並將文件複製到輸出的目錄中

url-loader 功能與 file-loader 類似，如果文件小於限制的大小。則會返回 base64 編碼，否則使用 file-loader 將文件複製到輸出的目錄中

  • 修改 webpack-config.js 配置 添加 rules 配置，分別對 圖片，媒體，字體文件進行配置
// build/webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
module.exports = {
  // 省略其它配置 ...
  module: {
    rules: [
      // ...
      {
        test: /\.(jpe?g|png|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 4096,
              fallback: {
                loader: 'file-loader',
                options: {
                    name: 'img/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 4096,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'media/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 4096,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'fonts/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
    ]
  },
  plugins: [
    // ...
  ]
}

3. 讓 webpack 識別 .vue 文件

  • 安裝需要的依賴文件
npm install vue-loader vue-template-compiler cache-loader thread-loader -D
npm install vue -S

vue-loader 用於解析.vue文件

vue-template-compiler 用於編譯模板

cache-loader 用於緩存loader編譯的結果

thread-loader 使用 worker 池來運行loader，每個 worker 都是一個 node.js 進程。

  • 修改 webpack.config.js配置
// build/webpack.config.js
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
  // 指定打包模式
  mode: 'development',
  entry: {
    // ...
  },
  output: {
    // ...
  },
  devServer: {
    // ...
  },
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.runtime.esm.js'
    },
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'cache-loader'
          },
          {
            loader: 'thread-loader'
          },
          {
            loader: 'vue-loader',
            options: {
              compilerOptions: {
                preserveWhitespace: false
              },
            }
          }
        ]
      },
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: 'cache-loader'
          },
          {
            loader: 'thread-loader'
          },
          {
            loader: 'babel-loader'
          }
        ]
      },
      // ...
    ]
  },
  plugins: [
    // ...
    new VueLoaderPlugin()
  ]
}
  • 測試一下
  1. 在 src 新建一個 App.vue
// src/App.vue
<template>
  <div class="App">
    Hello World
  </div>
</template>

<script>
export default {
  name: 'App',

  data() {
    return {};
  }
};
</script>

<style lang="scss" scoped>
.App {
  color: skyblue;
}
</style>
  1. 修改 main.js
import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')
  1. 運行一下
npm run serve

4. 定義環境變數

通過 webpack提供的DefinePlugin插件，可以很方便的定義環境變數

plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        VUE_APP_BASE_URL: JSON.stringify('http://localhost:3000')
      }
    }),
]

5. 區分生產環境和開發環境

新建兩個文件

  • webpack.dev.js 開發環境使用

  • webpack.prod.js 生產環境使用

  • webpack.config.js 公用配置

  • 開發環境與生產環境的不同

5.1 開發環境

  1. 不需要壓縮代碼
  2. 需要熱更新
  3. css不需要提取到css文件
  4. sourceMap
  5. ...

5.2 生產環境

  1. 壓縮代碼
  2. 不需要熱更新
  3. 提取css，壓縮css文件
  4. sourceMap
  5. 構建前清除上一次構建的內容
  6. ...
  • 安裝所需依賴
npm i @intervolga/optimize-cssnano-plugin mini-css-extract-plugin clean-webpack-plugin webpack-merge copy-webpack-plugin -D
  1. @intervolga/optimize-cssnano-plugin 用於壓縮css代碼
  2. mini-css-extract-plugin 用於提取css到文件中
  3. clean-webpack-plugin 用於刪除上次構建的文件
  4. webpack-merge 合併 webpack配置
  5. copy-webpack-plugin 用戶拷貝靜態資源

5.3 開發環境配置

  • build/webpack.dev.js
// build/webpack.dev.js
const merge = require('webpack-merge')
const webpackConfig = require('./webpack.config')
const webpack = require('webpack')
module.exports = merge(webpackConfig, {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  module: {
    rules: [
      {
        test: /\.(scss|sass)$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2
            }
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: require('dart-sass')
            }
          },
          {
            loader: 'postcss-loader'
          }
        ]
      },
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development')
      }
    }),
  ]
})
  • webpack.config.js
// build/webpack.config.js
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
  entry: {
    // 配置入口文件
    main: path.resolve(__dirname, '../src/main.js')
  },
  output: {
    // 配置打包文件輸出的目錄
    path: path.resolve(__dirname, '../dist'),
    // 生成的 js 文件名稱
    filename: 'js/[name].[hash:8].js',
    // 生成的 chunk 名稱
    chunkFilename: 'js/[name].[hash:8].js',
    // 資源引用的路徑
    publicPath: '/'
  },
  devServer: {
    hot: true,
    port: 3000,
    contentBase: './dist'
  },
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.runtime.esm.js'
    },
    extensions: [
      '.js',
      '.vue'
    ]
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'cache-loader'
          },
          {
            loader: 'vue-loader',
            options: {
              compilerOptions: {
                preserveWhitespace: false
              },
            }
          }
        ]
      },
      {
        test: /\.jsx?$/,
        loader: 'babel-loader'
      },

      {
        test: /\.(jpe?g|png|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 4096,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'img/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 4096,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'media/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 4096,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'fonts/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
    ]
  },
  plugins: [
    new VueLoaderPlugin(),

    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../public/index.html')
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
  ]
}

5.4 生產環境配置

const path = require('path')
const merge = require('webpack-merge')
const webpack = require('webpack')
const webpackConfig = require('./webpack.config')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssnanoPlugin = require('@intervolga/optimize-cssnano-plugin');
/*   clean-webpack-plugin 3.0 以上的版本需要使用對象結構  */
// const CleanWebpackPlugin = require('clean-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = merge(webpackConfig, {
  mode: 'production',
  devtool: '#source-map',
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          name: 'chunk-vendors',
          test: /[\\\/]node_modules[\\\/]/,
          priority: -10,
          chunks: 'initial'
        },
        common: {
          name: 'chunk-common',
          minChunks: 2,
          priority: -20,
          chunks: 'initial',
          reuseExistingChunk: true
        }
      }
    }
  },
  module: {
    rules: [
      {
        test: /\.(scss|sass)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2
            }
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: require('dart-sass')
            }
          },
          {
            loader: 'postcss-loader'
          }
        ]
      },
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: 'production'
      }
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:8].css',
      chunkFilename: 'css/[name].[contenthash:8].css'
    }),
    new OptimizeCssnanoPlugin({
      sourceMap: true,
      cssnanoOptions: {
        preset: [
          'default',
          {
            mergeLonghand: false,
            cssDeclarationSorter: false
          }
        ]
      }
    }),
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../public'),
        to: path.resolve(__dirname, '../dist')
      }
    ]),
    new CleanWebpackPlugin()
  ]
})

5.5 修改package.json

"scripts": {
    "serve": "webpack-dev-server --config ./build/webpack.dev.js",
    "build": "webpack --config ./build/webpack.prod.js"
},

6 打包分析

有的時候，我們需要看一下webpack打包完成後，到底打包了什麼東西，

這時候就需要用到這個模塊分析工具了 webpack-bundle-analyzer

  • 安裝依賴
npm install --save-dev webpack-bundle-analyzer
  • 修改webpack-prod.js配置，在 plugins屬性中新增一個插件

在開發環境中，我們是沒必要進行模塊打包分析的，所以我們將插件配置在了生產環境的配置項中

  • 運行打包命令
npm run build

執行成功後會自動打開這個頁面

7. 集成 VueRouter,Vuex

  1. 首先是安裝相關依賴
npm install vue-router vuex --save

7.1 集成 Vue-Router

  • 新增視圖組件 在 src 目錄下新增兩個視圖組件 src/views/Home.vue 和 src/views/About.vue
// src/views/Home.vue
<template>
  <div class="Home">
    <h2>Home</h2>
  </div>
</template>

<script>
export default {
  name: 'Home',

  data() {
    return {};
  }
};
</script>

<style lang="scss" scoped>
</style>

About.vue 內容跟 Home.vue 差不多，將裡面的 Home 換成 About 就OK了

  • 新增路由配置文件

在 src 目錄下新增一個 router/index.js 文件

// src/router/index.js
import Vue from 'vue'
import VueRouter from "vue-router";
import Home from '../views/Home';
import About from '../views/About';
Vue.use(VueRouter)
export default new VueRouter({
  mode: 'hash',
  routes: [
    {
      path: '/Home',
      component: Home
    },
    {
      path: '/About',
      component: About
    },
    {
      path: '*',
      redirect: '/Home'
    }
  ]
})
  • 修改 main.js 文件
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
  • 修改 App.vue 組件
// App.vue
// 在 template 中添加
// src/App.vue
<template>
  <div class="App">
    Hello World
  </div>
  <div>
      // router-link 組件 用來導航到哪個路由
      <router-link to="/Home">go Home</router-link>
      <router-link to="/About">go About</router-link>
    </div>
    <div>
      // 用於展示匹配到的路由視圖組件
      <router-view></router-view>
    </div>
</template>

<script>
export default {
  name: 'App',

  data() {
    return {};
  }
};
</script>

<style lang="scss" scoped>
.App {
  color: skyblue;
}
</style>

運行 npm run serve 命令，如沒配置錯誤，是可以看到點擊不同的路由，會切換到不同的路由視圖

7.2 配置路由懶載入

在沒配置路由懶載入的情況下，我們的路由組件在打包的時候，都會打包到同一個js文件去，當我們的視圖組件越來越多的時候，就會導致這個 js 文件越來越大。然後就會導致請求這個文件的時間變長，最終影響用戶體驗

  1. 安裝依賴
npm install @babel/plugin-syntax-dynamic-import --save-dev
  1. 修改babel.config.js
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        useBuiltIns: "usage"
      }
    ]
  ],
  plugins: [
     // 添加這個
    '@babel/plugin-syntax-dynamic-import'
  ]
}
  1. 修改 router/index.js 路由配置文件
import Vue from 'vue'
import VueRouter from "vue-router";
Vue.use(VueRouter)
export default new VueRouter({
  mode: 'hash',
  routes: [
    {
      path: '/Home',
      component: () => import(/* webpackChunkName: "Home" */ '../views/Home.vue')
      // component: Home
    },
    {
      path: '/About',
      component: () => import(/* webpackChunkName: "About" */ '../views/About.vue')
      // component: About
    },
    {
      path: '*',
      redirect: '/Home'
    }
  ]
})
  1. 運行命令 npm run build 查看是否生成了 Home...js 文件 和 About...js 文件

7.3 集成 Vuex

  1. 在 src 目錄下新建一個 store/index.js 文件
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
  counter: 0
}
const actions = {
  add: ({commit}) => {
    return commit('add')
  }
}
const mutations = {
  add: (state) => {
    state.counter++
  }
}
const getters = {
  getCounter (state) {
    return state.counter
  }
}
export default new Vuex.Store({
  state,
  actions,
  mutations,
  getters
})
  1. 修改 main.js 文件 導入 vuex
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'  // ++
new Vue({
  router,
  store,    // ++
  render: h => h(App)
}).$mount('#app')
  1. 修改 App.vue ，查看 vuex 配置效果
// App.vue
<template>
  <div class="App">
    <div>
      <router-link to="/Home">go Home</router-link>
      <router-link to="/About">go About</router-link>
    </div>
    <div>
      <p>{{getCounter}}</p>
      <button @click="add">add</button>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
export default {
  name: 'App',
  data() {
    return {};
  },
  computed: {
    ...mapGetters(['getCounter'])
  },
  methods: {
    ...mapActions(['add'])
  }
};
</script>
<style lang="scss" scoped>
.App {
  text-align: center;
  color: skyblue;
  font-size: 28px;
}
</style>
  1. 運行命令 npm run serve

當點擊按鈕的時候，可以看到我們的getCounter一直在增加

8 總結

到目前為止，我們已經成功的自己搭建了一個 vue 開發環境，不過還是有一些功能欠缺的，有興趣的小伙伴可以交流交流。在搭建過程中，還是會踩很多坑的。

如果還不熟悉 webpack 的話，建議自己搭建一次。可以讓自己能深入的理解 vue-cli 替我們做了什麼

項目代碼：github.com/lentoo/vue-…

 

本文轉載於:

https://juejin.cn/post/6844903833160646663

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 阿裡雲市場StoneDB購買與部署指南
    本文主要描述用戶如何從阿裡雲市場購買、使用石原子公司的StoneDB(HTAP)資料庫產品。 1、購買 1.1 找到商品 通過阿裡雲官網的雲市場類目進入雲市場首頁，搜索StoneDB，即可發現產品，如下圖： 1.2 選擇規格 點擊雲市場的商品，進入StoneDB商品詳情頁，在商品詳情頁可以選擇需要購 ...
  • 圖文結合帶你搞懂InnoDB MVCC
    GreatSQL社區原創內容未經授權不得隨意使用，轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本，使用上與MySQL一致。 前情提要 當前讀 快照讀 什麼是MVCC 三個隱藏欄位 Undo Log回滾日誌 MVCC版本鏈 ReadView讀視圖 不同隔離級別下MVCC分析 R ...
  • 赴一場開源盛會丨10月29日 COSCon'22 開源年會杭州分會場，這裡只差一個「你」！
    報名地址：https://www.bagevent.com/event/8322877 2022年，世界正在改變，開源創造價值。已經辦到第七屆的開源年會首次來到杭州與開發者們相聚。你眼中的開源是怎樣的？對於開源你有沒有想要講述的？ 「開源」對於很多人而言，其存在的意義早就不止在於源代碼的開放彙集，更 ...
  • 第三章-標準SQL語句
    3.1 SQL概述： SQL：結構化查詢語言，是關係資料庫的標準語言，SQL是一個通用的、功能極強的關係資料庫語言 結構化查詢：理解：就是只要告訴資料庫我要乾什麼，怎麼乾就可以了 3.1.2 SQL的特點： 綜合統一: 集數據定義語言 DDL，數據操縱語言 DML，數據控制語言 DCL功能於一體， ...
  • Oracle資料庫的兩種授權收費方式介紹！
    首發微信公眾號：SQL資料庫運維 原文鏈接：https://mp.weixin.qq.com/s?__biz=MzI1NTQyNzg3MQ==&mid=2247485212&idx=1&sn=450e9e94fa709b5eeff0de371c62072b&chksm=ea37536cdd40da7 ...
  • Flutter(八)：Flutter路由管理(Router)
    一、術語 路由(route)： 在 Flutter 中，屏 (screen) 和 頁面 (page) 都叫做 路由 (route)。 在 Android 開發中，Activity 相當於“路由”，在 iOS 開發中，ViewController 相當於“路由”。在 Flutter 中，“路由”也是一 ...
  • SpringCloud微服務實戰——搭建企業級開發框架（四十六）：【移動開發】整合uni-app搭建移動端快速開發框架-環境搭建
    近年來uni-app發展勢頭迅猛，只要會vue.js，就可以開發一套代碼，發佈移動應用到iOS、Android、Web（響應式）、以及各種小程式（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應用等多個平臺。憑藉著此跨平臺的特性，吸引了大批公司和開發者的青睞，據官網顯示目前其有900萬 ...
  • Vitepress搭建組件庫文檔（上）—— 基本配置
    在 vite 出現以前，vuepress 是搭建組件庫文檔不錯的工具，支持以 Markdown 方式編寫文檔。伴隨著 vite 的發展，vitepress 已經到了 1.0.0-alpha.22 版本，很多博客還是基於 0.x 版本，1.0.0 與 0.22 配置略有差別，尤其是一些 vitepre ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類