vue-cli的使用

vue-cli的使用

*前提下载并安装npm(node)
1.新建文件夹;
2.安装 vue-cli （npm install -g vue-cli)
3. 版本确认 vue -V
4. 初始化 vue init webpack xxx(自己项目名）
回车 回 回 stand y n n n npm
5. cd xxx
6. npm run dev

说明
1.components 所有子组件目录

2.手动靠过来的包 最好见一个文件夹 lib

3.main.js js入口

4.index页面入口

5.app.vue 组件入口

6.router 下面的 index 是路由入口
（导入相对应的组件—import 【components 下面的组件名】 from 【components 下面的组件名】）
vue-router 重定向（redirect—路径不一样但是打开同一个组件）

在子组件中引用公共组件
1.先创建一个 单独的 xxx.vue
2.在需要使用 xxx 组件的 页面中，手动导入 xxx 组件
（import xxx from ‘@/components/xxx’）在 script中 import xxx from ‘@/components/xxx’
3.在父组件中使用 components 属性，将刚才导入的 xxx组件，注册为自己的 子组件，
4.将注册子组件时候的 注册名称 以 标签形式，在页面中引用即可
（components：{‘一个名字’：组件}）

app.vue里面 基本是 主页面
一般设置头部 中间（router-view 用transition包裹起来— 切换动画—动画抖动–底部头部来回动 overflow-x：hidden； ； 底部

动画 （一般定义两组：【开始进入v-enter，离开v-leave-to{} 定义一组 中间文字上下来回动：position：absolute）】 【进入之时v-enter-active， 离开之时 v-leave-active{}】 ）
.v-enter{
opacity: 0;
transform: translateX(100%);//右侧进入，左侧离开
}
.v-leave-to{
opacity: 0;
transform: translateX(-100%);//右侧进入，左侧离开
position: absolute;
}
在进入/离开的过渡中，会有 6 个 class 切换。

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
分页的话 用router-link to （to后面接‘’/xxx‘’，在router 地下的index里面写 理由指向

{path：‘/xxx’，component：【跟 import 进来的组件名字相对应。。。组件名字–conponents里面的】}）

moment
moment.js 可以格式化时间 （需要下载 并引入 一般全局） anzhuang npm i moment -S
配合过滤器使用格式化时间 moment(xxx).format(fangfa mingzi)
Vue.filter( ‘guolvqi mingzi’,function(xxx–管道符前面那个名字，fangfa mingzi='YYYY-MM–DD HH:mm:ss){} )

axios 传参 如果是直接/xxx传递的 用 {{$route.params.id}}