VUE build:gulp打包：测试、正式环境

目录

项目结构

Gulp

VUE使用Gulp

Vue安装Gulp

Vue定义Gulp.js

package.json

build文件夹

config文件夹

static-config文件夹

项目结构

Gulp

    Gulp是一个自动化构建工具，可以帮助前端开发者通过自动化任务来管理工作流程。Gulp使用Node.js的代码编写，可以更加灵活地管理代码以及任务流程.

   对于Vue.js前端框架，使用Gulp并不是必须的，因为Vue.js提供了Vue-cli，可以帮助前端开发者快速搭建项目以及项目的构建环境。Vue-cli是一个基于Webpack的脚手架工具，可以快速创建Vue.js应用程序，并且帮助生成项目骨架以及构建系统。其内置了webpack、Babel、ESLint等工具，可以方便地进行模块打包、ES6转换、代码检查等。使用Vue-cli，可以弹性地对项目进行管理和构建。

   但是对于一些需要个性化开发的开发者来说，Vue-cli的功能是不够的。前端开发者需要使用其他的构建工具来满足他们的需求，比如Gulp。使用Gulp可以帮助开发者扩展Vue-cli的功能，同时使构建流程更加简单，例如使用Gulp可以定制SASS/LESS文件编译、CSS文件合并压缩、JS文件压缩混淆、图片压缩等等。这样可以方便地定制应用程序及其构建流程，同时减少重复操作。

   而且，使用Gulp也可以减少构建速度。Vue-cli虽然帮助我们构建了项目骨架以及构建环境，但是在打包大规模的代码时，打包速度较慢。使用Gulp可以在webpack后处理流程中进行Sass编译、Html统一压缩等操作，并提高构建速度。

   总之，对于Vue.js前端框架，使用Gulp并不是必须的，但是它提供了扩展功能、使构建流程更加简单、加快了打包速度等优点。使用Gulp进行项目的构建可以为前端开发者节省时间、精力，并且优化构建方式。因此，个性化开发需要Gulp的前端开发者可以使用它对Vue-cli进行扩展，而其余开发者可以继续使用Vue-cli快速构建Vue.js应用程序。

VUE使用Gulp

Vue安装Gulp

   首先，我们需要安装所需的依赖。我们需要全局安装Gulp，通过npm命令安装：

  npm install -g gulp-cli

    接下来，我们需要在项目根目录下安装Gulp和其他依赖（比如babel、browserify等）：

   npm install gulp babelify browserify gulp-babel gulp-rename gulp-sourcemaps gulp-uglify vinyl-buffer vinyl-source-stream vueify --save-dev

Vue定义Gulp.js

gulpfile.js代码如下：

var gulp = require('gulp');

var $    = require('gulp-load-plugins')();

var path = require('path');

var del  = require('del');

var version     = ''; // 版本号

var versionPath = ''; // 版本号路径

// prod-运行环境  qa-测试环境

var env         = process.env.npm_config_qa ? 'qa' : process.env.npm_config_uat ? 'uat' : 'prod';

// 文件夹

var distPath    = path.resolve('./dist');

// 创建版本号(年月日时分)

(function () {

  var d = new Date();

  var yy = d.getFullYear();

  var MM = d.getMonth() + 1 >= 10 ? (d.getMonth() + 1) : '0' + (d.getMonth() + 1);

  var DD = d.getDate() >= 10 ? d.getDate() : '0' + d.getDate();

  var h  = d.getHours() >= 10 ? d.getHours() : '0' + d.getHours();

  var mm = d.getMinutes() >= 10 ? d.getMinutes() : '0' + d.getMinutes();

  version = "" + yy + MM + DD + h + mm;

  versionPath = distPath + '/' + version;

})();

// 编译

if('qa'===env){

  gulp.task('build', $.shell.task([ 'node build/build-qa.js' ]));

}else if('prod'===env){

  gulp.task('build', $.shell.task([ 'node build/build-prod.js' ]));

}

// 创建版本号目录

gulp.task('create:versionCatalog', function () {

  return gulp.src(`${distPath}/static/**/*`)

    .pipe(gulp.dest(`${versionPath}/static/`))

});

// 替换${versionPath}/static/js/manifest.js window.SITE_CONFIG.cdnUrl占位变量

