初次使用vue写项目的一些经验

Posted 2023-01-20 vieber

  最近用vue正在写一个项目，本来以为vue很简单，但是还是发现是有一些坑在里面，现在边写边进行总结。

  首先遇到的就是页面中img中标签的图片src的加载问题，我开始以为是图片应该和组件放在一块，但是发现不行，总是报错。

./~/css-loader?sourceMap!./~/vue-loader/lib/style-rewriter.js?id=data-v-0d4c5d14!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/SkuPop.vue Module not found: Error: Can't resolve './icon_close.png' in 'E:\\code\\bookShoping\\bookShop\\src\\components' @ ./~/css-loader?sourceMap!./~/vue-loader/lib/style-rewriter.js?id=data-v-0d4c5d14!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/SkuPop.vue 6:963-990 @ ./~/vue-style-loader!./~/css-loader?sourceMap!./~/vue-loader/lib/style-rewriter.js?id=data-v-0d4c5d14!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/SkuPop.vue @ ./src/components/SkuPop.vue @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/detail.vue @ ./src/components/detail.vue @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue @ ./src/App.vue @ ./src/main.js @ multi main
大概就是这个样子，然后排查了半天，把img文件夹放在可能是目标路径的地方一个一个试结果让我发现了应该放到和根目录的index.html文件放在同一级目录下，这样就没问题了，因为会默认插入html，所以路径是按htmlj页面计算的。这个问题解决了，有来第二个问题。

  第二个问题还是因为路径的原因，这个时候是在css中引用了背景图片，就是这样background-image: url(img/icon_close.png);，然后webpack编译不通过，也不行，然后也是一个一个排查，发现要把img文件夹放在和使用这个图片的组件同级目录下，而不是根目录下就行了，思考了一些，这里因为css被打包了进去js文件里面，所以路径也是在里面，而这个背景图片是在那个组件里面，所以找的时候会去找这个组件所在的目录，然后再去找这个文件。而上一个因为里面template中的html会被编译进html中所以img的路径会按照根目录，也就是index.html的同级目录下找。

  然后又出现了一个问题，就是在当我使用webp格式的图片的时候又进行报错了，报错信息的大概是loader的问题，所以我就想到是不是webpack有问题，然后去找webpack中
test: /\\.(png|jpe?g|gif|svg|webp)(\\?\\S*)?$/, loader: 'file-loader', query: name: '[name].[ext]?[hash]'
原来test中没有webp格式的，然后是我后来加上去的，因为test是一个正则表达式，没有webp的话，他就不能把文件也作为模块打包成功，所以就出现了报错，然后这个问题就解决了。

  在使用props像子组件传递数据的时候，使用v-bind传递的就是javascript表达式，要不然就是字符串了（就不能动态变化了），所以再在此建议一下，还是要在子组件里面写props的时候验证一个数据类型。

  下面就是一个问题，我引入第三方的一个js处理函数，然后该怎么在vue中使用的问题，

欢迎关注本人公众号：前端工程师发展之路