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

- 阅读剩余部分 -

由于setup 中没有this 对象
所以不能像vue2中直接用 this.$http() 调用如下方法

app.config.globalProperties.$http = () => {
  //http
}


setup(props, context) {
    const that = getCurrentInstance()
    that.proxy.$http ()
}

出错原因：做一个移动端的项目，安装了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
            }
          }
        })
      ]
    }
  },

在写一些vue项目时候，经常会引入一些组件。无论是自定义组件还是引入的外部组件。style标签上都有scoped属性。

- 阅读剩余部分 -