gulp.task('replace:cdnUrl', function () {

  return gulp.src(`${versionPath}/static/js/manifest.js`)

    .pipe($.replace(new RegExp(`"${require('./config').build.assetsPublicPath}"`, 'g'), 'window.SITE_CONFIG.cdnUrl + "/"'))

    .pipe(gulp.dest(`${versionPath}/static/js/`))

});

// 替换${versionPath}/static/config/index-${env}.js window.SITE_CONFIG['version']配置变量

gulp.task('replace:version', function () {

  return gulp.src(`${versionPath}/static/config/index-${env}.js`)

    .pipe($.replace(/window.SITE_CONFIG\['version'\] = '.*'/g, `window.SITE_CONFIG['version'] = '${version}'`))

    .pipe(gulp.dest(`${versionPath}/static/config/`))

});

// 合并${versionPath}/static/config/[index-${env}, init].js 至 ${distPath}/config/index.js

gulp.task('concat:config', function () {

  return gulp.src([`${versionPath}/static/config/index-${env}.js`, `${versionPath}/static/config/init.js`])

    .pipe($.concat('index.js'))

    .pipe(gulp.dest(`${distPath}/config/`))

});

//清除, 编译 / 处理项目中产生的文件

gulp.task('cleanBuild', function () {

  return del([`${distPath}/static`, `${versionPath}/static/config`])

});

// 清空

gulp.task('clean', function () {

  return del([versionPath])

});

//gulp.series|4.0 依赖

//gulp.parallel|4.0 多个依赖嵌套

gulp.task('default',gulp.series(gulp.series('build','create:versionCatalog','replace:cdnUrl','replace:version','concat:config','cleanBuild')));

package.json

build------打包正式环境

build:qa----打包测试环境

build文件夹

build-prod 、webpack.prod.confi.js 正式

build-qa  、webpack.qa.conf.js       测试

build-prod.js代码

'use strict'

require('./check-versions')()

process.env.NODE_ENV = 'production'

const ora = require('ora')

const rm = require('rimraf')

const path = require('path')

const chalk = require('chalk')

const webpack = require('webpack')

const config = require('../config')

const webpackConfig = require('./webpack.prod.conf')

const spinner = ora('building for production...')

spinner.start()

rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {

  if (err) throw err

  webpack(webpackConfig, (err, stats) => {

    spinner.stop()

    if (err) throw err

    process.stdout.write(stats.toString({

      colors: true,

      modules: false,

      children: false,

      chunks: false,

      chunkModules: false

    }) + '\n\n')

    if (stats.hasErrors()) {

      console.log(chalk.red('  Build failed with errors.\n'))

      process.exit(1)

    }

    console.log(chalk.cyan('  Build complete.\n'))

    console.log(chalk.yellow(

      '  Tip: built files are meant to be served over an HTTP server.\n' +

      '  Opening index.html over file:// won\'t work.\n'

    ))

  })

})

build-qa.js代码

'use strict'

require('./check-versions')()

process.env.NODE_ENV = 'production'

const ora = require('ora')

const rm = require('rimraf')

const path = require('path')

const chalk = require('chalk')

const webpack = require('webpack')

const config = require('../config')

const webpackConfig = require('./webpack.qa.conf')

const spinner = ora('building for production...')

spinner.start()

rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {

  if (err) throw err

  webpack(webpackConfig, (err, stats) => {

    spinner.stop()

    if (err) throw err

    process.stdout.write(stats.toString({

      colors: true,

      modules: false,

      children: false,

      chunks: false,

      chunkModules: false

    }) + '\n\n')

    if (stats.hasErrors()) {

      console.log(chalk.red('  Build failed with errors.\n'))

      process.exit(1)

    }

    console.log(chalk.cyan('  Build complete.\n'))

    console.log(chalk.yellow(

      '  Tip: built files are meant to be served over an HTTP server.\n' +

      '  Opening index.html over file:// won\'t work.\n'

    ))

  })

})

webpack.prod.conf.js

'use strict'

const path = require('path')

const utils = require('./utils')

const webpack = require('webpack')

const config = require('../config')

const merge = require('webpack-merge')

const baseWebpackConfig = require('./webpack.base.conf')

