Vue3 遇到的问题(一)

本文围绕Vue3开发展开,介绍了在@vue/cli 4.5.9、node v12.9.1、vue 3.0.0环境下的常见问题及解决办法。包括vue-devtools不能使用、ant-design-vue引用报错、安装后报vue未定义等问题,还提及了组件引用、样式配置、路由配置等方面的解决思路。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

环境(@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
  },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值