搭建vue-cli工程时遇到Unknown custom element router-view did you register the component correctly
程序员文章站
2022-03-21 22:31:17
搭建vue-cli脚手架的过程中遇到的这个问题,网上找了很多,都没有解决我的问题首先,问题出在router的index.js文件中,index.js文件就是以前的router.js,千万记住,不要跟着老版本的教程来。1.切记不要手动创建router.js,即使是你自行创建了、也添加配置了,工程也不会去寻找这个文件的。2.不要把main.js中的import Vue from 'vue'改成import Vue from'vue/dist/vue.min.js',这样虽然不会报错,但是不安全。...
搭建vue-cli脚手架的过程中遇到的这个问题,网上找了很多,都没有解决我的问题
首先,问题出在router的index.js文件中,index.js文件就是以前的router.js,千万记住,不要跟着老版本的教程来。
1.切记不要手动创建router.js,即使是你自行创建了、也添加配置了,工程也不会去寻找这个文件的。
2.不要把main.js中的import Vue from 'vue'改成import Vue from'vue/dist/vue.min.js',这样虽然不会报错,但是不安全。
3.小建议,创建工程时不要引入eslint,鬼知道在你保存的时候eslint都有什么操作,改的你头大,自己注意编码风格就可以了。
这里我想说的几点,自行比较内容,注意一下就能够避免这个问题:
1.在App.vue中,注意拼写,还有 components 是一个object,不要赋值array
<template>
<div id="app">
<!-- 路由占位符 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "app",
components: {}
};
</script>
<style>
</style>
2.在index.js中,注意拼写,及routes常量的赋值
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
Vue.use(VueRouter)
const routes = [{
path: '/login',
name: 'Login',
component: Login
}]
const router = new VueRouter({
routes
})
export default router
3.Login.vue的示例
<template>
<div>login</div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped>
</style>
4.无需修改main.js中的内容
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
就说这么多,其实很多问题都是我们书写不细心造成的。最近在学习VUE,欢迎交流。
本文地址:https://blog.csdn.net/vampire10086/article/details/107534597
上一篇: JS快速实现深拷贝--一行就搞定了
下一篇: 前端之CSS的零散知识总结