环境(@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
},