vue配置vue-router,element-ui、sass

一、vue配置vue-router,element-ui、sass

版本问题不容忽视！！！
vue创建：vue create 项目名
下载包：
npm i element-ui npm install sass-loader -D npm install node-sass -D

在vue3中上面不用在配置。在vue2中还要配置element-ui使用：
在main.js中
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

vue-router创建的时候就选，不选再加也可
npm install vue-router
注意有时候报错可能是版本问题

<style lang="scss" scoped></style>

二、vue跳转路由常用3方式

one：在src\router\index.js中配置路由，然后App.vue添加  <router-view />

two：<router-link to="/path">嘿嘿！今天又学习喽</router-link>

three: this.$router.push('/path')
four：
this.$router.replace('/path')

三、luanqibazao

①vue 
Vue里$refs用法
用法一：ref加在普通的元素上，用this.$refs.name获取到的是dom元素
用法二：ref加在组件上，用this.$refs.name获取到的是组件实例，可以使用组价的所有方法
$parent用法
通过this.$parent可以访问到当前组件的父组件里所有的数据以及方法

ref和parent

$refs 的使用方法就是在元素或组件标签上添加ref属性指定一个引用信息，引用信息将会注册在父组件的$refs对象上，在js中使用$refs来指向DOM元素或组件实例；

ref parent children

使用this.$refs.paramsName能更快的获取操作子组件属性值或函数
我们可以使用$children[i].paramsName 来获取某个子组件的属性值或函数，$children返回的是一个子组件数组
当使用v-for的元素或组件，引用信息$refs将是包含DOM节点的或组件实例的数组，类似$children的使用；
注意 $refs不能在created生命周期中使用 因为在组件创建时候 该ref还没有绑定元素
它是非响应的，所以应该避免在模板或计算属性中使用 $refs ,它仅仅是一个直接操作子组件的应急方案

对于图片上下折叠效果

点击触发事件：收缩的高度
:style="{ height: isOpen ? '900px' : '200px' }"

@click="isOpen = !isOpen" :style="{ transform: isOpen ? 'rotate(-180deg)' : 'rotate(0deg)' }"

 v-for="item in tools" :key="item"配合使用

<img :src="img" alt />引用图片，要在vue data中定义
img: img

flex布局

学前端这个有点重要哦！
可以在父元素中定义子元素排序方式
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: raw;
flex-wrap: nowrap;

妙妙的！！！hei