vue高级[vue-cli][vue-router][vuex]

Vue高级

vue-cli 脚手架

• cli是vue提供的一个用来快速构建项目环境的一个工具，底层使用的是webpack，webpack底层使用的是node.js。有cli2和cli3两个版本

• 安装

  1. 如何让一台电脑既可以使用vue-cli 2 也 可以使用 2以上版本？

     • cnpm/npm i @vue/cli @vue/cli-init -g 全局安装。@vue/cli 表示 2以上版本，@vue/cli-init 调节工具，可以让2以上版本也可以构建2版本的项目。

  2. vue -V 查看cli版本号

  3. vue 查看是否安装成功，有东西输出表示安装成功。

     npm vue dev

• 项目创建

  • cli2以上

    1. 标准形式：

  • 创建： vue create 项目名

    • 进入：cd 项目名

  • 项目启动： npm run serve //开发环境启动。 npm run build //生产环境打包

    2. GUI创建 ，和标准命令形式创建的项目完全一样的。

  • 创建： vue ui 图形化创建，根据提示点击就可以。

• cli2

  1. 标准形式

     • 创建： vue init webpack 项目名称
  • cd 项目名
    - npm run dev 运行
  • ​

  2. 简易形式，一般用于单个案例使用

     • 创建： vue init webpack-simple 项目名称

       • cd 项目名称
       • npm install
       • npm run dev 运行

       ​

• cli2 和cli2以上版本比较

  • 2版本比2以上版本多了两个文件夹：build（webpack配置文件）,config（项目脚本执行文件） 目录
  • 2以上版本将这两个文件夹放到了mode_modules/@vue/cli-service中
  • 2以上性能更好，插件更丰富

---

vue-cli 构建项目步骤

• 创建项目webapp

• 修改配置文件，新建文件 vue.config.js

  1. 设置项目启动时，自动打开网页
  2. 反向代理，实现跨域
  3. 路径别名

const path = require('path')

module.exports = {
  lintOnSave: process.env.NODE_ENV !== 'production',//禁用 eslint-loader
   //设置路径别名
  chainWebpack: config => {
    config.resolve.alias
      .set('@', path.join(__dirname, './src'))
      .set('assets', path.join(__dirname, './src/assets'))
      .set('components'.path.join(__dirname, './src/components'))
  },
  devServer: {
    open: true, //项目启动时，自动打开网页
    proxy: {
       //标识符 ajax ： 选取域名后的第一个路径作为标识符
      'ajax': { 
        //target: 目标源 ， 选择 协议 + 域名，会自动替换
        target: 'http://m.maoyan.com',
        changeOrigin: true
      }
    }
  }
}

• src文件夹下新建文件夹

  • layout 文件夹 ，

    1. index.vue 项目的布局外壳。

  • mock 文件夹 存放模拟数据文件。

  • router 文件夹 存放路由配置。

  • store 文件夹 存放状态管理 vuex 的配置文件。

  • utils 文件夹 存放项目公共封装库，比如封装的数据请求js文件。

  • views /pages文件夹 存放路由路径对应的组件。

• 原有文件说明

  • public 文件夹
  1. 引入 font-awesome 是一个icon图标库

  • assets文件夹，存放自定义的css，js文件和图片

    1. 添加 stylesheets 文件夹
       1. reset.css 【添加默认样式】
    2. –
    3. –

  • components 文件夹，在此文件夹中定义需要的组件

      //Tab.vue表示一个组件文件，组件构成格式：
    <template>
           //组件模板
       </template>
          
       <script>
          export default{
           data(){},
           
          }
       </script>
       
       //lang是语言，sass,less,stylus等
       //scoped:给样式设置独立作用域，最后每个组件都加。
       <style lang="less" scoped>
       @import 'url'; //引入其他的less或css文件。
       
       
       </style>
    

  • App.vue 文件 最大的组件 ，components文件夹中定义的小组件引入到layout文件夹的布局外壳中，布局外壳组件引入到此文件中

  • main.js 项目入口文件，最先执行的文件，其他文件都依赖这个文件执行.

    // 所有要用的外部js文件（放在utils文件夹中的）都需要引入
    //引入项目自适应文件 rem.js 
    
    import './utils/rem.js' // 直接执行
    

  ---

