VOLANTIS (^o^)
Vue.js学习笔记脚手架和路由

vue版本：v2.6.12 vue-cli：4.5.11

一.Vue CLI

1.介绍

  • 如果你只是简单写几个Vue的Demo程序，那么你不需要Vue CLI。
  • 如果你在开发大型项目，那么你需要，并且必然需要使用Vue CLI
    • 使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
    • 如果每个项目都要手动完成这些工作，那无疑效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。
  • CLI是什么意思？
    • CLI是Command-Line Interface，翻译为命令行界面，但是俗称脚手架。
    • Vue CLI是一个官方发布vue..js项目脚手架。
    • 使用vue-cil可以快速搭建Vue开发环境以及对应的webpack配置。

2.安装

  • 安装cli包：npm install -g @vue/cli

  • 创建项目：vue create hello-world

    • 05cfb886dc77e8d791a612f05b252ecf.png

  • 生成的项目目录结构：

    • 9b8a6992f3cc37edc5ea5c298fdde332.png
    • public目录：相当于CLI中的static目录
    • src：源代码，以后就在这写
    • .gitignore：Git忽略的文件
    • babel.config.js：ES语法转换
    • postcss.config.js：CSS相关转换

  • npm run serve 启动本地服务测试

  • 配置文件，启动配置服务器：vue ui

  • vue-cli3开始遵守零配置原则（隐藏配置文件）：

    • 配置文件去哪了：node_modules/@vue/cli-service/lib/Service.js
npm run build 打包项目 运行项目后发现路径不对问题

  • 解决办法：

    • 项目根目录创建文件：vue.config.js

    • module.exports = {
    publicPath:'./',
    configureWebpack:{
        resolve: {
            alias: {
              'assets': '@/assets',
              'common': '@/common',
              'components': '@/components',
              'network': '@/network',
              'views': '@/views',
              'plugins': '@/plugins',
            }
          }
    }
}
<!--0-->

1
2
3
4
5
6
7
8
9
    
- runtime-only
  
  - ```js
    new Vue({
        el:'#app',
        render: h => h(App)
    })
  // render -> vdom -> UI
  • 省去了模板解析变异过程，直接渲染。

二.Vue-Router

1.认识路由

  • 路由（routing） 就是通过互联的网络把信息从源地址传输到目的地址的活动

  • 生活中的路由：路由器

    • 路由和转送
    • 路由决定数据包从来源到目的地的路径
    • 转送将输入端的数据转移到合适的输出端

  • 路由表：路由表本质上是一个映射表，决定了数据包的指向

  • 后端路由

    • 早期的网站开发整个HTML页面是由服务器来渲染的
      • 服务器直接生产渲染好对应的HTML页面，返回给客户端进行展示
    • 后端路由：
      • 一个页面有自己对应的URL
      • URL发送到服务器，服务器通过正则匹配URL，交给Controller处理（php的laravel框架）
      • Controller进行各种处理，最终生成HTML或数据，返回给前端
      • 这就完成了一个IO操作
      • 不需要单独加载js和css，有利于SEO优化

  • 前端路由

    • 随着Ajax出现，有了前后端分离开发模式
    • 后端只提供API来返回数据，前端通过Ajax获取数据，并且通过JS将数据渲染到页面中
    • 有点是前后端责任清晰，后端专注数据，前端专注交互及可视化
    • 并且当移动端出现后，后端也不需要进行任何处理，依然使用之前的一套API即可
    • 目前很多网站使用这种模式开发

  • 单页面富应用

    • SPA最主要的特点就是在前后端分离的基础上加了一层前端路由
    • 也就是前端来维护一套路由规则

2.前端路由核心

  • 核心：改变URL，但不进行刷新

  • URL的hash

    • URL的hash也就是锚点（#），本质上是改变window.location的href属性
    • 我们可以通过直接赋值location.hash来改变href，但是页面不发生刷新
    • 方式：location.hash = 'aaa'

  • HTML5的history模式：pushState

    • 方式：
      • 入栈history.pushState({}, '', 'about')
      • 出栈history.back()
      • url显示栈顶的文字
    • history.go(-2)

  • HTML5的history模式：replaceState

    • 方式：
      • 替换history.replaceState({}, '', 'about')
  • ps:2020最新版的ios系统不再支持以上讲的几个函数

3.安装配置

  • 步骤一：安装vue-router

    • npm install vue-router –save

  • 步骤二：在模块化工程中使用它（因为是插件，可以通过Vue.use()来安装路由功能）

    • 第一步：导入路由对象，并且调用Vue.use(VueRouter)
    • 第二步：创建路由实例，并且传入路由映射配置
    • 第三步：在Vue实例中挂载创建的路由实例

  • 使用路由步骤：

    • 第一步：创建路由组件
    • 第二步：配置路由映射
    • 第三步：使用路由：通过<router-link>和<router-view>

  • 路径默认跳到首页(重定向)：

    • const routes = [
    {
        path: '/',
        redirect: '/home'
    },
<!--2-->
    • <div><h2>{ {$route.params.id} }</h2></html>

      1
      2
      3

      - ```html
        <router-link to="/user/123">用户</router-link>

