Vue3 遇到的问题(一)

环境（@vue/cli 4.5.9 ，node v12.9.1, vue 3.0.0）

1.vue3 vue-cli4 vue-devtools 5.3.3不能使用 ,灰色，不能识别组件

跟换vue-devtools 6.0.0 beta 2版本
谷歌商店https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg?hl=en
（国内链接https://download.youkuaiyun.com/download/c6c6c/13287655）
重启谷歌开发者工具
或是重新加载一下配置(若还不行vue.config.js添加config.devtool和config.mode配置)

vue.config.js

const path = require("path");

module.exports = {
    lintOnSave: false,
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
        } else {
            config.devtool = 'cheap-module-eval-source-map';
            config.mode = "development"
        }
    },
};

2.ant-design-vue引用报错 https://github.com/ant-design/ant-motion/issues/44

vue.config.js

const path = require("path");

module.exports = {
    lintOnSave: false,
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true
            }
        }
    },
};

3.安装ant-design-vue后报vue is not defined

因为vue3的版本和ant-design-vue的版本不匹配，新版的vue用createApp去挂载vue，需要安装ant-design-vue的next版本

npm i --save ant-design-vue@next

4.关于vue3如何引用ant-design-vue@next中的组件

import {Button, Form, Input, Select, Row, Col} from "ant-design-vue";
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import "./components/index.less";

const app = createApp(App);

app.use(Button);
app.use(Row);
app.use(Col);
app.use(Form);
app.use(Input);
app.use(Select);
app.use(store);
app.use(router);
app.mount("#app");

或者用一下方式引用单个标签

app.component(Select.name,Select)
app.component(Select.Option.name,Select.Option)

按需加载配置

babel.config.js

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  "plugins": [
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": true }] // `style: true` 会加载 less 文件
  ]
};

5.vue3配置less全局公共样式

vue.config.js

const path = require("path");

module.exports = {
    chainWebpack: config => {
        const types = ["vue-modules", "vue", "normal-modules", "normal"];
        types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
    }
};

function addStyleResource(rule) {
    rule.use('style-resource')
        .loader('style-resources-loader')
        .options({
            patterns: [
                path.resolve(__dirname, './src/global.less'),
            ],
        })
}

6.router 里组件路径

以下下提示找不到组件

component: () => import(/* webpackChunkName: "layout" */"./layout/Main"),

更换为

component: () => import(/* webpackChunkName: "layout" */"@/layout/Main"),

7.路由配置*号报错

caught Error: Catch all routes ("*") must now be defined using a param with a custom regexp.

改为以下配置方式

 {
    path: "/:catchAll(.*)",
    name: "404",
    component: NotFound
  },