Vue-cli混入/elementUI的使用/vue-router/Vuex

混入、elementUI的使用、vue-router、Vuex

一、Vue项目改成比较纯净的状态及props其他使用

1.Vue项目改成纯净的项目

依赖指的就是node-moudels目录，别人转的文件里没有该目录，因此我们需要安装依赖，

cnpm install

在router 的index.js 中删除about的路由
最后，还有需要删除所有小组件和about页面组件
需要留App.vue的部分代码，具体如下
tip：新建Vue组件飘红之类的如果你觉得烦那就去项目文件把git文件删掉

2.props的其他使用

# 方式一：使用数组 
props:['name']

#方式二：使用对象
 props: {name: Number}

# 方式三：使用对象，默认值和必填
  props: {
    name: {
      type: String, //类型
      required: true, //必要性
      default: 'mire' //默认值
    }
  }

二、混入(mixin

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

src目录下 新建目录mixin包 定义混入对象
1. 在该目录下新建index.js文件
   写如下代码(代码一些组件会用到的一些配置，比如data、methods

export const mire = {
    methods: {
        showName({
            alert(this.name;
        },
    },
    mounted({
        console.log("hello";
    },
}

1. 混入的局部使用(只在当前组件中使用

import {mire} from '@/mixin'
# 配置项
mixins: [mire]

1. 混入的全局使用(所有组件中使用

import {lqz} from '@/mixin'
Vue.mixin(lqz

1. 之后在组件中直接使用即可

三、elementUI的使用讲解

在Vue上，CSS样式，用的最多的就是elementUI(PC端用elementUI用的较多，但是还有其他的前端样式如下面

elementUI 为Vue2使用
1. elementUI-plus 为Vue3使用
2. vant 支持Vue2和Vue3(移动端vant用的较多
3. Iview做后台管理用的较多(PC端用的较多

npm i element-ui -S

2.在项目中配置完整引入(在main.js中粘贴以下代码

import ETementuI from 'element-ui';
import 'element-ui/1ib/theme-chalk/index.css';

3.在自己项目组件中使用不是直接复制粘贴，也要有能力修改

使用原则其实很简单 甚至学都不用学 
拷贝的时候 注意三个事项即可
·拷贝html代码注意绑定的事件以及数据
·代码对应的事件对应methods、数据对应data
·还有注意也没有CSS，如果有那么配好对应的

所有你想要的都在以下官方网站，里面讲的好比保姆级教程
https://element.eleme.cn/#/zh-CN

四、localstorage、sessionstorage、cookie

localstorage(本地存储永久存储，除非清空缓存，手动删除，代码删除

localStorage.setItem('userinfo', JSON.stringify(this.userInfo
localStorage.getItem('userinfo'
localStorage.clear(  # 清空全部
localStorage.removeItem('userinfo' # 指定内容删除

cookie(饼干有过期时间，到过期时间自动清理 登录成功 token存在本地

sessionStorage.setItem('userinfo', JSON.stringify(this.userInfo
sessionStorage.getItem('userinfo'
sessionStorage.clear(  // 清空全部
sessionStorage.removeItem('userinfo' 

sessionstorage(回话关闭浏览器，自动清理

# 需要借助于第三方插件下载才能完成 (vue-cookies
cookies.set('userinfo', JSON.stringify(this.userInfo
cookies.get('userinfo'
cookies.delete('userinfo'

六、路由组件(vue-router的使用

<router-link>   跳转用
<router-view/>  替换页面组件用

1.基本使用

当我们搭建vue-cli项目是给route选项打过勾，所以咱们的项目就已经带了该插件，如果没有打钩的话现在使用需要重新下载该插件。
具体步骤是先下载=>在项目中创建route包=>写一个index.js文件=>再把代码copy过来=>最后把main.js文件也写一下

# 配置路由的跳转(跳转页面组件只需要在routes数组中写对象即可
const routes [
	{
	path: '/',
	name: 'index',
	component: Index
	},
	{
	path: '/home',
	name: 'home',
	component: Home //一定要写个home组件
	},
]

2.点击跳转路由的两种方式

# js控制
this.$router.push('路径'

# 标签控制
<router-llink to="/home">
<button>Back Home</button>
<router-llink>

3.路由跳转携带数据的两种方式

# 第一种方式
/course/?pk=1  带在路径中使用 ? 携带

/course/?pk=1 this.$route.query.pk

# 第二种方式
/course/1/     路径中分割的

router/index中路径得改
    {
       path: '/login/:id',
       name: 'login',
       component: Login
    },
this.$route.params.id

4.两种跳转方式使用对象方式

this.$router.push({
	name: 'ligin',
	query :{
		name: 'mire',
		age:18
	},
	params:{
		id:66
	}
} # 这里可以写个对象

标签形式跳转，传对象形式
<router-link :to="{name: 'login', query: {name: 'mire'}, params: {id: 666}}">
<button>点我跳转到home页面</button>
</router-link>

5.区分this.$route和区分this.$router

this.$router # new VueRouter对象，实例，可以实现路由的跳转
• this.$route # 是当前路由对象，内部有传入的参数

6.路由守卫

前置路由守卫：在进路由前执行代码
• 后置路由守卫：路由跳转走执行代码

那么如何使用路由守卫呢？在router.js中加入以下代码即可

router.beforeEach((to, from, next => {
	next(  # 当然这里面写逻辑来控制路由的跳转，这个是基本代码框架
}

七、插件

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

使用步骤

新建plugins包，包里面新建index.js文件 写一下代码

import Vue from "vue";
import axios from "axios";
export default {
	install {
		console.log('执行了插件', vue
	}
}

1. 在main.js中配置

# 使用自定义插件
import plugin from '@plugins'
vue.sue(plugin

八、Vuex插件

使用步骤

下载插件

cnpm install vuex

1. 新建store/index.js文件 写一下代码

export default new Vuex.Store({
	store:{
		# 放数据
	},
	methods: {
		# 放方法 正常是让actions中来调用
		# 组件也可以直接调用
	},
	actions: {
		# 放方法 正常组件调用
	},
}

1. 在组件中显示state

# html中：
{{this.$store.state.变量名}}

# 在js中
this.$store.state.变量名

声明：本文由用户投稿上传，本站不保证内容的真实与正确性，并且不承担相关法律责任，如有侵权请提供版权资料并联系删除！

编程笔记 » Vue-cli混入/elementUI的使用/vue-router/Vuex