webpack的使用

最新推荐文章于 2023-04-13 16:58:25 发布
最新推荐文章于 2023-04-13 16:58:25 发布
阅读量198 收藏
点赞数
分类专栏： Web 文章标签： webpack vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49430641/article/details/108847966
版权

webpack的使用

webpack中的loader

loader的作用

  1. 在之前的案例中，主要是使用webpack来处理所写的JS代码，并通过webpack来自动处理他们之间的依赖。

  2. 但是在实际开发中并不只JS文件的处理，还会加载css文件、图片等，对于webpack本身来说，对于这些转化是不支持的。

  3. 所以就需要给webpack扩展对应的loader。

loader的使用

  1. 通过npm安装所需要的loader。(webpack中文官网)
  2. webpack.config.js中的modules属性下配置。

webpack的loader

css-loader 和 style-loader

当没有使用css-loader时，直接在main.js文件中引用依赖然后打包：

//normal.css
body {
	background-color: pink;
}

//main.js
const {name,age,say,run} = require('./js/info.js');

console.log(name);
console.log(age);
console.log(say);
run();

//依赖CSS文件，使得webpack打包时会处理normal.css文件
require('./css/normal.css');

控制台会输出如下错误：

合适的loader处理

所以需要安装css-loader来处理css文件。使用npm install --save-dev css-loader。
💥--save-dev 为开发时依赖模块，意为只用于开发，实际项目运行时并不依赖。

rules: [
 {
   test: /\.css$/,
   use: [ 'style-loader', 'css-loader' ]
  }
]

注： 如果只是安装css-loader并打包，在DOM中并不会显示出css文件定义的效果。因为css-loader只是将css文件加载，想要将加载好的css文件渲染到DOM中，还需要安装style-loader(npm install style-loader --save-dev)；

在使用use: [ 'style-loader', 'css-loader' ]这个语句时，应注意在使用多个loader时，loader的执行顺序是从右往左，所以应该将style-loader放在左边，先执行css-loader加载css文件之后，再由style-loader渲染到DOM中。

less-loader

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

less-loader用于处理JS文件中对less文件的依赖。

  1. 安装less-loader：使用指令npm install --save-dev less-loader less。

    ⚠️注： 如需安装指定版本，需要在loader后加 @+版本号。以下同理。

  2. 在webpack.config.js文件中配置(执行顺序是自下而上)。

    {
 test: /\.less$/,
 use: [{
  loader: "style-loader"
 }, {
     loader: "css-loader"
    }, {
      	loader: "less-loader", options: {
      	strictMath: true,
      	noIeCompat: true
       }
 }]
}

url-loader

作用

使用url-loader加载css样式中的一些图片等文件。

安装

使用指令：npm install --save-dev url-loader。

使用

在webpack.config.js中配置：

{
 test: /\.(png|jpg|gif)$/,
 use: [{
  loader: 'url-loader',
  options: {
   //当文件小于limit所定义的数值时，会将图片编译成base64字符串形式。
   //当图片大于limit定义的数值时，打包会报错，就需要使用file-loader模块进行加载。
   limit: 13000
  }
 }]
}

🔊如果插入的图片过大，就需要使用 file-loader模块进行加载。

file-loader

用于处理大文件的加载.

  1. 安装指令: npm install --save-dev file-loader。

  2. 然后再次运行打包指令。

  3. 运行index.html，控制台会提示找不到文件。

  4. 是由于使用webpack打包时，webpack会把图片文件放到打包文件同一路径下直接引用，但是是直接引用，未指定前置路径。

    ​

    同一路径

    没有前置路径

  5. 在调试中将url路径改为
    url(dist/8e08b79ef4c5e855db743e16c3b5f2a1.png)，
    此时页面就会正常渲染。

  6. 如果想要解决这个问题，就需要使background后的url引用路径改为dist/xxx.jpg。在webpack.config.js文件中加入publicPath: 'dist/'。意为只要涉及到url的问题，都会自动地在文件前面加上dist/。

