Vue CLI 2.x搭建vue(目录最全分析)

news2025/2/26 22:26:22

一、vue-cli介绍

vue-cli是一个用于快速搭建vue项目的 脚手架。

二、vue-cli安装、更新

安装过nodeJs 、cnpm 后，全局安装vue-cli（以后其他项目可直接使用）：

cnpm install -g vue-cli

查看安装成功否（有版本号就是成功,V大写）

vue -V

查看npm注册表里vue-cli版本号：

cnpm view vue-cli

三、vue-cli 使用

安装过webpack 、vue-cli后，可以开始搭建vue项目：

vue init webpack <Project Name>

eg：右击Git Base Here（如果你没有用git ，你也可以按住shift键右击选择“在此处打开命令窗口”，或者 cmd :cd \project/lfxProject），如图：

Vue CLI 2.x搭建vue(目录最全分析)

 （1）build.js

'use strict'
require('./check-versions')() //调用版本检查

process.env.NODE_ENV = 'production' //将环境配置为生产环境
const ora = require('ora') //npm包 loading插件
const rm = require('rimraf') //npm包 用于删除文件
const path = require('path')//npm包 文件路径工具
const chalk = require('chalk')//npm包 在终端输出带颜色的文字
const webpack = require('webpack')//引入webpack.js
const config = require('../config')//引入配置文件
const webpackConfig = require('./webpack.prod.conf')//引入生产环境配置文件
// 在终端显示loading效果，并输出提示
const spinner = ora('building for production...')
spinner.start()
//先递归删除dist文件再生成新文件，避免冗余
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'
  ))
 })
})

ps：require/export是一种nodeJs(commonJs规范)的依赖注入的方法，import/export是ES6语法，用于引入模块，在nodeJs中使用的ES6语法最终会使用babel工具（babel-loader）转化为ES5

（2）check-version.js：检测node和npm的版本，实现版本依赖

'use strict'
const chalk = require('chalk')
const semver = require('semver')//检查版本
const packageConfig = require('../package.json')
const shell = require('shelljs')//shelljs 模块重新包装了 child_process，调用系统命令更加方便

function exec (cmd) {//返回通过child_process模块的新建子进程，执行 Unix 系统命令后转成没有空格的字符串
 return require('child_process').execSync(cmd).toString().trim()
}

const versionRequirements = [
 {
  name: 'node',
  currentVersion: semver.clean(process.version),//使用semver格式化版本
  versionRequirement: packageConfig.engines.node //获取package.json中设置的node版本
 }
]

if (shell.which('npm')) {
 versionRequirements.push({
  name: 'npm',
  currentVersion: exec('npm --version'),// 自动调用npm --version命令，并且把参数返回给exec函数，从而获取纯净的版本号
  versionRequirement: packageConfig.engines.npm
 })
}

module.exports = function () {
 const warnings = []
 for (let i = 0; i < versionRequirements.length; i++) {
  const mod = versionRequirements[i]
  //若版本号不符合package.json文件中指定的版本号，就报错
  if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
   warnings.push(mod.name + ': ' +
    chalk.red(mod.currentVersion) + ' should be ' +
    chalk.green(mod.versionRequirement)
   )
  }
 }

 if (warnings.length) {
  console.log('')
  console.log(chalk.yellow('To use this template, you must update following to modules:'))
  console.log()
  for (let i = 0; i < warnings.length; i++) {
   const warning = warnings[i]
   console.log(' ' + warning)
  }
  console.log()
  process.exit(1)
 }
}

（3）utils.js：utils是工具的意思，是一个用来处理css的文件，这个文件包含了三个工具函数：

  • 生成静态资源的路径
  • 生成 ExtractTextPlugin对象或loader字符串
  • 生成 style-loader的配置 
    var path = require('path')// node自带的文件路径工具
var config = require('../config')// 配置文件
var ExtractTextPlugin = require('extract-text-webpack-plugin')// 提取css的插件

/** @method assertsPath 生成静态资源的路径(判断开发环境和生产环境,为config文件中index.js文件中定义assetsSubDirectory)
 * @param {String}  _path 相对于静态资源文件夹的文件路径
 * @return {String}     静态资源完整路径
 */