const CopyWebpackPlugin = require('copy-webpack-plugin')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const ExtractTextPlugin = require('extract-text-webpack-plugin')

const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const env =require('../config/prod.env')

const webpackConfig = merge(baseWebpackConfig, {

  module: {

    rules: utils.styleLoaders({

      sourceMap: config.build.productionSourceMap,

      extract: true,

      usePostCSS: true

    })

  },

  devtool: config.build.productionSourceMap ? config.build.devtool : false,

  output: {

    path: config.build.assetsRoot,

    filename: utils.assetsPath('js/[name].js'),

    chunkFilename: utils.assetsPath('js/[id].js')

  },

  plugins: [

    new webpack.DefinePlugin({

      'process.env': env

    }),

    new UglifyJsPlugin({

      uglifyOptions: {

        compress: {

          warnings: false

        }

      },

      sourceMap: config.build.productionSourceMap,

      parallel: true

    }),

    // extract css into its own file

    new ExtractTextPlugin({

      filename: utils.assetsPath('css/[name].css'),

      allChunks: false,

    }),

    new OptimizeCSSPlugin({

      cssProcessorOptions: config.build.productionSourceMap

        ? { safe: true, map: { inline: false } }

        : { safe: true }

    }),

    new HtmlWebpackPlugin({

      filename: process.env.NODE_ENV === 'testing'? 'index.html' : config.build.index,

      template: 'index.html',

      inject: false,

      minify: {

        removeComments: true,

        collapseWhitespace: true,

        removeAttributeQuotes: true

      },

      chunksSortMode: 'dependency'

    }),

    new webpack.HashedModuleIdsPlugin(),

    new webpack.optimize.ModuleConcatenationPlugin(),

    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

        )

      }

    }),

    new webpack.optimize.CommonsChunkPlugin({

      name: 'manifest',

      minChunks: Infinity

    }),

    new webpack.optimize.CommonsChunkPlugin({

      name: 'app',

      async: 'vendor-async',

      children: true,

      minChunks: 3

    }),

    // copy custom static assets

    new CopyWebpackPlugin([

      {

        from: path.resolve(__dirname, '../static'),

        to: config.build.assetsSubDirectory,

        ignore: ['.*']

      }

    ])

  ]

})

if (config.build.productionGzip) {

  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(

    new CompressionWebpackPlugin({

      asset: '[path].gz[query]',

      algorithm: 'gzip',

      test: new RegExp(

        '\\.(' +

        config.build.productionGzipExtensions.join('|') +

        ')$'

      ),

      threshold: 10240,

      minRatio: 0.8

    })

  )

}

if (config.build.bundleAnalyzerReport) {

  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

  webpackConfig.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' }))

}

module.exports = webpackConfig

webpack.qa.conf.js代码

'use strict'

const path = require('path')

const utils = require('./utils')

const webpack = require('webpack')

const config = require('../config')

const merge = require('webpack-merge')

const baseWebpackConfig = require('./webpack.base.conf')

const CopyWebpackPlugin = require('copy-webpack-plugin')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const ExtractTextPlugin = require('extract-text-webpack-plugin')

const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const env =require('../config/qa.env')