• .eslintrc.js //注释掉此文件中的 @vue/standard ，可以禁用Eslint语法规范。

• 路由表打造 放在route文件夹中

  • 创建路由模块

    //引入模块
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import routerTable from './routes'   //1.引入自定义路由表
    
    Vue.use(VueRouter)  //2.安装插件
    
    //3. 创建路由表
    
    //4.创建路由模块
    const router=new VueRouter({
        mode:'history',  //选择vue路由模式为history
        routes:routerTable //配置路由表
    })
    
    export default router   //导出
    

  • 创建路由表

    //路由懒加载
    const Film = () => import(/* webpackChunkName: "group-maoyan" */ '../views/film/index.vue')
    
    const routeTable=[
       {
       path:'' , //路径
       components:'' , //组件名
       meta:{ include:"组件名"}  //元信息
       name:'', //路由名
       children:[  //子路由
           {
             path:'' , //路径
             components:'' , //组件名
             ...
           },
           {}
         
        ]
     }
    ]
    

• 路由组件 放在views文件夹中

项目中配置组件库

• Vue组件库【流行】
  • pc端：element-ui , iview
  • 移动端： Mint-ui, Vant
  • 配置过程查看网站文档

---

• 组件按需引入
  • npm i miunt-ui -D
  • yarn add
  • yarn add axios

vue路由的模式

• hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。 #/home

• history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】 /home

• abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。【 这个模式不常用 】

• hash/history 常用于浏览器端，abstract用于服务端

• 使用：

  //需要安装和引入
  $ yarn add vue-router   //安装
  
  
  //***********************************************
  //在router文件夹中创建文件index.js，创建路由模块
  // 1. 引入所需要模块
  import Vue from 'vue'
  import VueRouter from 'vue-router'
  import routerTable from './routes'
  // 2. 安装插件
  Vue.use( VueRouter )
  
  // // 3. 创建路由表
  // const routerTable = []
  
  
  // 4. 创建路由模块
  
  // const router = new VueRouter( options )
  const router = new VueRouter({
    mode: 'history',// 需要后端配置 
    routes: routerTable // 配置路由表
  })
  export default router 
  //******************************************
  
  
  //%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
  //创建路由表routes.js
  
  //路由懒加载
  const Recommend = () => import(/* webpackChunkName: "group-maoyan" */ '../views/film/index.vue')
  
  
  const routeTable=[
   {
      path: '/recommend',  //路径
      component: Recommend,  //组件名
      meta: {
        include: 'Recommend'   //元信息，添加后组件运行在后台，不显示在控制台vue中
      },
       children:[   //子路由
           {
                 path:'Hot',
                 component:Hot,
                 name:'Hot', //给路由取名，组件中可以用name来访问
                 meta:{
                  include:'Hot'
                 }
             }, 
       ]
       
    },
    {  //动态路由
      path:'/lists/classify_list/:id',// 动态路由组件的配置
      component:ClassList,
      name:"ClassList",
      meta:{
          include:"ClassList"
      }
     },  
    
    
  ]
  
  export default routeTable
  //%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
  
  
  
  //main.js中需要引入和注入路由
  import router from './router'  //引入路由模块
  
  new Vue({
    router:router, //为全局注入路由，我们会得到两个属性 $router  $route
    render: h => h(App),
  }).$mount('#app')
  
  

  //配置好子路由后，要在对应的一级路由组件中写子路由展示区
   <!-- 子级路由展示区 -->
      <keep-alive
       :include="$route.meta.include"
      >
          <router-view></router-view>
  
      </keep-alive>
  