问题解决
💡当index.html文件也在dist文件夹下，
则不需要再使用 publicPath: 'dist/'指令
关于生成的文件名

  • webpack会在打包时将文件放入打包文件的同一目录下，并且会生成一个32位的hash值，防止文件命名重复。

  • 但是在实际的开发中，我们可能对打包的名字有一定的要求——比如，将所有的图片放在一个文件夹中，但是需要跟上原来的名字，同时还要防止重复。

  • 此时我们需要在options中添加一个name属性：

    • img：文件要打包的文件夹；
    • name：获取图片原来的名字，放在该位置；
    • hash:8：为了防止图片名称重复，依然使用hash，但是只保留8位；
    • ext：原来的图片扩展名。
    //使用[name]就是使用图片原有的name，使用.是将名称连接起来
name: 'img/[name].[hash:8].[ext]'

  • 将原本打包好的的文件删除，然后重新打包npm run build。

    ​

完成打包在img目录下的自定义图片名称

babel-loader

🏆我们上述的打包文件中会有ES6的语法，当浏览器不支持ES6时会无法正常渲染，所以我们需要使用babel-loader模块完成转换。

  • 安装：

    npm install babel-loader babel-core babel-preset-env webpack

  • 配置：

    {
 test: /\.js$/,
	//由于最后打包完成并运行node依赖文件并不参加，所以使用exclude将文件排除
 exclude: /(node_modules|bower_components)/,
 use: {
 	loader: 'babel-loader',
 	options: {
	 // presets: ['@babel/preset-env']
		// 为什么使用2015版本不知
		presets: ['es2015']
 	}
 }
}

  • 再次运行npm run build。打包完成，然后进入打包好的文件bundle.js搜索ES6的语法(如let,const)，没有搜到，说明已经成功将ES6的语法转化为ES5。
    没有const
    没有let

webpack配置Vue

Vue模块

安装

在之前的学习过程中，在项目中引用Vue大致是使用两种方法：

  1. 下载Vue.js文件，然后通过<script>标签引入；

    <script src="../js/vue.js"></script>

  2. 使用cdn引入

      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

💥而这两种方法都是不符合我们的模块化开发思想的，模块化开发应该是以引入模块的方式进行使用。所以我们需要使用npm安装的方式来引入vue模块。

使用指令：

npm install vue --save

注：由于Vue在运行时也是需要依赖的，所以不需要使用–save-dev。

使用

  1. 在js文件中使用vue进行开发：

    //使用vue进行开发
//导入vue模块，引号中的vue就是安装好的vue模块
import Vue from 'vue';

const app = new Vue({
  el: '#app',
  data: {
    msg: 'hello webpack'
  }
})

  2. 在index.html文件中输入代码并执行：

    <div id="app">
  <h1>{{msg}}</h1>
</div>
<script src="./dist/bundle.js"></script>

