分类 web前端 下的文章



可能很多同学(包括我)刚上手 Vue 3.0 之后,都会觉得开发过程似乎变得更繁琐了,Vue 官方团队当然不会无视群众的呼声,如果你基于脚手架和 .vue 文件开发,那么可以享受到更高效率的开发体验。

在阅读这篇文章之前,需要对 Vue 3.0 的单组件有一定的了解,如果还处于完全没有接触过的阶段,请先抽点时间阅读 单组件的编写 一章。

- 阅读剩余部分 -

本人移动端开发者一枚,今年由于公司在业务上的变更,从零开始学习了vue以及一系列前端相关的东西,妥妥的开启了新手模式,由于一上手就是vue3.0了,所以碰到的很多问题都很难找到对应的解决方案,接下来就聊聊组件命名这件事情吧。

- 阅读剩余部分 -

出错原因:做一个移动端的项目,安装了postcss-px2rem,同时安装了vant插件,在全局引入时,main.js导入vant样式文件报错以上错。

百度出错原因是因为postcss-px2rem

解决方案:卸载postcss-px2rem,下载postcss-pxtorem,postcss-pxtorem也是一款postcss插件,用于将css单位转化为rem,用于移动端适配,同时在postcss.config.js设置如下代码,没有这个文件可以自己创建该文件夹。amfe-flexible ,添加 根节点 font-size

npm install autoprefixer postcss-pxtorem amfe-flexible --save-dev

const autoprefixer = require('autoprefixer')
const px2rem = require('postcss-pxtorem')

module.exports = {
  plugins: [autoprefixer(), px2rem({ rootValue: 75, unitPrecision: 5, propList: ['*'] })]
}

main.js 增加

import 'amfe-flexible'

安装 uglifyjs-webpack-plugin

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

vue.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin') //引入插件
configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            // 删除注释
            output: {
              comments: false
            },
            // 删除console debugger 删除警告
            compress: {
              drop_console: true, //console
              drop_debugger: false,
              pure_funcs: ['console.log'] //移除console
            }
          }
        })
      ]
    }
  },