路由和第三方UI组件

目录

一.路由

二.第三方UI组件

---

一.路由

1.作用：

  实现SPA（单页面）应用中的组件跳转，相当于页面中啊标签。

2.基本使用

• 非模块化开发

①引入vue-router.js文件

<script src="js/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

 ②定义若干个组件（为了跳转用）

let goodlist = {
   template:"<div>商品列表</div>"
}

let goodsdetail = {
   template:"<div>商品详情</div>"
}

 ③定义路由对象

        1）路由配置（json数组）

let routes = [
	{
    path:'/goodslist',
    component:goodlist
    },
	{
    path:'/goodsdetail',
    component:goodsdetail
    }
];

2）实例化router对象

let router = new VueRouter({
	   //routes:routes
        rotes  
      //当属性和属性值一样时，可以只写一个
});

 ④挂载vueRouter对象

实例化vue对象（将vueRouter的实例化对象挂载[注册]到vue对象中）

let vm = new Vue({
    el:"#app",
    router
});

 ⑤跳转代码（声明式）

  <h1>路由跳转</h1>
  <hr/>
  <router-link to='/goodslist'>商品列表</router-link>
  <router-link to='/goodsdetail'>商品详情</router-link>
  <hr/>
  <router-view></router-view>
<!-- 展示区-->

•  模块化的方式（脚手架）

        tips：脚手架安装时，会默认安装vue-router。

①安装

npm i vue-router -S （--save的缩写）
//S：发布依赖   D：发布依赖

②定义组件（单文件组件）

③创建vueRouter对象，并做路由配置和引入

        1）创建vueRouter对象（定义路由对象，配置路由）

// 在跟项目下的src创建文件：src/router/index.js

import Vue from 'vue'

//1. 引入路由包
import Router from 'vue-router'

//2. 安装插件包到Vue上, 
Vue.use(Router)

//3. 路由配置
let routes = [
  {
      path: '/', 
      component: HelloWorld
  },
  {
      path: '/home',
   	  component: Home
  }, //route  一条路由的配置
]

//4.路由实例
let router = new Router({ //插件路由对象，这里的Router对象就是在引用vue-router另起的别名
  // routes:routes
  routes,
});

//5.导出路由实例，让它去控制vue根
export default router

        2）在main.js中引入vueRouter对象，并植入到根属性

// src/main.js
import router from './router/index';

new Vue({
  el: '#app',
  router, //植入根属性，在组件里就可以使用 this.$router
})

④展示

<router-view>展示区</router-view>

 ⑤跳转

        1）声明式跳转

<router-link to="/home">声明式跳转</router-link>
<router-link to="/home" tag='li' active-class='类名' >声明式跳转</router-link>
//  to:跳转的路径
//tag='li' 指定编译后的标签，默认是 a 标签。
//active-class='类名' 	指定激活后的样式	模糊匹配
//exact-active-class='类名' 	指定激活后的样式  严格匹配
//router-link和router-view组件是vue-router插件提供的

        2)编程式跳转（编程式导航）

•   this.$router.push(字符串/对象)：添加一个路由（记录到历史记录）

// 字符串
$router.push('home')

// 对象
$router.push({ path: 'home' })

• this.$router.replace({name:".."}) //替换一个路由（不记录到历史记录）类似于栈，先进后出。
• this.$router.go(-1/1)|back()|forward()回退/前进

二.第三方UI组件

1.分类

PC端、后台管理

• element-ui
• iview
• ant design

移动端、客户端

• mint-ui
• vant https://youzan.github.io/vant/#/zh-CN/
• vue-material
• muse-ui
• VUX
• cube-ui

• vonic

• Vue-Carbon

• YDUI

通用

• bootstrap4/3

• ameizi

2.模块化开发使用（脚手架）（以vant为例）

• 整体引入（首先需要下载）在main.js中引入

import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

• 按需引入（全局/局部使用）

npm i babel-plugin-import -S

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

//局部使用:
  import { Button, Cell } from 'vant';
  components:{Button,Cell}
  //<Button></Button>

//全局使用
  import { Button } from 'vant';
  Vue.use(Button); 
  //<van-xxx></van-xxx>

• 根据官网的步骤，按需求copy自己需要的样式哦~

这样我们的页面就会美美哒了，不会很丑了幺。。。