[JavaScript知识库]从0开始学VUE - 踩坑记录

作者：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>首字母改为大写，修改后项目正常启动。