5.路由懒加载

  • 当打包构建应用时，Javascript包会变得非常大，影响页面加载，出现空白页的情况。

  • 路由懒加载主要作用是将路由对应的组件打包成一个个的js代码块

  • 只有在这个路由被访问到的时候，才加载对应的组件

  • 代码实现：

    • const routes=[
    {
        path: '/home',
        component: () => import('../components/Home')
    }
];
<!--4-->

  • 子组件添加标签：

    • <template>
    <div>
        <h2>我是首页</h2>
        <p>首页内容</p>
        <router-link to="/home/news">新闻</router-link>丨
        <router-link to="/home/messages">消息</router-link>
        <router-view></router-view>
    </div>
</template>

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13

      ### 4.参数传递

      - 传递参数主要有两种类型：params和query

      - params的类型：

        - 配置路由格式：/router/:id

        - 传递的方式：在path后面跟上对应的值

          - ```html
            <router-link :to="'/User/'+userId">User</router-link>|

    • 取值

      • <h2>{ {$route.params.userId} }</h2>

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11

          - 传递后形成的路径：/router/123，/router/abc

        - query类型：

          - 配置路由格式：/router，也就是普通配置

          - 传递方式：对象中使用query的key作为传递方式

            - ```html
              <router-link :to="{path: '/profile',query:{name:'xiaoming',age:18} }">Profile</router-link>

    • 取值：

      • <h2>{ {$route.query.name} }</h2>
<h2>{ {$route.query.age} }</h2

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17

          - 传递后形成的路径：/router?id=123，/router?id=abc

        ### 5.全局导航守卫

        - 切换不同页面时动态修改页面title

        - 使用前置钩子

        - index.js文件添加：

          - ```js
            router.beforeEach((to,from,next)=>{
            	//从from跳转到to
            	document.title=to.matched[0].name
            	next()
            })

    • 根据路由的name属性改变对应的页面title

补充：非全局守卫

  • 路由独享守卫

    • 路由配置上直接定义

    • const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})
<!--8-->

  • 登陆验证

  • ```js
    router.beforeEach((to, from, next) => {
    if (to.name !== ‘Login’ && !isAuthenticated) next({ name: ‘Login’ })
    // 如果用户未能验证身份，则 next 会被调用两次
    next()
    })

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    ### 6.keep-alive

    - router-view 也是一个组件，如果直接被包在keep-alive里面，所有路径匹配到的视图组件都会被缓存

    - keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染

      - 属性 include - 字符串或正则表达式（路由name属性），匹配的组件会被缓存
      - 属性 exclude - 字符串或正则表达式，匹配的不会被缓存

    - ```html
      <keep-alive exclude="Profile,User"><router-view></router-view></keep-alive>

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：https://1940879828.github.io/posts/7f82d43d.html

评论