动态路由，路由传参，路由接参

• $route 。

  //将要传递的参数写在to中，接收页面通过 $route.query接收，params中的id属性是固定的。
  //选择路由模式：如果你使用的是 hash , 那么a标签就可以了。如果是history模式，使用router-link代替a来实现页面跳转效果并传参。可以在router-link身上加一个keep-alive属性进行浏览器缓存。
  
  
  <router-link
           :to = "{
             name: 'detail',
             params: {
               id: item.id
             },
             query: { ...item }
           }"
         >
  

编程式导航

• $router

  //$router原型下有很多的方法，比如 push,replace,go,back
  //push,replace，进行页面跳转。
  //区别：push会将我们操作放入历史记录，点击浏览器返回会一层一层返回。
  //     replace不会将我们的操作放入历史记录，点击浏览器返回反回2层。
  //go 向前跳
  //back 向后跳
  this.$router.go(-1)  //返回上一级
  this.$router.push('/service')  
  this.$router.push({name,params,query})
  //push/replace的参数就是to属性的参数
  
  

• 有时候组件加 @click不会触发，要加修饰符 @click.native

​

导航守卫

• 别名： 路由钩子，路由守卫

• 作用：对路由跳转进行拦截

• 类型：

  • 全局导航守卫：对整个项目做控制

  • 路由独享守卫：对单个路由的路由配置做控制，写在路由表中

  • 组件内守卫：对组件对应的路由做控制

    • 组件前置守卫：拦截组件的进入，在组件创建前执行，这时还没有组件，没有this。

      beforeRouterEnter(to,from,next){
         
      }
      
      
      //数据预载
      next(vm => { //vm指的就是组件
        const result =       JSON.parse(res.data.slice(7,-1)).rp_result.categorys
         vm.$set(vm.category,'categorys',result)
         })
      

    • 组件后置守卫：

      beforeRouterLeave(to,from,next){}
      

    • 组件更新守卫：专用于 动态路由

• 使用：

  • 全局导航守卫：

    1. 全局前置守卫 ：router.beforeEach(fn)

       //fn有3个参数 : to【目标路由】，from【当前路由】,next【是否拦截，】
       //使用场景：后台管理系统，社区app,做登录拦截
       
       router.beforeEach(( to,from,next ) => {
                    console.log("西阁: to", to)
                      console.log("西阁: from", from)
                    // console.log("西阁: next", next)
                      // next( false )  
                    // next() == next( true )
                      // next( true )
       
                      if ( to.path == '/home/hot' ) {
                         next()
                      }
       
                      const token = getCookie(' _token')
                      console.log('token',token)
       
                      if ( token || to.path == '/login') {
                         next()
                      } else {
                         next('/login')
                      }
       

    2. 全局后置守卫: router.beforeResolve(fn)

       //没有拦截这一个功能，只有提示功能,建议不用.
       

    3. 全局更新守卫，【可忽略，用法和前置守卫一样】。不同点：更新守卫会遍历完整路由表后进行页面跳转，有一个不同就不跳转。前置守卫只要找到要跳转的页面就直接跳转，不继续遍历路由表。

    //
    

vue 动画效果

• 安装： yarn add animate.css

• 在动画组件/元素外层 加Vue 内置组件 transition

   <!-- 二级路由展示区域 -->
      <keep-alive
        :include="$route.meta.include"
      >
        <transition
          mode = "out-in"
          enter-active-class="animated slideInLeft"
          leave-active-class="animated slideOutLeft"
        >
          <router-view></router-view>
        </transition>
      </keep-alive>
  

---

VueX -vue的状态管理

• vuex称为vue的状态管理工具，也是多组件状态共享的工具。用一条数据去控制一个视图，这个数据就称之为状态。

• vuex的好处：

  • 项目中数据集中管理，方便将来的维护和更新。
  • 项目中 数据 的使用，需要流程，vuex提供了这个流程【 vuex要想管 状态 ， 需要流程 】
  • 它还可以分担MVVM中VM的逻辑功能。

• 使用场景：中大型应用开发。数据交互频繁。用户交互频繁。

• vuex开发流程

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NpHTLzcw-1578271314063)(C:\Users\17977\Desktop\vuex.png)]

  • State：用来存储数据
  • Action:用来创建动作和发送动作，与后端有关的比如请求后端数据也写在这里。有的人会省略这个步骤。
  • Mutations: 用来定义修改数据的方法，