运行时的错误-模板编译器

  1. 并没有执行，浏览器会抛出一个错误：
    正在使用vue的runtime-only版本，模板编译器不可用。

    🗨️这是由于vue模块有两个版本：runtime-only 和 runtime-compiler：

    • runtime-only => 代码中不可以有任何的template；
    • runtime-compiler => 代码可以有template，因为有compiler用于编译template。

    🗨️因为使用的是前者打包，它其中并没有包含模板编译器，所以浏览器无法正常运行。被Vue实例el属性挂载的元素也可以看做是一个模板

  2. 解决这个问题需要在webpack.config.js文件中加入：

      resolve: {
    //别名
    alias: {
      // vue$表示以vue结尾的文件,由于默认情况下vue使用的是vue.runtime.js，所以我们需要将vue的默认使用改变从而使用runtime-compiler。
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
    是将Vue的默认使用文件改变为vue.esm.js从而可以使用模板编译器

  3. 再次npm run build，就可以在浏览器中正常渲染啦！
    hello webpack

创建Vue时el和template的关系

在上面的代码可以正常运行后，有一个问题出现了：

❓ 当我们后续想要添加或修改data或其他属性的引用方式，我们就需要在index.html中修改相应的代码。那么有没有一种方法可以使我们在js文件中就可以修改呢？

Vue实例中的template属性

答案是我们可以在Vue实例中定义一个template属性：

  • 在之前，我们只是定义了el属性，使得Vue实例对html中一个元素进行绑定；

  • 现在我们只在html中保留一个div#app的元素，然后在Vue实例中定义一个template属性；

    const app = new Vue({
  el: '#app',
  template: `
  <div>
    <h2>{{msg}}</h2>
    <h2>{{name}}</h2>
    <button @click="btnClick">点击事件</button>
  </div>
  `,
  data: {
    msg: 'hello webpack',
    name: 'coderbut'
  },
  methods:{
    btnClick(){
      alert('alert');
    }
  }
})

  • 完成之后即使html页面只有一个div#app元素，也可以正常渲染。有利于文件的分离。
    正常渲染

分离写法

在上面，使用了Vue实例中的template属性，从而使前端html文件中只有一个div#app的元素。

我们可以定义一个子组件，将属性从Vue实例中分离出来：

const App = {
  template: `
    <div>
    <h2>{{ msg }}</h2>
    <h2>{{ name }}</h2>
    <button @click="btnClick">点击事件</button>
    </div>
  `,
  data() {
    return {
      msg: 'hello webpack',
      name: 'coderbut'
    }
  },
  methods: {
    btnClick() {
      alert('alert');
    }
  }
}

然后在Vue实例中注册模板，并在实例中的template属性中使用组件。

new Vue({
  el: '#app',
  template: '<App />',
  components:{
    App
  }
})

打包并运行，这样也可以得到相同的效果

template: ‘’

模块化 - 在js文件中导出

✨除了上述在一个js文件中定义一个子组件，还可以在另一个js文件中定义并导出，然后在mian.js文件中导入。

  1. 定义一个App.js文件，并编辑。

    //App.js
//default表示导出一个模块并且由导入者命名
export default {
  template: `
    <div>
    <h2>{{ msg }}</h2>
    <h2>{{ name }}</h2>
    <button @click="btnClick">点击事件</button>
    </div>
  `,
  data() {
    return {
      msg: 'hello webpack',
      name: 'coderbut'
    }
  },
  methods: {
    btnClick() {
      alert('alert');
    }
  }
}

    //main
import Vue from 'vue';
import App from './js/App'
new Vue({
  el: '#app',
  template: '<App />',
  components:{
    App
  }
})

  2. 打包并运行，依然可以得到相同的效果。

模块化 - 在.vue文件中配置

在使用vue模块中，我们可以定义后缀为.vue的文件，在里面定义属性模板，之后在js文件中引用。

  1. 首先创建一个App.vue文件。
    vue文件模板

  2. 在vue文件中编辑。

    <template>
  <div>
    <h2>{{ msg }}</h2>
    <h2>{{ name }}</h2>
    <button @click="btnClick">点击事件</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      msg: 'hello webpack',
      name: 'coderbut'
    }
  },
  methods: {
    btnClick() {
      alert('alert');
    }
  }
}
</script>
<!--可以为模板内的元素定义样式-->
<style scoped>
h2 {
  color: powderblue;
}
</style>

  3. 在main.js文件中导入该文件，注意此时文件需要加后缀；

    import App from './vue/App.vue';
mport App from './vue/App.vue';

