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

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

- 阅读剩余部分 -

本人移动端开发者一枚，今年由于公司在业务上的变更，从零开始学习了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
            }
          }
        })
      ]
    }
  },