const webpackConfig = merge(baseWebpackConfig, {

  module: {

    rules: utils.styleLoaders({

      sourceMap: config.build.productionSourceMap,

      extract: true,

      usePostCSS: true

    })

  },

  devtool: config.build.productionSourceMap ? config.build.devtool : false,

  output: {

    path: config.build.assetsRoot,

    filename: utils.assetsPath('js/[name].js'),

    chunkFilename: utils.assetsPath('js/[id].js')

  },

  plugins: [

    new webpack.DefinePlugin({

      'process.env': env

    }),

    new UglifyJsPlugin({

      uglifyOptions: {

        compress: {

          warnings: false

        }

      },

      sourceMap: config.build.productionSourceMap,

      parallel: true

    }),

    new ExtractTextPlugin({

      filename: utils.assetsPath('css/[name].css'),

      allChunks: false,

    }),

    new OptimizeCSSPlugin({

      cssProcessorOptions: config.build.productionSourceMap

        ? { safe: true, map: { inline: false } }

        : { safe: true }

    }),

    new HtmlWebpackPlugin({

      filename: process.env.NODE_ENV === 'testing'

        ? 'index.html'

        : config.build.index,

      template: 'index.html',

      inject: false,

      minify: {

        removeComments: true,

        collapseWhitespace: true,

        removeAttributeQuotes: true

      },

      chunksSortMode: 'dependency'

    }),

    new webpack.HashedModuleIdsPlugin(),

    new webpack.optimize.ModuleConcatenationPlugin(),

    new webpack.optimize.CommonsChunkPlugin({

      name: 'vendor',

      minChunks (module) {

        return (

          module.resource &&

          /\.js$/.test(module.resource) &&

          module.resource.indexOf(

            path.join(__dirname, '../node_modules')

          ) === 0

        )

      }

    }),

    new webpack.optimize.CommonsChunkPlugin({

      name: 'manifest',

      minChunks: Infinity

    }),

    new webpack.optimize.CommonsChunkPlugin({

      name: 'app',

      async: 'vendor-async',

      children: true,

      minChunks: 3

    }),

    new CopyWebpackPlugin([

      {

        from: path.resolve(__dirname, '../static'),

        to: config.build.assetsSubDirectory,

        ignore: ['.*']

      }

    ])

  ]

})

if (config.build.productionGzip) {

  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(

    new CompressionWebpackPlugin({

      asset: '[path].gz[query]',

      algorithm: 'gzip',

      test: new RegExp(

        '\\.(' +

        config.build.productionGzipExtensions.join('|') +

        ')$'

      ),

      threshold: 10240,

      minRatio: 0.8

    })

  )

}

if (config.build.bundleAnalyzerReport) {

  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

  webpackConfig.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' }))

}

module.exports = webpackConfig

config文件夹

prod.env.js代码

'use strict'

module.exports = {

  NODE_ENV: '"production"'

}

qa.env.js代码

'use strict'

module.exports = {

  NODE_ENV: '"production"'

}

static-config文件夹

index-prod.js代码

/**

 * 生产环境

 */

; (function () {

  window.SITE_CONFIG = {};

  // api接口请求地址

  window.SITE_CONFIG['baseUrl'] = 'xxxxxx';

  // cdn地址 = 域名 + 版本号

  window.SITE_CONFIG['domain'] = './'; // 域名

  window.SITE_CONFIG['version'] = '';   // 版本号(年月日时分)

  window.SITE_CONFIG['cdnUrl'] = window.SITE_CONFIG.domain +      window.SITE_CONFIG.version;

})();

index-qa.js

/**

 * 测试环境

 */

; (function () {

  window.SITE_CONFIG = {};

  // api接口请求地址

  window.SITE_CONFIG['baseUrl'] = 'xxxxxxxx';

  // cdn地址 = 域名 + 版本号

  window.SITE_CONFIG['domain'] = './'; // 域名

  window.SITE_CONFIG['version'] = '';   // 版本号(年月日时分)

  window.SITE_CONFIG['cdnUrl'] = window.SITE_CONFIG.domain + window.SITE_CONFIG.version;

})();

以上是gulf 打包的代码。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/81030.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

物联网：用python调入机器学习分析物联网数据入侵检测模块

物联网：用python调入机器学习分析物联网数据入侵检测模块

要使用Python调用机器学习分析物联网数据入侵检测模块，您需要以下步骤： 安装Python和相关的机器学习库，如scikit-learn、pandas、numpy等。您可以使用pip命令来安装这些库。 准备输入数据。这些数据可以是来自物联网设备的原始数据&#xff…
阅读更多...
Android 通知

Android 通知

1. 原生Android通知的几种显示方式： 状态栏的图标：发出通知后，通知会先以图标的形式显示在状态栏中。 抽屉式通知栏：用户可以在状态栏向下滑动以打开抽屉式通知栏，并在其中查看更多详情及对通知执行操作。在应用或用户…
阅读更多...
【牛客网】BC146 添加逗号

【牛客网】BC146 添加逗号

一.题目描述 牛客网题目链接:添加逗号_牛客题霸_牛客网 描述: 对于一个较大的整数 N(1<N<2,000,000,000) 比如 980364535&#xff0c;我们常常需要一位一位数这个数字是几位数&#xff0c;但是如果在这 个数字每三位加一个逗号&#xff0c;它会变得更加易于朗读。 因此&a…
阅读更多...
linux查看进程对应的线程(数)