new Vue({
  el: '#app',
  template: '<App />',
  components:{
    App
  }
})

    💡 如果不想导入的时候加后缀，可以在webpack.config.js文件中配置resolve属性

    resolve: {
      //该属性表示可以省略的后缀名
  extensions:['.js','.css','.vue']
}

  4. 此时如果直接打包会报错；
    需要使用vue-loader

  5. 我们需要安装vue-loader和vue-template-compiler。

    npm install vue-loader vue-template-compiler --save-dev

    然后在webpack.config.js文件中添加规则:

    rules: [
  {
    //意为 .vue 文件使用vue-loader处理
    test: /\.vue$/,
    use: ['vue-loader']
  }
]

    🚨注：在vue-loader14版本之后，使用vue-loader需要另外配置一个插件，这次我们把vue-loader的版本改到13 。

  6. 更改vue-loader版本。

    进入package.json文件，将vue-loader的版本改为^13.0.0 。再次运行npm install。

  7. 安装完成之后再次运行npm run build进行打包。

  8. 运行。
    可以正常运行，并且定义 样式也生效了

当然，在vue文件中也可以导入vue文件(套娃警告)。

  1. 定义另一个vue文件Cpn.vue；

    //Cpn.vue
<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "Cpn",
  data() {
    return {
      msg: 'cpn template'
    }
  }
}
</script>

<style scoped>

</style>

  2. 在App.vue中导入并注册；

    components: {
    Cpn
 }

  3. 之后重新打包并运行，就可以看到我们在App.vue中使用的Cpn.vue的内容了。

    执行效果

webpack的plugin(插件)

什么是plugin？

🦆 plugin是插件的意思，通常是用于对某个现有的架构进行扩展；

🦆 webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。

plugin和loader的区别

👁️ loader主要用于转换某些类型的模块，它是一个转换器；

👁️ plugin是插件，它是对webpack本身的扩展，是一个扩展器。

plugin的使用

  1. 通过npm安装需要使用plugins(某些webpack内置的插件无需安装)；
  2. 在webpack.config.js文件中plugins中配置插件。

webpack的各种plugins

BannerPlugin插件

作用

BannerPlugin是webpack的自带插件，用来为打包的文件添加版本声明。

具体使用

  1. 修改webpack.config.js文件(由于是自带插件，所以不需要安装)：

    • 首先导入webpack模块

      //导入webpack
const webpack = require('webpack');

    • 然后在属性中添加plugins属性并定义

      plugins: [
	new webpack.BannerPlugin('最终版权归coderbut所有')
]

  2. 重新打包，然后在打包好的bundle.js文件中就可以看到我们用BannerPlugin定义的内容了。

    BannerPlugin

HtmlWebpackPlugin插件

目前我们的index.html是存放于根目录下的，在发布项目时，只是会发布dist文件夹，但是如果该文件夹下没有index.html文件，那么打包好的js文件也就无法使用了，所以我们需要将index.html文件也打包到dist文件夹中，这时就需要使用HtmlWerbpackPlugin插件了。

作用

▶️ 自动生成一个index.html文件(可以指定模板生成)；

▶️ 将打包好的js文件，通过<script>标签插入到<body>中。

具体使用

  1. 安装插件(学习的时候安装3.2.0版本，高版本会报错)

    npm install html-webpack-plugin@3.2.0 --save-dev

  2. 修改webpack.config.js中的plugins内容：

    plugins: [
	new HtmlWebpackPlugin()
]

  3. 打包，之后就可以在dist目录下看到index.html文件，并且自动引入了bundle.js文件。

    dist文件下的index.html

    自动引入了bundle.js

    注： 由于现在index和bundle文件打包在同一目录下,所以我们不再需要使用webpack.config.js文件中的publicPath属性来指定路径。

    注释掉publicPate

UglifyjsWebpackPlugin插件

作用

压缩打包好的js文件。使js文件变得可读性差。

具体使用

  1. 安装插件(安装1.1.0版本，跟着老师做，先用指定版本~不然报错没法整，也是与cli的版本对应)；

    npm install uglifyjs-webpack-plugin@1.1.0 --save-dev

  2. 在webpack.config.js中配置；

    • 引入

      //引入UglifyWebpackPlugin插件
