vue安装

安装
npm i @vue/cli -g
卸载
npm uninstall @vue/cli -g
检测
vue -V

yarn安装

安装
npm i yarn -g
卸载
npm uninstall yarn -g
检测
yarn -v
命令
yarn                 下载所有依赖
yarn add xxx@2.0.1   下载指定依赖
yarn remove xxx

vue2创建项目

vue create xxx

devDependencies和dependencies的区别

生产环境：production  项目开发完 上线了
开发环境：development  开发项目
devDependencies  存放的依赖模块 只有在开发环境下使用less sass 打包时不需要打包 -D -dev
dependencies  存放的依赖模块 在生产环境和开发环境都需要vue，vuex，elementUI需要打包

路由配置

vue add router

• vue.js暴露的一个install方法，该方法的第一个参数是Vue构造器，第二个参数是可选的选项对象用于传入插件的配置

Vue.use(VueRouter)
提供了两个组件 
router-link(路由跳转)
router-view(路由出口)

创建路由规则

地址栏上的地址和路由规则进行匹配，匹配成功把component引入的组件，映射到router-view组件上
const routes = {
  {
    path:'/',
    name:'home',
    component:()=>import('../views/home.vue')
  }
}

路由懒加载

匹配到路由时，才去引入
懒加载本质是延迟加载或按需加载，可以将页面进行划分，需要的时候加载，分担加载压力，减少首页加载用时，首页不用设置懒加载。
一个页面加载过后再次访问不会重复加载
常用于  component:()=>import('../')

地址栏上的地址和路由规则匹配不到，匹配所有的路由，显示404页面
{
  path:'*',  //匹配所有
  name:'notFound',
  component:()=>import('../views/NotFound.vue')
}

创建路由对象

const router = new VueRouter({ routes })

导出路由对象

• 遵循ES6模块化，前后端都可以使用
• import 引入
• export 按需导出--{} export default 默认导出

export default router

路由传参

query

index?id=23&name=zs
路由配置（不需要配置）
{
 path:'/detail',
 name:'detail',
 component:()=>import('../views/detail.vue')
}
页面中参数的传递
第一种方式：
<router-link :to="'/detail?id='+item.id"><router-link>
第二种方式：
点击事件goToDetail(item.id)
methods:{
 goToDetail(id){
   this.$router.push('/detail?id='+id)
   this.$router.push({path:'/detail',query:{id}}) //注意：query是path，params是name
 }
}
this.$route 是一个当前路由对象，有完整路径，name，query，params等

参数的接收
data中定义一个全局id
mounted中进行接收
this.id = this.$route.query.id

• this.$route

params 动态路由

路由配置(需要配置)
{
 path:'/detail/:id',
 name:'detail',
 component:()=>import('../views/detail.vue')
}

页面中参数的传递
第一种方式：
<router-link :to="'/detail/'+item.id"><router-link>
第二种方式：
点击事件 goToDetail(item.id)
methods:{
  goToDetail(id){
    this.$router.push('/detail/'+id)
    this.$router.push({name:'detail',params:{id}})   //注意：query是path，params是name
  }
}
参数的接收
data中定义一个全局id
mounted中进行接收
this.id = this.$route.params.id

第二种不需要动态配置路由
但是这种地址栏中没有参数，并且刷新数据会丢失，配合本地存储使用

声明式导航通过router-link跳转
编程式导航通过this.$router.push()跳转

query和params的区别

• 写法不同

   query的语法用于path编写传参地址
   params的语法用于name编写传参地址

• 接收参数的方式不同

   query通过this.$route.query接收
   params通过this.$route.params接收

问题：

• vue中this指向？
  当前vue实例
• this.$route是什么？
  是当前路由对象，有完整路径，name，params等
• vue中如何定义全局变量？
  在data中定义全局变量
• 面试题：get和post的区别是什么？
• 面试题：axios和ajax的区别？ axios的特性