linux查看进程对应的线程(数)

首先&#xff0c;top或ps查看进程列表&#xff0c;确定要查看的进程pid&#xff0c;如下面40698 查看进程的线程情况 查看进程&#xff1a;top -p 40698 查看线程&#xff1a;top -p 40698 -d 3 -H 其中-d是刷新频率 可看到此进程共211个线程&#xff0c;运行中的是211个。…
阅读更多...
虹科案例 | Zuellig Pharma和ELPRO通过符合GDP标准的温度监测和高效的温度数据管理为未来发展奠定基础

虹科案例 | Zuellig Pharma和ELPRO通过符合GDP标准的温度监测和高效的温度数据管理为未来发展奠定基础

在本案例研究中&#xff0c;您将了解Zuellig Pharma 实施了温度监测解决方案&#xff0c;以一致的数据结构获取各国和各种运输方式的数据; 通过将温度数据上传到其数据库管理系统&#xff0c;显著提高了其效率; 并建立了为未来管理决策提供数据增值使用的基础。 项目合作伙伴 …
阅读更多...
使用终端MobaXterm连接Centos

使用终端MobaXterm连接Centos

1. 下载MobaXterm 官网&#xff1a; https://mobaxterm.mobatek.net/download.html 2. MobaXterm连接Linux 1 、查看刚才安装的 Linux 的 IP 地址 2、连接 3. Linux自带了JRE 由于javac指令不能运行&#xff0c;所以Linux只自带了JRE&#xff01;&#xff01;&#xff01;
阅读更多...
Vue 2 组件间的通信方式总结

Vue 2 组件间的通信方式总结

引言 组件间的关系有父子关系、兄弟关系、祖孙关系和远亲关系。 不同的关系间&#xff0c;组件的通信有不同的方式。 一、prop 和 $emit prop向下传递&#xff0c;emit向上传递。 父组件使用 prop 向子组件传递信息。 ParentComponent.vue <template><div><…
阅读更多...
2023-09-17力扣每日一题

2023-09-17力扣每日一题

链接&#xff1a; 213. 打家劫舍 II 题意 n个数字围成一圈&#xff0c;禁止取相邻&#xff0c;求能取到的最大值 解&#xff1a; 经典DP特判/一丢丢思维 可以开个bool判断第一个取没取&#xff0c;然后判断最后一个&#xff0c;同样&#xff0c;再倒着做一遍即可 思维&a…
阅读更多...
记录Linux部署人脸修复GFPGAN项目Docker Python 使用

记录Linux部署人脸修复GFPGAN项目Docker Python 使用

记录Linux 服务器使用人脸修复GFPGAN 项目 1:阿里云安装docker,用docker 是隔离环境,Python环境还真是麻烦… https://help.aliyun.com/zh/ecs/use-cases/deploy-and-use-docker-on-alibaba-cloud-linux-2-instances 2:关于docker 镜像,想找个好的镜像也是很难,百度吧,很多Li…
阅读更多...
VSCODE 使用技巧

VSCODE 使用技巧

vscode批量去掉代码中空行的方法 1、在vscode中使用ctrl f组合快捷键打开替换窗口. 2、输入下面的正则表达式 ^\s*(?\r?$)\n https://mp.weixin.qq.com/s/ZKV2sZWszxBLNTNLEWhsng 你的代码够安全吗&#xff1f;推荐5个VS Code代码安全插件 VSCode&#xff1a;人生苦短&…
阅读更多...
C++项目实战——基于多设计模式下的同步异步日志系统-⑤-实用工具类设计

C++项目实战——基于多设计模式下的同步异步日志系统-⑤-实用工具类设计

文章目录 专栏导读获取系统时间time介绍 getTime函数设计判断文件是否存在stat介绍exists函数设计 获取文件所在路径find_last_of介绍path函数设计 创建文件所在目录mkdir介绍find_first_of介绍函数createDirectory设计 实用工具类整理 专栏导读 &#x1f338;作者简介&#xf…
阅读更多...
VS code 下 makefile 【缺少分隔符 停下来】 报错解决方法