const UglifyWebpackPlugin = require('uglifyjs-webpack-plugin');

    • 配置plugins

      new UglifyWebpackPlugin()

  3. 再次打包，找到bundle.js文件查看。

    压缩混淆之后

webpack-dev-server搭建本地服务器

作用

webpack提供了一个可选的基于nodejs的本地开发服务器，内部使用express框架，可以使浏览器自动刷新显示我们修改之后的结果。

使用

  1. 使用npm安装该模块(跟着老师做，先用指定版本~不然报错没法整，也是与cli的版本对应)；

    npm install --save-dev webpack-dev-server@2.9.3

  2. 在熟悉的webpack.config.js文件中配置devserver属性：

      devServer: {
    //为哪个文件夹提供本地服务，默认根文件夹
    contentBase: './dist',
    //是否实时监听
    inline: true
    //端口号,先不配置了
    //port: 
  }

  3. 再去package.json中配置一个scripts；

     "dev": "webpack-dev-server --open"   // --open是打开浏览器

  4. 然后再运行npm run dev，会启动监听并打开浏览器，此时的路径就为

    localhost:8080

  5. 实时监听效果

    实时改变样式

webpack配置文件分离

为什么这样做

在webpack.config.js文件中，我们有的配置是需要在开发时配置的，而实际运行时并不需要，比如WebpackDevServer模块、各种plugin。

具体使用

  1. 分离我们的配置文件，定义三个配置文件。

    • base.config.js：用于存储开发和运行公用的配置，即这里面的配置既是开发时依赖，也是运行时依赖；
    • dev.config.js：开发时特殊的配置放在dev配置文件里面，只是开发时需要，实际运行时不需要的配置；
    • prod.config.js：生产时(运行时)特殊的配置放在prod配置文件里面。
    //base.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins: [
    new webpack.BannerPlugin('最终版权归coderbut所有'),
    new HtmlWebpackPlugin({
      template: 'index.html'
    })
  ],
}

    //dev.config.js
module.exports = {
  devServer: {
    contentBase: './dist',
    inline: true
  }
}

    //prod.config.js
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  plugins:[
    new UglifyjsWebpackPlugin()
  ]
}

  2. 安装webpack-merge模块(还是低版本，教程比较老，为了学习~)

    npm install webpack-merge@4.1.5 --save-dev

    之后在各个文件中导入并使用

    //prod.config.js
//导入WebpackMerge和base.config.js
const WebpackMerge = require('webpack-merge');
const BaseConfig = require('./base.config')

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
//使用WebpackMerge
//意为将第二个参数里的数据和导入的base.config.js文件合并
module.exports = WebpackMerge(BaseConfig,{
  plugins:[
    new UglifyjsWebpackPlugin()
  ]
});

    const WebpackMerge = require('webpack-merge');
const BaseConfig = require('./base.config');

module.exports = WebpackMerge(BaseConfig,{
  devServer: {
    contentBase: './dist',
    inline: true
  }
});

  3. 删除webpack.config.js文件，之后运行打包程序，终端会报错；

    没有找到配置文件

  4. 此时我们需要在package.json中的script属性中配置，为其中的自定义指令指令添加额外的命令；

     //自定义配置文件
    "build": "webpack --config ./build/prod.config.js",
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"

  5. 再次打包，就可以成功了。

  6. 但是仍然会存在一个问题，就是在打包成功之后，打包好的bundle.js文件会在build文件下新建的dist文件夹中。

    路径问题

    解决这个问题只需要进入base.config.js文件，找到当时定义的path属性，然后修改。

     entry: './src/main.js',
  output: {
    //找到上一层然后拼接dist
    path: path.resolve(__dirname, '../dist'),
    filename: 'bundle.js',
  }

    修改完成之后再次打包，打包好的文件就会出现在该出现的位置了(根目录下的dist文件夹)。

