乐趣区

关于javascript:从0开始学VUE-踩坑记录

jiezi

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

退出移动版