vue学习笔记

router实现页面跳转

主页面

<template>
   <div>
   <router-link to="/A">转向A页面</router-link>    
   
   <router-link to="/B">转向B页面</router-link>
   </div>
</template>

index.js页面

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import A from '@/components/A'
import B from '@/components/B'
import First from '@/components/First'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'First',
      component: First
    },
    {
      path:'/A',
      name:'a',
      component:A
    },
    {
      path:'/B',
      name:'b',
      component:B
    }
  ]
})

目标B页面

<template>
    <div>
    我是B页面
    <div><router-link to="/">返回</router-link></div>
    </div>
</template>

实现路由嵌套效果：children：[{},{}]

当我们在父页面中添加好子页面，并且在index.js中定义好子页面后，点击跳转发现生效不了，是因为没有添加<router-view></router-view>,在父页面里应该写一个业务挂载，意思就是让该父页面成为可以转向的内容；

<template>
   <div>
   <router-link to="/A">转向A页面</router-link>    
   
   <router-link to="/B">转向B页面</router-link>
   <router-view></router-view>
   </div>
</template>

单独安装eslint

什么是eslint？
Eslint的目标是提供一个插件化的javascript代码检测工具（可组装的JavaScript和JSX检查工具），主要在命令行中使用
放到开发环境：
ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。如果每次在代码提交之前都进行一次eslint代码检查，就不会因为某个字段未定义为undefined或null这样的错误而导致服务崩溃，可以有效的控制项目代码的质量

npm install --save-dev

安装成功的标志：
<script></script> ：里面写功能
<style></style>：里面写样式，可以单独设置某一个页面的样式；

在App.vue里面统一写全局样式。

卸载vue cli2
在安装vuecli3之前我们需要用指令卸载掉vuecli2：npm uninstall vue-cli -g
卸载成功图示：

区分vue-cli2和vue-cli3
普通安装vue-cli3：npm install -g @vue/cli
淘宝镜像安装vue-cli3：cnpm install -g @vue/cli
启动vue-Cli3
通过指令：vue ui


然后按照图形化界面去新建项目，进入到可视化界面

运行后输入：localhost:8080即可看到我们运行的界面，如下图：