作者：threedayman

起源：恒生LIGHT云社区

1.装置插件没有写入到package.json中

例如须要装置vue-router插件通过以下命令

cnpm install vue-router

发现装置插件胜利，然而package.json文件中的依赖信息中没有vue-router。查问材料后为了确保插件信息可能写入到package.json文件中，须要通过以下命令，减少--save 选项。

cnpm install vue-router --save

2. 路由信息未失效

路由配置信息 index.js,外面配置了路由地址和对应的组件信息，通过相似key、value的模式绑定。

import Vue from "vue";import VueRouter from "vue-router"import Home from "../views/Home.vue"import About from "../views/About.vue"Vue.use(VueRouter)const routers =[    {        path:'/',        name:'Home',        component:Home    },    {        path:'/about',        name:'About',        component: About    }]const router = new VueRouter({    mode:'history',    base:process.env.BASE_URL,    routers})export default router

路由组件页面Home和About

<template>  <div class="home">    <h1>This is Home</h1>  </div></template>
<template>  <div class="about">    <h1>This is About</h1>  </div></template>

通过App.vue页面演示路由跳转，App.vue相干代码如下

<template>  <div id="app">    <router-link to="/">转去HOME</router-link>|    <router-link to="/about">转去About</router-link>    <router-view />  </div></template><script>export default {  name: 'App',  data(){    return{      radio:"1"    }  } }</script><style>#app {  margin-top: 60px;  font-family: Avenir, Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;}</style>

演示的时候发现path信息随着点击变动，然而组件信息没有展现进去，如下。

通过确认是因为index中的routes拼写错误为routers，将其改过后运行失常。

这种拼写错误开发工具却不揭示，或者对于后端开发来说编译器没有报错，定位问题真的只能靠搜寻工具了。

组件注册但未应用

定义了一个CommonAside.vue组件，并在Main.vue中进行应用。

<template>  <el-container style="height: 100%">    <el-aside width="auto"><common-aside></common-aside></el-aside>    <el-container>      <el-header>Header</el-header>      <el-main>Main</el-main>    </el-container>  </el-container></template><script>import CommonAside from "../components/CommonAside.vue"export default{  name:"Main",  components:{CommonAside}};</script><style lang="css" scoped>.el-header{  background: #333;}.el-main{  padding-top: 0;}</style>

当通过npm run serve 启动我的项目的时候 呈现以下错误信息

The "CommonAside" component has been registered but not used  vue/no-unused-components

通过搜寻相干信息倡议 <common-aside>首字母改为大写，批改后我的项目失常启动。