coderbut
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
PCB设计中如何选择自动布线和手动布线？
10-24 1万+
PCB设计工程师在设计PCB时，往往很想使用自动布线。通常，纯数字的电路板(尤其信号电平比较低，电路密度比较小时)采用自动布线是没有问题的。但是，在设计模拟、混合信号或高速电路板时，如果采用PCB设计软件的自动布线工具，可能会出现一些问题，甚至很可能带来严重的电路性能问题。 图1 采用自动布线为图3所示电路原理图设计的电路板的顶层   图2 采用自动布线为图3所示电路
AD18/19自动布线之坑
热门推荐
qq_41546863的博客
06-30 2万+
自动布线？？？，你我把过孔全部改了，不但如此，你走线走的乱七八糟的，花式走线使我想卸载AD，xxx的。不仅如此，过孔不要钱？？？你当真板厂年你开的？？？必须骂AD一顿，以后不学这破玩意了。 你是大哥，这个图是你给我整的过孔，原来放的过孔有的不见了，那个最小的过孔是我放的过孔，你放的过孔那么大。本来想着提高效率，结果降低效率。 我莫得办法，四处找方法，终得解决方案，我可真是个小机灵鬼。 单...
ad19怎么手动布线_AD19如何使用强大的自动布线功能
weixin_40004502的博客
01-31 5421
一起跟着小编的步骤慢慢走，今天我们一起来看下我们的AD19中的强大的自动布线 功能，在ad19当中我们的自动布线功能得到了更大的提升和优化，当然这也是以后EDA的一个发展趋势。我们看下，在我们的AD19中布线模式。首先我们建立我们的类。下一步，我们需要对我们的器件进行删好孔，对我们的间距规则，线宽规则，高速信号长度规则进行建立和设置。建立好对应的规则之后，我们接下来来绘制ddr的走线。看到这里，...
[Altium Designer 19 画板]自动布线画PCB
06-06 1万+
1.首先保证原理图编程过来，不要忽略错误（采用系统默认的检查设置）。原则：不要一下子全部画完原理图再画PCB，不然会有很多错误，改都改不过来。就像写单片机C语言一样，写几行就烧录到单片机里跑一下，如果一下子写完再调试，就太麻烦了。 2.自动布线前要设置一下，进入设置： 2.1设置最小间隔： 2.2设置过孔大小： 2.3设置连线宽度： ...
ad自动连线_AD19如何使用强大的自动布线功能
weixin_39853843的博客
12-22 2457
AD19如何使用强大的自动布线功能一起跟着小编的步骤慢慢走，今天我们一起来看下我们的AD19中的强大的自动布线 功能，在ad19当中我们的自动布线功能得到了更大的提升和优化，当然这也是以后EDA的一个发展趋势。我们看下，在我们的AD19中布线模式。首先我们建立我们的类。+08:00C465联盟网4647.png (23.95 KB, 下载次数: 7)2019-8-15 18:10 上传下一步 ，我...
WebPack的使用
weixin_44422620的博客
09-15 279
WebPack的使用
AD19新功能之ActiveRoute
weixin_34122810的博客
05-30 1327
AD19新增了ActiveRoute功能（自动布线功能），强大而实用； 1、河流式布线模式 在PCB面板中选择相应的网络，选中飞线，或者按住 Alt 然后鼠标从右下往左上进行框选，选中对应的飞线 然后点击工具栏中的ActiveRoute进行自动布线，也可以在ActiveRoute面板中，选择布线的层，在点击 ActiveRoute进行自动布线，效果如下： 使用相同的步骤，完成所有飞...
simulink建模-自动整理连线
weixin_40497850的博客
02-16 4601
simulink建模自动整理连线，智能调整模块布局
Simulink/System Generator中自动布线
zhanghaijun2013的博客
06-30 2907
该工具适用于Matlab2011b之后的版本，如果layout type被设为了GraphPlot，就需要2015b之后的版本。关于layout type后面会讲到。 将解压后的文件夹放到Matlab的搜索路径下，什么是Matlab的搜索路径? 很简单的一种方式就是在Matlab的命令行窗口下输入"path"，就可以打印出来，如下图。这里，我放到了第一个路径下。 执行sl_refresh_customizations指令，刷新context menu 双击这个.mltbx文件 会弹..
AD仿真入门教程
07-26
AD最基础的仿真入门教程，希望用AD进行仿真工作的可以看一下
AD电路仿真的方式_604784.pdf
09-04
AD电路仿真的方式_604784
autium pcb手动布线_Altium-Designer手动布线的最佳设置
weixin_39861624的博客
12-21 429
精选AltiumDesigner-PCB栅格、层以及设计规则。PCB编辑工作环境允许PCB设计在二维及三维模式下表现出来。二维模式是一个多层的、理想的普通PCB电路设计的环境，如放置元器件，电路和连接。三维模式对检验用户的设计的表面及内部电路都非常有用(三维模式不支持提供二维模式下的全部功能)。您可以通过：File>>SwitchTo3D，或者File>>Switch...
AD19走线自动优化操作
科技室的博客
02-27 2498
先选择一部分要优化的线路，按Tab键，这时会选中全部对应的网络。 执行菜单栏中的“布线”→“优化选中的走线”命令，按快捷键Ctrl+Alt+G进行优化。
【AD20学习笔记】PCB设计规则设置及手工布线
m0_65222834的博客
07-25 8765
画图
Simulink(自动整理模块连线/连线显示数据类型/适应内容等)
m0_64651092的博客
04-13 7443
Simulink中的一些细节操作——自动整理连线模块/连线显示数据类型/适应内容/全部重命名Goto From名称。
手动走线教程---Altium Designer15
zuoheizhu的博客
12-29 5954
滴泪添加（增加电器连接性能） 点击图中箭头方向 选择 All，代表所有对象 Selected only代表选中对象 滴泪使用前 滴泪使用后 附铜后进行检查 Shift+s只显示当前图层 Shift+s只显示当前图层 Shift+s只显示当前图层 Shift+s只显示当前图层 Shift+s只显示当前图层 Shift+s只显示当前图层 Shift+s只显...
Altium Designer第四课——布线
weixin_45863919的博客
05-25 5086
1.手动布线 布线时如果顶层丝印阻挡视线，可以进行隐藏 布线时，GND地不需要单独连接，所以可以隐藏它的飞线 同时电源5v,3.5v也可隐藏 快捷键N隐藏 同时，在允许的情况下，电源线一般15mil，普通线10mil 布线选项 快捷键ctrl+w ctrl+D可以设置布线的线呈现高亮状态 同时布线时，需要注意布线角度需要大于90度 快捷键ctrl+m调出面板测量两条线的距离 shift+c取消面板 调整电气规则，设置两线之间距离为6mil 使用小...
PCB线路板设计如何用AD布线？
jdbpcb88的博客
11-26 3416
如果想作一名合格的硬件工程师，pcb设计是必须要掌握的技能。目前制作pcb的软件有很多种，不说都能会使用，但至少得会用一种。 第一步：显示分装的名字或型号 图一 图二 通过图1我们可以得知电阻只有一个编号R34，要如何把这个电阻的阻值给显示出来呢？这个时候你可以双击要修改的封装（R34），如图2所示：在弹出的属性框中去掉Hide的勾选，确认后查看PCB会显示出R34的阻值为10k（图三）。 第二步：批量修改丝印字体的大小 如图三中R34这个编号看起来是不是有点大，要怎么修改它的大
webpack使用教程
最新发布
07-28
以下是一个简单的Webpack使用教程： 1. 安装Webpack：首先，你需要在你的项目中安装Webpack。你可以使用npm或yarn来安装Webpack。在命令行中运行以下命令来进行安装： ``` npm install webpack webpack-cli --...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值