exports.assetsPath = function (_path) {
 var assetsSubDirectory = process.env.NODE_ENV === 'production'
  ? config.build.assetsSubDirectory
  : config.dev.assetsSubDirectory
 //nodeJs path提供用于处理文件路径的工具;path.posix提供对路径方法的POSIX(可移植性操作系统接口)特定实现的访问(可跨平台); path.posix.join与path.join一样，不过总是以 posix 兼容的方式交互
 return path.posix.join(assetsSubDirectory, _path)
}

/**@method cssLoaders 生成处理css的loaders配置,使用css-loader和postcssLoader,通过options.usePostCSS属性来判断是否使用postcssLoader中压缩等方法
 * @param {Object} option = {sourceMap: true,// 是否开启 sourceMapextract: true // 是否提取css}生成配置
 * @return {Object} 处理css的loaders配置对象
 */
exports.cssLoaders = function (options) {
 options = options || {}

 var cssLoader = {
  loader: 'css-loader',
  options: {
   minimize: process.env.NODE_ENV === 'production',
   sourceMap: options.sourceMap
  }
 }
 /**@method generateLoaders 生成 ExtractTextPlugin对象或loader字符串
  * @param {Array}    loaders loader名称数组
  * @return {String|Object}    ExtractTextPlugin对象或loader字符串
  */
 function generateLoaders (loader, loaderOptions) {
  var loaders = [cssLoader]
  if (loader) {
   loaders.push({  
    loader: loader + '-loader',
    options: Object.assign({}, loaderOptions, {
     sourceMap: options.sourceMap
    })
   })
  }
  // ExtractTextPlugin提取css(当上面的loaders未能正确引入时,使用vue-style-loader)
  if (options.extract) {// 生产环境中，默认为true
   return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
   })
  } else {//返回vue-style-loader连接loaders的最终值
   return ['vue-style-loader'].concat(loaders)
  }
 }

 return {
  css: generateLoaders(),//需要css-loader 和 vue-style-loader
  postcss: generateLoaders(),//需要css-loader、postcssLoader 和 vue-style-loader
  less: generateLoaders('less'),//需要less-loader 和 vue-style-loader
  sass: generateLoaders('sass', { indentedSyntax: true }),//需要sass-loader 和 vue-style-loader
  scss: generateLoaders('sass'),//需要sass-loader 和 vue-style-loader
  stylus: generateLoaders('stylus'),//需要stylus-loader 和 vue-style-loader
  styl: generateLoaders('stylus')//需要stylus-loader 和 vue-style-loader
 }
}
 
/**@method styleLoaders 生成 style-loader的配置
 * @param {Object}   options 生成配置
 * @return {Array}   style-loader的配置
 */
exports.styleLoaders = function (options) {
 var output = []
 var loaders = exports.cssLoaders(options)
 //将各种css,less,sass等综合在一起得出结果输出output
 for (var extension in loaders) {
  var loader = loaders[extension]
  output.push({
   test: new RegExp('\\.' + extension + '$'),
   use: loader
  })
 }
 return output
}

    （4）vue-loader.conf.js：处理.vue文件，解析这个文件中的每个语言块（template、script、style)，转换成js可用的js模块。

    'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
//生产环境,提取css样式到单独文件
const sourceMapEnabled = isProduction
 ? config.build.productionSourceMap
 : config.dev.cssSourceMap
module.exports = {
 loaders: utils.cssLoaders({
  sourceMap: sourceMapEnabled,
  extract: isProduction
 }),
 cssSourceMap: sourceMapEnabled,
 cacheBusting: config.dev.cacheBusting,
 //编译时将“引入路径”转换为require调用,使其可由webpack处理
 transformToRequire: {
  video: ['src', 'poster'],
  source: 'src',
  img: 'src',
  image: 'xlink:href'
 }
}

    （5）webpack.base.conf.js：开发、测试、生产环境的公共基础配置文件，配置输出环境，配置模块resolve和插件等

'use strict'
const path = require('path')// node自带的文件路径工具
const utils = require('./utils')// 工具函数集合
const config = require('../config')// 配置文件
const vueLoaderConfig = require('./vue-loader.conf')// 工具函数集合
/**
 * 获取"绝对路径"
 * @method resolve
 * @param {String} dir 相对于本文件的路径
 * @return {String}   绝对路径
 */