VS code 下 makefile 【缺少分隔符 停下来】 报错解决方法

首先来看报错的makefile源码 再来看报错的信息&#xff1a; 第5行缺少分隔符&#xff0c;其实不止是第5行&#xff0c;只要是前面需要加tab留白的行都会报这个错误&#xff0c;比如说第7行第11行 编译的时候&#xff0c;前面的留白必须是按tab键生成的 但是&#xff01;&…
阅读更多...
【JavaSE笔记】抽象类与接口

【JavaSE笔记】抽象类与接口

一、抽象类 1、概念 在面向对象的概念中&#xff0c;所有的对象都是通过类来描绘的&#xff0c;但是反过来&#xff0c;并不是所有的类都是用来描绘对象的&#xff0c;如果一个类中没有包含足够的信息来描绘一个具体的对象&#xff0c;这样的类就是抽象类。 package demo2…
阅读更多...
DM@数理逻辑@命题公式及其赋值@真值表@公式分类

DM@数理逻辑@命题公式及其赋值@真值表@公式分类

文章目录 abstract命题公式及其赋值命题常项命题变项 命题公式合式公式(命题公式)限定基本联结词的合适公式的定义合式公式中的0和1子公式 **公式的层次定义**分层加括号 命题公式的赋值和解释成真赋值成假赋值公式的书写规范括号的省略 真值表赋值方法数量构造真值表 公式分类…
阅读更多...
Json-Jackson和FastJson

Json-Jackson和FastJson

狂神&#xff1a; 测试Jackson 纯Java解决日期格式化 设置ObjectMapper FastJson&#xff1a; 知乎&#xff1a;Jackson使用指南 1、常见配置 方式一&#xff1a;yml配置 spring.jackson.date-format指定日期格式&#xff0c;比如yyyy-MM-dd HH:mm:ss&#xff0c;或者具体的…
阅读更多...
深入理解Windows句柄

深入理解Windows句柄

引言 我们首先需要了解在windows内核中&#xff0c;为了方便管理一些相关的数据结构&#xff0c;Windows统一把它们称之为对象。在Windows内核代码中大量代码都是用C语言编写的。而我们知道在C语言中&#xff0c;并没有纯粹的面向对象&#xff0c;也没有类这一说。因此我们可以…
阅读更多...
ArmSoM-W3之RK3588 Debian11详解

ArmSoM-W3之RK3588 Debian11详解

1. 简介 RK3588从入门到精通Debian 是⼀种完全⾃由开放并⼴泛⽤于各种设备的 Linux 操作系统。Rockchip在官⽅Debian发⾏版的基础上构建和适配了相关硬件功能 2. 环境介绍 硬件环境&#xff1a; ArmSoM-W3 RK3588开发板 软件版本&#xff1a; OS&#xff1a;ArmSoM-W3 Debia…
阅读更多...
WPF 如何让xmal的属性换行显示 格式化

WPF 如何让xmal的属性换行显示 格式化

WPF 如何让UI的xmal 按照下面的格式化显示 首先格式化显示在VS中的快捷键是 Ctrl &#xff2b;D 然后需要配置&#xff0c;工具 选项 -文本编辑器 -xmal -格式化-间距 更改成如下就可以了
阅读更多...
[2023.09.12]: Yew应用开发的第一个hook--use_state

[2023.09.12]: Yew应用开发的第一个hook--use_state

Yew的SSR模式推荐使用function_component组件&#xff0c;并且在function_component中使用hooks。其中&#xff0c;我使用到的第一个hook是use_state。use_state的设计意图与React中的useState非常相似&#xff0c;都是为了保存并修改当前的状态。然而&#xff0c;由于Yew是用R…
阅读更多...
RK3588 点亮imx586摄像头

RK3588 点亮imx586摄像头

一.硬件原理图 mipi摄像头硬件确认点&#xff1a; 1.供电&#xff1a;5V&#xff0c;2.8V&#xff0c;1.2V&#xff0c;1.8V&#xff0c;reset脚&#xff08;硬拉3.3&#xff0c;上电的时候从低到高&#xff09;&#xff0c;pwron脚外接 3.3V。 2,时钟&#xff1a;MCLKOUT是2…
阅读更多...
最新文章

Copyright @ 2022~2023