• vuex操作流程

  • 插件，需要安装 yarn add vuex。

  • vuex简易版使用，用于单个案例，公司不常用。

    //在store文件夹中定义index.js
    
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    import {       //引入定义的常量
        INCREMENT,
        DECREMENT
    } from './actionType'
    
    Vue.use(Vuex)
    
    //创建store模块
    const store=new Vuex.Store({
        //state存放数据
        state:{
           count:0
        },
    
        //action用来放方法
        actions:{
           //定义一个增加方法increment
           increment(store,payload){
              //参数:store 实例。payload负载，就是组件视图传来的数据，可有可无
    
              //创建动作
              const action={
                  type:INCREMENT, //type表示的是组件完成什么类型的动作，
                  payload
              }
              store.commit(action)  //将创建的action动作发送给mutations
           },
           
    
           //定义一个减方法decrement
           decrement(store,payload){
              
              //创建并发送动作
              store.commit({
                  type:DECREMENT,
                    payload
              })
            }
        },
    
        //mutations中存放修改state 数据的方法
        mutations:{
            
            //函数名对应的是actions中的INCREMENT动作类型
            //上面是变量，此处是函数，加一个[]
            [INCREMENT](state,action){
                //参数：state是实例state,是一个对象。action就是actions中创建的动作，是一个对象
                //此处进行修改数据
                console.log('state',state)
                console.log('action',action)
                state.count+=action.payload
            },
    
    
    
            //
            [DECREMENT](state,action){
                 state.count-=action.payload
            }
        }
    })
    export default store
    
    

     需要在mian.js文件中全局注入vuex才能使用

    //在组件中使用vuex
    <script>
     export default {
       computed: {
         count () { 
           //使用this.$store.state可以获取vuex中state定义的数据
           return this.$store.state.count 
         }
       },
       mounted () {
         console.log( this.$store )
       },
       methods: {
         add () {
           // 这里面触发actions中的方法
           // this.$store.dispatch( vuex中actions里面方法的名称 )
           this.$store.dispatch( 'increment',10 )
         },
         jian () {
           this.$store.dispatch( 'decrement' )
         }
       }
     }
    </script>
    

  ---

  ---

  • vuex-数据分片写法，把store.js文件放在view文件夹中，再在store文件夹中引用

    //view中的store.js文件
    const ADD_TODOS="ADD_TODOS"
    
    export default{
       state:{
         todos:[
           {
             id:1,
             task:''
            }
         ]
       },
       
       actions:{
          
       },
       
       mutations:{
          
       }
    }
    
    
    //store文件夹 index.js文件
    import Vuex from 'vuex'
    import Vue from 'vue'
    import  recommendStore from './views/recommend/store.js'
    Vue.use(Vuex)
    const store=new Vuex.Store({
       modules:{
          recommendStore
       }
    })
    
    export default store
    

    //vuex提供了3个辅助工具，可以帮助简化在组件中使用的操作
    import { mapState,mapActions } from 'vuex'
    
    computed:{
     //使用this.$store.state可以获取vuex中state定义的数据可以简化为：
      ...mapState({
      todos:state=>state.recommendState.todos,
        //其他数据。。。。
      }),
      
      methods:{
        //执行actions中的方法可以简化为：
        ...mapActions(['addTodo','delTodo'])
     
      }
      
      
    }
    

  ---