function resolve(dir) {
 return path.join(__dirname, '..', dir)
}

module.exports = {
 context: path.resolve(__dirname, '../'),
 //入口js文件(默认为单页面所以只有app一个入口)
 entry: {
  app: './src/main.js'
 },
 //配置出口
 output: {
  path: config.build.assetsRoot,//打包编译的根路径(dist)
  filename: '[name].js',
  publicPath: process.env.NODE_ENV === 'production'
   ? config.build.assetsPublicPath
   : config.dev.assetsPublicPath//发布路径
 },
 resolve: {
  extensions: ['.js', '.vue', '.json'],// 自动补全的扩展名
  //别名配置
  alias: {
   'vue$': 'vue/dist/vue.esm.js',
   '@': resolve('src'),// eg:"src/components" => "@/components"
  }
 },
 module: {
  rules: [
   //使用vue-loader将vue文件编译转换为js
   {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: vueLoaderConfig
   },
   //通过babel-loader将ES6编译压缩成ES5
   {
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
   },
   //使用url-loader处理(图片、音像、字体)，超过10000编译成base64
   {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
   },
   {
    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: utils.assetsPath('media/[name].[hash:7].[ext]')
    }
   },
   {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
   }
  ]
 },
 //nodeJs全局变量/模块，防止webpack注入一些nodeJs的东西到vue中
 node: {
  setImmediate: false,
  dgram: 'empty',
  fs: 'empty',
  net: 'empty',
  tls: 'empty',
  child_process: 'empty'
 }
}

（6）webpack.dev.conf.js：webpack配置开发环境中的入口

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')//webpack-merge实现合并
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')//webpack的提示错误和日志信息的插件
const portfinder = require('portfinder')// 查看空闲端口位置，默认情况下搜索8000这个端口

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {
 module: {
  rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
 },
 devtool: config.dev.devtool,//调试模式
 devServer: {
  clientLogLevel: 'warning',
  historyApiFallback: {//使用 HTML5 History API 时， 404 响应替代为 index.html
   rewrites: [
    { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
   ],
  },
  hot: true,//热重载
  contentBase: false, // 提供静态文件访问
  compress: true,//压缩
  host: HOST || config.dev.host,
  port: PORT || config.dev.port,
  open: config.dev.autoOpenBrowser,//npm run dev 时自动打开浏览器
  overlay: config.dev.errorOverlay
   ? { warnings: false, errors: true }
   : false,// 显示warning 和 error 信息
  publicPath: config.dev.assetsPublicPath,
  proxy: config.dev.proxyTable,//api代理
  quiet: true, //控制台打印警告和错误(用FriendlyErrorsPlugin 为 true)
  watchOptions: {// 检测文件改动
   poll: config.dev.poll,
  }
 },
 plugins: [
  new webpack.DefinePlugin({
   'process.env': require('../config/dev.env')
  }),
  new webpack.HotModuleReplacementPlugin(),//模块热替换插件，修改模块时不需要刷新页面
  new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
  new webpack.NoEmitOnErrorsPlugin(),//webpack编译错误的时候，中断打包进程，防止错误代码打包到文件中
  // 将打包编译好的代码插入index.html
  new HtmlWebpackPlugin({
   filename: 'index.html',
   template: 'index.html',
   inject: true
  }),
  // 提取static assets 中css 复制到dist/static文件
  new CopyWebpackPlugin([
   {
    from: path.resolve(__dirname, '../static'),
    to: config.dev.assetsSubDirectory,
    ignore: ['.*']//忽略.*的文件
   }
  ])
 ]
})

module.exports = new Promise((resolve, reject) => {
 portfinder.basePort = process.env.PORT || config.dev.port
 portfinder.getPort((err, port) => { //查找端口号
  if (err) {
   reject(err)
  } else {
   //端口被占用时就重新设置evn和devServer的端口
   process.env.PORT = port
   devWebpackConfig.devServer.port = port
   // npm run dev成功的友情提示
   devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
    compilationSuccessInfo: {
     messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
    },
    onErrors: config.dev.notifyOnErrors
    ? utils.createNotifierCallback()
    : undefined
   }))
   resolve(devWebpackConfig)
  }
 })
})

 （7）webpack.dev.prod.js：webpack配置生产环境中的入口

