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 //生产环境打包

      1. GUI创建 ,和标准命令形式创建的项目完全一样的。
    • 创建: vue ui 图形化创建,根据提示点击就可以。

  • cli2

    1. 标准形式

      • 创建: vue init webpack 项目名称
    • cd 项目名
      - npm run dev 运行
    1. 简易形式,一般用于单个案例使用

      • 创建: 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 【添加默认样式】
    • 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'])
       
        }
        
        
      }
      

你可能感兴趣的:(学习笔记)