mixin、elementui使用、 插件

目录

• 1 props其他
• 2 混入mixin
• 3 插件
• 4 elementui使用(重点)
• 5 vuex
• 6 vue Router
• 7 localStorage系列

1 props其他

# 安装依赖
	cnpm install
# 做成纯净的vue项目
	-在router 的index.js 中删除about的路由
    -删除所有小组件和about页面组件
    -App.vue 只留
    <template>
    	<div id="app">
        	<router-view/>
         </div>
    </template>    

# 自定义属性，在子组件中接收传入的数据

# 方式一：使用数组
props:['name']
# 方式二：使用对象
props:{name:Number}
# 方式三：使用对象，默认值和必填
props:{
    name:{
        type:String, // 类型
        required: true, // 必须性
        default: '老王'  // 默认值
    }
}

2 混入mixin

# 可以把多个组件共用的配置提取成一个混入对象

# 使用步骤：
	1 定义混入对象，新建mixin包，下新建index.js
    2 在index.js中写 代码(组件中会用到的，data，methods。。。配置项)
    	export const guts = {
            methods: {
                showName() {
                    alert(this.name):  // 没有this.name
                },
            },
            mounted() {
                console.log("你好啊！页面挂载执行");
            }
        }
     3 局部使用(只在当前组件中使用)
    	import {guts} from '@/mixin'
        # 配置项
        mixins: [guts]
            
     4 全局使用(所有组件都可以用)  main.js中
    	import {guts} from '@/mixin'
        Vue.mixin(guts)
        // Vue.mixin(guts2)
        // Vue.mixin(guts3)
        
     5 在组件中，直接使用即可    

3 插件

功能，用于增强Vue，
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据

# 使用步骤
	1 新建包plugins.新建index.js
    import Vue from "vue";
    import axios from "axios";
    export default {
        install(vue) {
            console.log('执行了插件', vue)
            # 可以做的事
            #  1 了解，自定义指令
            #  2 定义全局变量，以后在任何组件中都可以使用到，借助于Vue.prototype往里放，以后所有组件只要this.$ajax 就是axios对象
            #  3 使用全局混入
            #  4 自定义全局组件
        }
    }
    
    2 在main.js 中配置
    # 使用自定义插件
    import plugin from '@/plugins'
    Vue.use(plugin)

4 elementui使用(重点)

# 在vue上，css样式，用的最多的是elementui，但是还有其他的
	-elementui        做网页端 样式用的多  vue2的 饿了吗团队开发的
    -elementui-plus   第三方团队继续基于vue3写的
    -vant             做app的样式
    -iview            pc端用www.iviewui.com
    
# elmentui的使用
	1 安装
    	cnpm i element-ui -S
    2 配置完整引入  在main.js 中写下以下内容
    	import ElementUI from 'element-ui';
        import 'element-ui/lib/theme-chalk/index.css';
        Vue.use(ElementUI)  // 以后在咱们组件中直接使用elementui提供的全局组件即可
	3 在组件中使用
    	-去官网看到好的，复制贴到你的项目中

5 vuex

6 vue Router

# 第三方插件，用来实现SPA 的vue 插件
	-单页面应用---》是现在一个index.html 中有页面跳转效果的插件
    -路由控制
    -<router-link>  跳转用
    -<router-view>  替换页面组件用
    
# 1 基本使用
	-1 创建vue项目时加入了，直接用即可
    	-如果之前没装：先下载，在项目中创建router包，写个index.js，代码copy过来，main.js 写一下
    -2 配置路由的跳转(跳转页面组件)，只需要在routes数组中写对象即可
    	const routes = [
            {
                path: '/',
                name: 'index',
                component: Index
            },
            {
                path: '/home',
                name: 'home',
                component: Home
            }
        ]
      -3 一定要写个视图组件 Home
    
# 2 点击跳转路由两种方式
	-js控制
    	this.$router.push('路径')
    -标签控制
    	<router-link to="/home">
        	<button>点我跳转到home页面</button>
        </router-link>
        
# 3 路由跳转，携带数据的两种方式
	-1 /course/?pk=1  带在路径中使用?携带
    -2 /course/1/      路径中分割的
    
    -1 第一种方式: /course/?pk=1
        this.$route.query.pk
    -2 第二种方式: /course/1/
        - router/index中路径得改
        	{
                path: '/login/:id',
                name: 'login',
                component: Login
            },
        -this.$route.params.id
        
# 4 区分this.$route  this.$router
	-this.$router  # new VueRouter对象，实例，可以实现路由的跳转
    -this.$route  # 是当前路由对象，内部有传入的参数
    
# 5 两种跳转方式，使用对象方式
	-this.$router.push({
        name: 'login',
        // query: {
        //   name: 'lqz',
        //   age: 19
        // },
        params: {
          id: 88
        }
      }) # 这里可以写个对象
    
    -标签形式跳转，传对象形式
    <router-link  :to="{name: 'login', query: {name: 'lqz'}, params: {id: 999}}">
        <button>点我跳转到home页面</button>
    </router-link>
    
    
# 6 路由守卫
	全局守卫
    	-前置路由守卫：在进路由前，执行代码
        -后置路由守卫：路由跳转走，执行代码
        
    如何用：router/index.js 加入
    // 全局前置路由守卫---》任意路由跳转都会触发它的执行 router.beforeEach((to, from, next) => {
    // to 是去哪，哪个路由对象
    // from 是来自哪，是哪个路由对象 比如从  /--->/login
    // next 是函数，如果加括号执行，就会真正的过去
    // console.login('前置路由守卫',to, from, next)
    // next() 真正跳转到要去的路径
    
    if (to.name == 'login') {
        console.log('走了')
        next()
    } else {
        var res = localStorage.getItem('userinfo')
        if (res) {
            next()
        } else {
            alert('您没有登录')
            // 跳转到login--->没有解决
            // console.log(this)
            // router.push('/login')
        }
    }    
    })

7 localStorage系列

# 都是在浏览器存储数据的--》存数据有什么用？
	-登录成功 token存在本地
    -不登录加入购物车功能，迪卡侬存在了localStorage中
    -组件间通信----》 跨组件
    
# localStorage
	-永久存储，除非清空缓存，手动删除，代码删除
    -localStorage.setItem('userinfo', JSON.stringify(this.userInfo))
    -localStorage.getItem('userinfo')
    -localStorage.clear()  // 清空全部
    -localStorage.removeItem('userinfo') 
# sessionStorage
	-关闭浏览器，自动清理
    -sessionStorage.setItem('userinfo', JSON.stringify(this.userInfo))
    -sessionStorage.getItem('userinfo')
    -sessionStorage.clear()  // 清空全部
    -sessionStorage.removeItem('userinfo') 
# cookie  
	-有过期时间，到过期时间自动清理
    -借助于第三方 vue-cookies
    -cookies.set('userinfo', JSON.stringify(this.userInfo))
    -cookies.get('userinfo')
    -cookies.delete('userinfo')