'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].[chunkhash].js'),
  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
 },
 plugins: [
  new webpack.DefinePlugin({
   'process.env': env
  }),
  new UglifyJsPlugin({//压缩js
   uglifyOptions: {
    compress: {
     warnings: false
    }
   },
   sourceMap: config.build.productionSourceMap,
   parallel: true
  }),
  new ExtractTextPlugin({//提取静态文件，减少请求
   filename: utils.assetsPath('css/[name].[contenthash].css'),
   allChunks: true,
  }),
  new OptimizeCSSPlugin({//提取优化压缩后(删除来自不同组件的冗余代码)的css
   cssProcessorOptions: config.build.productionSourceMap
    ? { safe: true, map: { inline: false } }
    : { safe: true }
  }),
  new HtmlWebpackPlugin({ //html打包压缩到index.html
   filename: config.build.index,
   template: 'index.html',
   inject: true,
   minify: {
    removeComments: true,//删除注释
    collapseWhitespace: true,//删除空格
    removeAttributeQuotes: true//删除属性的引号
   },
   chunksSortMode: 'dependency'//模块排序，按照我们需要的顺序排序
  }),

  new webpack.HashedModuleIdsPlugin(),
  new webpack.optimize.ModuleConcatenationPlugin(),
  new webpack.optimize.CommonsChunkPlugin({  // node_modules中的任何所需模块都提取到vendor
   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([//复制static中的静态资源（默认到dist里面）
   {
    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())
}

module.exports = webpackConfig

 

2、config文件夹：

config文件夹的结构：

Vue CLI 2.x搭建vue(目录最全分析)

（1） dev.env.js和prod.env.js：分别配置：开发环境和生产环境。这个可以根据公司业务结合后端需求配置需要区分开发环境和测试环境的属性

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"'
})

 ps：webpack-merge用于实现合并类似于ES6的Object.assign()

'use strict'
module.exports = {
 NODE_ENV: '"production"'
}

（*注意属性值要用“‘'”双层引住），访问（获取值）时直接用：

process.env.属性名

ps：process（进程）是nodejs的一个全局变量，process.env 属性返回一个用户环境信息的对象

（2）index.js配置解析：文章来源地址https://www.yii666.com/blog/197638.html

'use strict';
const path = require('path');

module.exports = {

 // ===================开发环境配置

 dev: {
  assetsSubDirectory: 'static',//静态资源文件夹(一般存放css、js、image等文件)
  assetsPublicPath: '/',//根目录
  proxyTable: {},//配置API代理，可利用该属性解决跨域的问题
  host: 'localhost', // 可以被 process.env.HOST 覆盖
  port: 3030, // 可以被 process.env.PORT 覆盖
  autoOpenBrowser: true,//编译后自动打开浏览器页面 http://localhost:3030/("port + host",默认"false"),设置路由重定向自动打开您的默认页面
  errorOverlay: true,//浏览器错误提示
  notifyOnErrors: true,//跨平台错误提示
  poll: false, //webpack提供的使用文件系统(file system)获取文件改动的通知devServer.watchOptions(监控文件改动)
  devtool: 'cheap-module-eval-source-map',//webpack提供的用来调试的模式，有多个不同值代表不同的调试模式
  cacheBusting: true,// 配合devtool的配置，当给文件名插入新的hash导致清除缓存时是否生成source-map
  cssSourceMap: true //记录代码压缩前的位置信息,当产生错误时直接定位到未压缩前的位置,方便调试
 },

// ========================生产环境配置

 build: {
  index: path.resolve(__dirname, '../dist/index.html'),//编译后"首页面"生成的绝对路径和名字
  assetsRoot: path.resolve(__dirname, '../dist'),//打包编译的根路径(默认dist，存放打包压缩后的代码)
  assetsSubDirectory: 'static',//静态资源文件夹(一般存放css、js、image等文件)
  assetsPublicPath: '/',//发布的根目录(dist文件夹所在路径)
  productionSourceMap: true,//是否开启source-map
  devtool: '#source-map',//(详细参见：https://webpack.docschina.org/configuration/devtool)
  productionGzip: false,//是否压缩
  productionGzipExtensions: ['js', 'css'],//unit的gzip命令用来压缩文件（gzip模式下需要压缩的文件的扩展名有js和css）
  bundleAnalyzerReport: process.env.npm_config_report //是否开启打包后的分析报告
 }
};

3、node_modules文件夹：

存放npm install时根据package.json配置生成的npm安装包的文件夹

4、src文件夹：

我们需要在src文件夹中开发代码，打包时webpack会根据build中的规则（build规则依赖于config中的配置）将src打包压缩到dist文件夹在浏览器中运行

（1）assets文件：用于存放静态资源（css、image），assets打包时路径会经过webpack中的file-loader编译（因此，assets需要使用绝对路径）成js

（2）components文件夹：用来存放 .vue 组件(实现复用等功能，如：过滤器，列表项等)

（3）router文件夹：在router/index.js文件中配置页面路由网址:yii666.com<

（4）App.vue：是整个项目的主组件，所有页面都是通过使用<router-view/>开放入口在App.vue下进行切换的（所有的路由都是App.vue的子组件）

（5）main.js：入口js文件（全局js，你可以在这里：初始化vue实例、require/import需要的插件、注入router路由、引入store状态管理）

5、static文件夹：

webpack默认存放静态资源（css、image）的文件夹，与assets不同的是：static在打包时会直接复制一个同名文件夹到dist文件夹里（不会经过编译，可使用相对路径）

6、其他文件：

（1）.babelrc：浏览器解析的兼容配置，该文件主要是对预设（presets）和插件（plugins）进行配置，因此不同的转译器作用不同的配置项，大致可分为：语法转义器、补丁转义器、sx和flow插件

（2）.editorconfig：用于配置代码格式（配合代码检查工具使用，如：ESLint，团队开发时可统一代码风格），这里配置的代码规范规则优先级高于编辑器默认的代码格式化规则 。文章地址https://www.yii666.com/blog/197638.html

（3）.gitignore：配置git提交时需要忽略的文件

（4）postcssrc.js： autoprefixer（自动补全css样式的浏览器前缀）；postcss-import（@import引入语法）、CSS Modules（规定样式作用域）

（5）index.html：项目入口页面，编译之后所有代码将插入到这来

（6）package.json：npm的配置文件（npm install根据package.json下载对应版本的安装包）

（7）package.lock.json：npm install（安装）时锁定各包的版本号

（8）README.md：项目使用说明文章来源地址:https://www.yii666.com/blog/197638.html

五、运行项目

在webStorm中打开项目，首先赶紧右击Project进行如下操作(否则会卡死，还有各种其他方法参见：

Vue CLI 2.x搭建vue(目录最全分析)

1、启动安装：cnpm install

Vue CLI 2.x搭建vue(目录最全分析)

2、然后npm run dev：跑起来~

Vue CLI 2.x搭建vue(目录最全分析)

3、生成打包文件 ：npm run build 

然后你会发现项目多了个dist文件夹（用于部署到生产环境用，是打包压缩之后的src文件夹）

Vue CLI 2.x搭建vue(目录最全分析)

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

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

相关文章

如何有效提高开发团队的开发效率？

如何有效提高开发团队的开发效率？

提高生产力的实际因素之一是雇用为您的组织具有最高效率的开发人员。公司经理和人力资源管理最好雇用高效、有创造力和具有陡峭学习能力的员工。您将了解管理和领导力、战略规划、设定业务目标和建立工作满意度将如何提高组织中开发人员团队的生产力。 改进项目管理 提高团队…
阅读更多...
mysql事务处理

mysql事务处理

一.抛出问题: 二. 事务: 1.本质:把多个操作,打包成一个操作完成. 2.原子性:多个操作,要么全部执行成功,要么一个都不执行(回滚). 3.回滚(rollback)机制:执行到中间出错了,自动把执行成功的操作还原到最初没有执行的样子. 实现回滚:把事务中每个执行的操作记录下来,如果要回…
阅读更多...
还有人不知道这款网页版地理空间数据管理平台？赶紧来试试吧

还有人不知道这款网页版地理空间数据管理平台？赶紧来试试吧

四维轻云是一款网页版地理空间数据管理平台&#xff0c;用户能够在线管理、浏览及分享倾斜模型(.osgb)、激光点云(.las)、正射影像(dom)、数字高程模型(dem)等数据。目前&#xff0c;平台具有数据管理、场景编辑、空间测量、团队协作、加密分享、素材库等功能。 项目管理 四维…
阅读更多...
13.1.1 翻转裁减，改变颜色，结合多种图像增广方法进行图像增广

13.1.1 翻转裁减，改变颜色，结合多种图像增广方法进行图像增广

一.图像增广的好处 随机改变训练样本可以减少模型对某些属性的依赖,从而提高模型的泛化能力。 裁剪图像可以减少模型对于对象出现位置的依赖 以不同的方式裁剪图像,使感兴趣的对象出现在不同的位置,减少模型对于对象出现位置的依赖 调整亮度、颜色等因素可以降低模型对颜色…
阅读更多...
工业RFID识别技术，助力企业实现智能制造新高度！

工业RFID识别技术，助力企业实现智能制造新高度！

RFID技术是一种无线通信技术&#xff0c;通过射频信号在读写器和射频标签之间进行数据交互&#xff0c;实现物体的自动识别和数据传输。随着科技的不断进步&#xff0c;RFID工业识别技术在智能制造领域扮演着越来越重要的角色。 RFID在智能制造中能解决什么问题&#xff1f; 物…
阅读更多...
使用雅克比矩阵计算Lorenz的lyapunov exponent图谱

使用雅克比矩阵计算Lorenz的lyapunov exponent图谱

赋个初值看看： 我们使用雅克比矩阵计算lyapunov exponent图谱看看： matlab代码如下： clear; %% ===========初始化输入============== yinit = [0.1,0.1,0.1]; orthmatrix = [1 0 0;0 1 0;0 0 1];y = zeros(12,1); y(1:3) = yinit; y(4:12) = orthmatrix;mod = zeros(3,1…
阅读更多...
c++QT文件操作

c++QT文件操作

1 介绍 QT的文件操作来源于其抽象基类QIODevice&#xff0c;中用于处理输入输出设备。提供了统一的接口来处理不同类型的数据源&#xff0c;如文件、套接字、缓冲区等。QIODevice 主要用于读取和写入数据&#xff0c;无论数据来自何种源头&#xff0c;都可以通过 QIODevice 统一…
阅读更多...
用 oneAPI 实现 AI 欺诈检测：一款智能图像识别工具

用 oneAPI 实现 AI 欺诈检测：一款智能图像识别工具

简介 虚假图像和视频日益成为社交媒体、新闻报道以及在线内容中的一大隐患。在这个信息爆炸的时代&#xff0c;如何准确地识别和应对这些虚假内容已经成为一个迫切的问题。为了帮助用户更好地辨别虚假内容&#xff0c;我开发了一款基于 oneAPI、TensorFlow 和 Neural Compress…
阅读更多...
一文了解新能源电机国内主流供应商

一文了解新能源电机国内主流供应商

作为新能源汽车核心三电系统之一的“电机”就好比燃油车的发动机一样&#xff0c;是车辆核心部件&#xff0c;但似乎消费者没太大关注这方面。今天我们给大家聊聊这个核心部件&#xff01; 一辆新能源汽车占生产成本最高的部件是动力电池&#xff0c;约占到30%左右&#xff0c…
阅读更多...
ppt怎么压缩？试试这样压缩文件

ppt怎么压缩？试试这样压缩文件

当PPT文件体积过大时&#xff0c;打开的速度就会很慢&#xff0c;演示的时候刘程度也会受到影响&#xff0c;其次&#xff0c;现在很多平台对于上传的文件是有大小限制的&#xff0c;比如超过100M的文件就无法上传、发送等等&#xff0c;那么&#xff0c;怎么才能压缩PPT文件呢…
阅读更多...
手撕HashMap源码

手撕HashMap源码

auth&#xff1a;虎 &#xff0c;2023年5月8日—???完。 前言&#xff1a; 最初在面试的时候&#xff0c;在个人栏第一条写了一句话“手撕HashMap”源码作为亮点&#xff0c;以下是曾经的学习笔记&#xff0c;目前来说不是很完整&#xff0c;有机会下次面试时候再补全吧~ 1…
阅读更多...
python numpy数组水平和垂直合并

python numpy数组水平和垂直合并

1 水平Horizontal合并 Horizontal:水平向右拉长 利用np.hstack()&#xff1a;原始数据size可以不一致 利用np.concatenate()&#xff1a;原始数据size可以不一致 import numpy as np # 三个一维数组 array1 np.array([1, 2, 3]) array2 np.array([4, 5, 6]) array3 np.ar…
阅读更多...
Koan自动重装和Cobbler_web

Koan自动重装和Cobbler_web

Koan是Cobbler的辅助工具&#xff0c;可以实现很多功能&#xff0c;使用koan配合Cobbler可以实现快速重装Linux系统&#xff1a; 1、安装koan&#xff1a; yum install -y epel-releaseyum install -y koan 安装截图&#xff1a; 2、在客户机上&#xff0c;用koan选择要重装的…
阅读更多...
【Fegin技术专题】「原生态」打开Fegin之RPC技术的开端，你会使用原生态的Fegin吗？(高级用法)

【Fegin技术专题】「原生态」打开Fegin之RPC技术的开端，你会使用原生态的Fegin吗？(高级用法)

对于Httpclient请求机制进行设置操作处理。 Body注解申明一个请求体模板&#xff0c;模板中可以带有参数&#xff0c;与方法中Param注解申明的参数相匹配,使用方法如下: interface LoginClient {void login( String user, String password); } ...client.login("denomin…
阅读更多...
小红书投放流程是什么，达人选择注意事项！

小红书投放流程是什么，达人选择注意事项！

很多人会发现有些笔记的内容并不是很出彩&#xff0c;但是偏偏就火了&#xff0c;自己想去模仿就平平无奇&#xff0c;其中包含了很多因素&#xff0c;有运气、也有选题和博主发文思路在里面&#xff0c;今天&#xff0c;来和大家分享下小红书投放流程是什么&#xff0c;达人选…
阅读更多...
Python Selenium 设置带账号密码的socks5代理，启动浏览器

Python Selenium 设置带账号密码的socks5代理，启动浏览器

selenium添加带有账密的socks5代理 我们都知道在使用selenium开发爬虫的时候不可避免的会使用socks5高匿名代理。一般情况下我们使用方法如下(开发语言为python)&#xff1a; from selenium import webdriver chrome_options webdriver.ChromeOptions() chrome_options.add_…
阅读更多...
手动整理：腾讯云轻量应用服务器优缺点大全

手动整理：腾讯云轻量应用服务器优缺点大全

腾讯云轻量应用服务器开箱即用、运维简单的轻量级云服务器&#xff0c;CPU内存带宽配置高并且特别合适&#xff0c;轻量2核2G3M带宽、2核2G4M、2核4G5M带宽、4核8G12M带宽&#xff0c;还有8核16G18M和16核32G28M配置可选&#xff0c;腾讯云服务器网分享腾讯云轻量应用服务器详细…
阅读更多...
filebeat 采集k8s 中nginx deployment 日志

filebeat 采集k8s 中nginx deployment 日志

一、背景 在k8s集群中&#xff0c;已经部署了nginx应用&#xff0c;需要使用elk来收集日志。 注意&#xff1a;elk并没有放在k8s集群中&#xff0c;使用单独的服务器进行安装。不推荐elk放在k8s集群中&#xff01; 其中filebeat&#xff0c;使用DaemonSet方式部署&#xff0…
阅读更多...
【递归函数的几种常见题型】

【递归函数的几种常见题型】

递归函数的几种常见题型 目录 题型一&#xff1a;打印一个数的每一位 题型二&#xff1a;计算一个数的每位之和 题型三&#xff1a;计算n的k次方 题型一&#xff1a;打印一个数的每一位 1.1递归函数的实现 void print(int n) {if (n > 9)print(n / 10);printf("…
阅读更多...
海外ASO优化之关于应用的营销1

海外ASO优化之关于应用的营销1

应用程序市场存在一个悲惨的现实&#xff1a;再优秀的应用程序仍然可能会失败。这通常是因为没有人知道它们的存在。所以应用的营销是取得成功的关键。 1、选择正确的应用名称。 实用的应用程序的销售基础是以某种方式使用户的生活更轻松&#xff0c;所以我们需要设置一些功能…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023