2022/9/4Eslint规范的插件安装以及配置.全局配axios插件,前端路由概念,vue-router的使用和配置4步,了解 router-view和router-link,redirect强制

推荐Eslint插件

Eslint 作者是 微软 ,  配置设置填写

"editor.codeActionsOnSave":{"source.fixAll":true,},

 Prettier - Code formatter 插件

作者 ： "Prettier"
 

在设置内的配置

{   "editor.codeActionsOnSave":{"source.fixAll":true,},
    
    //导入文件时是否携带文件扩展名
    "path-autocomplete.extensionOnImport": true,
    //配置@的路径展示
    "path-autocomplete.pathMappings":{
        "@":"$(folder)/src"
    },
    "editor.tabSize": 2,
    "editor.formatOnSave": true,
    "prettier.configPath": "C:\\Users\\酷比\\.prettierrc",
    "eslint.alwaysShowStatus": true,
    "prettier.trailingComma": "none",
    "prettier.semi": false,
    //每行文字个数超出被迫转行
    "prettier.printWidth": 300,
    //使用单引号替换双引号
    "prettier.singleQuote": true,
    "prettier.arrowParens": "avoid",
    //设置.vue文件中，HTML代码格式化插件
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.ignoreProjectWarning": true,
    "vetur.format.defaultFormatterOptions": {
       "prettier": {
        "trailingComma":"none",
        "semi":false,
        "singleQuote":true,
        "arrowParens":"avoid",
        "printWidth":300
       },
       "js-beautify-html": {
        "wrap_attributes":false
       }
    }
    
}

 演示axios

安装过程中出现 npm ERR! code ERESOLVE 问题

在命令后添加 --legacy-peer-deps 解决 

传统的axios的POST和GET方式不推荐，建议是axios挂载到Vue上

现在开始如果想在每个组件上用axios请求的话，可以先向mainjs内声明一个实例,通过原型对象的方式实现全局axios效果

import axios from 'axios'
Vue.prototype.$http = axios

<script>
export default {
  methods : {
   async getinfo(){
   const {data:res} = await this.$http.get('http://www.liulongbin.top:3006/api/get')
   console.log(res)
    }
  }
}
</script>

$http为自定义名称

axios根路径整合方式

 在main.js内添加，端口号之前都属于根路径

axios.defaults.baseURL = '请求根路径'

缺点：无法实现api接口复用

 了解前端路由概念

快速前端路由有组件来帮助我们创建路由 ，以下这些内容后期直接创建即可，不需要手动配置

 切换界面

首先在a标签的连接内声明几个哈希名称

component理解为切换属性绑定动态is后将在data内声明的名称传入，在created内利用onhashchange监听

<template>
  <div class="app-container">
    <h1>App 根组件</h1>

    <a href="#/home">首页</a>
    <a href="#/movie">电影</a>
    <a href="#/about">关于</a>
    <hr />

    <component :is="comName"></component>
    
  </div>
</template>

<script>
// 导入组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

export default {
  data (){
    return {
      //在动态组件展示的名字必须是字符串
      comName : ''
    }
  },
  //只要APP组件创建就立即监听onhashchange
  created(){
    window.onhashchange = () => {
      switch (location.hash) {
        case '#/home' :
          this.comName = 'Home'
          break
        case '#/movie' :
          this.comName = 'Movie'
          break
        case '#/about' :
          this.comName = 'About'
          break    
      }
    }
  },
  name: 'App',
  // 注册组件
  components: {
    Home,
    Movie,
    About
  }
}
</script>

<style lang="less" scoped>
.app-container {
  background-color: #efefef;
  overflow: hidden;
  margin: 10px;
  padding: 15px;
  > a {
    margin-right: 10px;
  }
}
</style>

vue-router的基本使用 （3.5.2 -S）

1安装 vue-router 包 

npm i vue-router@3.5.2 -S

2创建路由模块

在src目录下新建router/index.js路由模块

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter)

const router = new VueRouter()

export default router

3导入挂载路由模块(在main中)

import Vue from 'vue'
import App from './App2.vue'
//引入router
import router from './router'

// 导入 bootstrap 样式
import 'bootstrap/dist/css/bootstrap.min.css'
// 全局样式
import '@/assets/global.css'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  //在vue项目中把路由用起来必须把路由实例进行挂载
  router : router
}).$mount('#app')

4声明路由链接和占位符

在 APP.VUE的a标签标注哈希地址，再用 router-view当作占位符

<template>
  <div class="app-container">
    <h1>App2 组件</h1>
    <a href="#/home">首页</a>
    <a href="#/movie">电影</a>
    <a href="#/about">关于</a>
    <hr />
    <!-- 在项目配置了vue-router就能使用，作用单纯占位符 -->
    <router-view></router-view>
  </div>
</template>

router内的index,js

首先引入三个界面，其次在实例内用routes数组建立连接

import Vue from "vue";
import VueRouter from "vue-router";
import Home from '../components/Home.vue'
import Movie from '../components/Movie.vue'
import About from '../components/About.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  //router是一个数组，定义hash地址和组件之间的关系
  //路由规则
  routes : [
    {path : '/home', component:Home},
    {path : '/movie', component:Movie},
    {path : '/About', component:About}
  ]
})

export default router

使用router-link替代a链接

实际router-link在源代码中也会被替代成a标签 

<template>
  <div class="app-container">
    <h1>App2 组件</h1>
    <!-- 安装配置vue-router后可以用router-link替代a链接(尽量用),省略# -->
    <router-link to="/home">首页</router-link>
    <router-link to="/movie">电影</router-link>
    <router-link to="/about">关于</router-link>
    <hr />
    <!-- 在项目配置了vue-router就能使用，作用单纯占位符 -->
    <router-view></router-view>
  </div>
</template>

 路由重定向

用户访问地址A，强制跳转到地址C ，展示特定组件页面（redirect）

在router的index.js内声明 redirect （省的用户进入界面显示空白）

import Vue from "vue";
import VueRouter from "vue-router";
import Home from '../components/Home.vue'
import Movie from '../components/Movie.vue'
import About from '../components/About.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  //router是一个数组，定义hash地址和组件之间的关系
  routes : [
    //重定向路由规则
    {path : '/', redirect :'/home'},
    {path : '/home', component:Home},
    {path : '/movie', component:Movie},
    {path : '/About', component:About}
  ]
})

export default router