搭建Vue项目以及项目的常见知识

news2024/10/7 16:16:58

前言：使用脚手架搭建vue项目，使用脚手架可以开发者能够开箱即用快速地进行应用开发而开发。

搭建

#创建一个基于 webpack 模板的新项目
vue init webpack my-project
#选择所需要的选项

如图：
在这里插入图片描述

cd my-project
npm run dev

在这里插入图片描述

访问localhost:8080
在这里插入图片描述

vue目录层级

理解vue项目的目录层级以及文件的作用十分很重要

├── build/               # Webpack 配置目录
├── dist/                # build 生成的生产环境下的项目
├── config/               # Vue基本配置文件，可以设置监听端口，打包输出等
├── node_modules/                # 依赖包，通常执行npm i会生成
├── src/                 # 源码目录（开发的项目文件都在此文件中写）
│   ├── assets/            # 放置需要经由 Webpack 处理的静态文件，通常为样式类文件，如css，sass以及一些外部的js
│   ├── components/        # 公共组件
│   ├── filters/           # 过滤器
│   ├── store/    　　　　 # 状态管理
│   ├── routes/            # 路由，此处配置项目路由
│   ├── services/          # 服务（统一管理 XHR 请求）
│   ├── utils/             # 工具类
│   ├── views/             # 路由页面组件
│   ├── App.vue             # 根组件
│   ├── main.js             # 入口文件
├── index.html         # 主页，打开网页后最先访问的页面
├── static/              # 放置无需经由 Webpack 处理的静态文件，通常放置图片类资源
├── .babelrc             # Babel 转码配置
├── .editorconfig             # 代码格式
├── .eslintignore        # （配置）ESLint 检查中需忽略的文件（夹）
├── .eslintrc            # ESLint 配置
├── .gitignore           # （配置）在上传中需被 Git 忽略的文件（夹）
├── package.json         # 本项目的配置信息，启动方式
├── package-lock.json         # 记录当前状态下实际安装的各个npm package的具体来源和版本号
├── README.md         # 项目说明

1、Vue的生命周期

vue生命周期图以及详情可以查看官方文档：Vue生命周期

Vue实例具有生命周期：beforeCreate( 创建前 )、created ( 创建后 ）、beforeMount、mounted、beforeUpdate、updated（更新后）、beforeDestroy（销毁前）、destroyed（销毁后）

beforeCreate( 创建前 )

在Vue实例创建前，el 和 data 并未初始化，无法访问methods，data，computed等上的方法和数据。

created ( 创建后 ）

实例已经创建完成之后被调用，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。挂在阶段还没有开始, $el属性目前不可见，你可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，获取computed中的计算属性，也可以发异步请求。

beforeMount

此时已经完成编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。

mounted

挂在完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。
beforeUpdate
在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程

updated（更新后）

在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用

beforeDestroy（销毁前）

在实例销毁之前调用，实例仍然完全可用，
这一步还可以用this来获取实例，
一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件

destroyed（销毁后）

在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用
生命周期内容转载至：作者：前端_周瑾 来源：简书
链接：https://www.jianshu.com/p/672e967e201c

2、Vue导入导出：import export

使用场景：一些公共的方法可以写进js中，并进行导出，在需要用到的时候将其导入即可使用

本案例：
创建后的项目为：
在这里插入图片描述

首先在static中创建一个common.js，并在common.js中定义一些公共方法

var common = {
  getFullName(firstName, secondName) {
    return firstName + secondName
  }
}

export default common

在这里插入图片描述

全局导入

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import common from "../static/js/common";

Vue.config.productionTip = false
Vue.prototype.$common = common
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在这里插入图片描述

如何使用呢？
this.$common来调用里面的方法

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      firstName:'hello',
      secondName:'world'
    }
  },
  methods:{
    getFullName(){
      return this.$common.getFullName(this.firstName,this.secondName)
    }
  }
}

在这里插入图片描述

 <h2>{{getFullName()}}</h2>

效果如下：
在这里插入图片描述

3、路由

更多知识请看官方文档：路由
原本项目中是：
在这里插入图片描述

现在可以在components文件夹中创建多一个vue组件，本案例创建Info.vue

 {
      path: '/Info',
      name: 'Info',
      component: Info
    }

在这里插入图片描述
在这里插入图片描述

效果如下：
在这里插入图片描述

路由跳转 $router

#在HelloWorld.vue中添加
   <button @click="$router.push('Info')">Info</button>

点击按钮后跳转：
在这里插入图片描述
在这里插入图片描述

又或者将跳转写成一个方法，两者效果一致：

#methods中添加方法
  goToInfo(){
      this.$router.push('Info')
    }

#添加一个按钮，绑定一个点击事件
 <button @click="goToInfo()">Info</button>

vue router 路由跳转常用的4 个方法

#1、/xx 路径名
this.$router.push（'/xx'） 
 
 
#2、路由带参数 query中放置参数
this.$router.push({         
   name:'xx1',
   query:{
	    name: 'zhangsan'，
            xx:xx      
          }
        })

获取参数：this.$route.query.xx

#3、路由带参
 
this.$router.push({
   path:'/xx2',      
   query:{
           xx:xx   
       }
})
 
#4、路由不会带查询参数，可以在route 里面的params 里查询到
this.$router.push({
   name:'xx3',    
   params:{
           xx:xx   
       }
})

获取参数：this.$route.params.xx

$router 和 $route的区别

1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。
举例：history对象

$router.push({path:‘home’});本质是向history栈中添加一个路由，在我们看来是 切换路由，但本质是在添加一个history记录

2.route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

查看route的信息

 getRouteInfo(){
      console.log(this.$route.name)
      console.log(this.$route.path)
      console.log(this.$route.query)
      console.log(this.$route.params)
    }

在这里插入图片描述

路由守卫（导航守卫）

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫

全局导航守卫
举一个场景：用户需要登陆了才可以访问系统的后台页面，不然的话不允许进行页面跳转。
在main.js中添加：

import router from './router'

#路由守卫

router.beforeEach(({name}, from, next) => {
  // 获取用户的JWT Token信息验证用户是否登陆
  if (localStorage.getItem('token')) {
    // 用户已经登陆了，如果用户在login页面
    if (name === 'Login') {
      //跳转至首页 /
      next('/');
    } else {
      next();
    }
  } else {
    if (name === 'Login') {
      next();
    } else {
      next({name: 'Login'});
    }
  }
});


new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中

每个守卫方法接收三个参数：

  • to: Route: 即将要进入的目标 路由对象

  • from: Route: 当前导航正要离开的路由

  • next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

  • next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)

  • next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。

  • next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: ‘home’ 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。

  • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

此处路由参数内容转载至：
作者： 妖色调
网址： https://www.cnblogs.com/loveyt/p/10905662.html

Axios异步请求

发送请求给服务器一般都是异步请求，在main.js中配置全局axios

import axios from 'axios'
Vue.use(VueAxios,axios)

//{config}其他配置，譬如说请求头等信息
发送Get请求：

 this.$axios.get('url',{config}).then(res => {
  //处理返回的数据结果
})

发送Post请求：

 this.$axios.post('url',data,{config}).then(res => {
  //处理返回的数据结果
})

发送Delete请求：

 this.$axios.delete('url',data,{config}).then(res => {
  //处理返回的数据结果
})

发送Put请求：

 this.$axios.put('url',data,{config}).then(res => {
  //处理返回的数据结果
})

请求拦截器interceptors

前端拦截器interceptors，作用是拦截请求
场景：每次发送请求到服务器时，都带上token验证
在main.js中添加

axios.interceptors.request.use(config=>{
//从本地localStorage获取token信息，并放置在请求头中
  if(localStorage.getItem('token')){
    config.headers.Authorization = localStorage.getItem('token')
  }
  return config;
});

过滤器filter

场景：项目中对于日期数据格式的过滤
在main.js中添加

Vue.filter('formatDate', function(value) {
  // return Moment(value).format('YYYY-MM-DD HH:mm:ss')
  return Moment(value).format('YYYY-MM-DD')
})

使用：

 <div class="time">{{ birthday | formatDate }}</div>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/679502.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

分布式数据库架构

分布式数据库架构

分布式数据库架构 1、MySQL常见架构设计 对于mysql架构&#xff0c;一定会使用到读写分离&#xff0c;在此基础上有五种常见架构设计&#xff1a;一主一从或多从、主主复制、级联复制、主主与级联复制结合。 1.1、主从复制 这种架构设计是使用的最多的。在读写分离的基础上…
阅读更多...
SpringBoot源码分析（三）：SpringBoot的事件分发机制

SpringBoot源码分析（三）：SpringBoot的事件分发机制

文章目录 通过源码明晰的几个问题Spring 中的事件Springboot 是怎么做到事件监听的另外两种注册的Listener 源码解析加载listenerSpringApplicationRunListenerEventPublishingRunListenerSimpleApplicationEventMulticaster判断 listener 是否可以接收事件Java 泛型获取 整体流…
阅读更多...
【前端｜HTML系列第1篇】HTML的基础介绍与初次尝试

【前端｜HTML系列第1篇】HTML的基础介绍与初次尝试

大家好&#xff0c;欢迎来到前端入门系列的第一篇博客。在这个系列中&#xff0c;我们将一起学习前端开发的基础知识&#xff0c;从零开始构建网页和Web应用程序。本篇博客将为大家介绍HTML&#xff08;超文本标记语言&#xff09;的基础概念和标签&#xff0c;帮助你快速入门。…
阅读更多...
Git进阶系列 | 6. 交互式Rebase

Git进阶系列 | 6. 交互式Rebase

Git是最流行的代码版本控制系统&#xff0c;这一系列文章介绍了一些Git的高阶使用方式&#xff0c;从而帮助我们可以更好的利用Git的能力。本系列一共8篇文章&#xff0c;这是第6篇。原文&#xff1a;Interactive Rebase: Clean up your Commit History[1] 交互式Rebase是Git命…
阅读更多...
数据结构：二叉树经典例题（单选题）--＞你真的掌握二叉树了吗？（第二弹）

数据结构：二叉树经典例题（单选题）--＞你真的掌握二叉树了吗？（第二弹）

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下有关二叉树的经典例题&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入门到精通 数…
阅读更多...
百度开源，一款强大的压测工具，可模拟几十亿并发场景

百度开源，一款强大的压测工具，可模拟几十亿并发场景

优点 性能强大统计信息详细使用场景丰富性能 HTTP 每秒新建连接数HTTP 吞吐HTTP 并发连接数UDP TX PPS测试环境配置统计数据开始使用 设置大页编译 DPDK编译 dperf绑定网卡启动 dperf server从客户端发送请求运行测试开源地址 dperf 是一款基于 DPDK 的 100Gbps 网络性能和负载…
阅读更多...
小白快速自建博客--halo博客

小白快速自建博客--halo博客

小白快速自建博客–halo博客 前言&#xff1a;如何快速地搭建属于个人的博客&#xff0c;以下就推荐一个可以个性化的定制属于个人的专属博客–halo博客。 Docker安装 关于docker安装&#xff0c;可以查看文章&#xff1a;Linux下安装docker Docker相关指令 docker相关指令…
阅读更多...
网络套接字基本概念

网络套接字基本概念

文章目录 1. 认识IP地址2. 认识端口号2.1 理解 "端口号" 和 "进程ID"2.2 理解源端口号和目的端口号 3. 认识TCP协议和UDP协议4. 网络字节序5. sockaddr结构 1. 认识IP地址 IP协议有两个版本&#xff0c;IPv4和IPv6。没有特殊说明的&#xff0c;默认都是指…
阅读更多...
第五章 作业（149A）【计算机系统结构】

第五章 作业（149A）【计算机系统结构】

第五章 作业【计算机系统结构】 前言推荐第五章 作业148 补充910 最后 前言 2023-6-24 10:43:46 以下内容源自《【计算机系统结构】》 仅供学习交流使用 推荐 第三章 作业&#xff08;7BF&#xff09;【计算机系统结构】 答案参考&#xff1a; https://www.docin.com/p-8…
阅读更多...
HTML 教程：学习如何构建网页||HTML 简介

HTML 教程：学习如何构建网页||HTML 简介

HTML 简介 HTML 简介 现在您可以通过如下的一个 HTML 实例来建立一个简单的 HTML 页面&#xff0c;以此来简单了解一下 HTML 的结构。 HTML 实例 <!DOCTYPE html> <html> <head> <title>页面标题(w3cschool.cn)</title> </head> <…
阅读更多...
中国电子学会2023年05月份青少年软件编程C++等级考试试卷四级真题(含答案)

中国电子学会2023年05月份青少年软件编程C++等级考试试卷四级真题(含答案)

1.怪盗基德的滑翔翼 怪盗基德是一个充满传奇色彩的怪盗&#xff0c;专门以珠宝为目标的超级盗窃犯。而他最为突出的地方&#xff0c;就是他每次都能逃脱中村警部的重重围堵&#xff0c;而这也很大程度上是多亏了他随身携带的便于操作的滑翔翼。 有一天&#xff0c;怪盗基德像…
阅读更多...
混频器【Multisim】【高频电子线路】

混频器【Multisim】【高频电子线路】

目录 一、实验目的与要求 二、实验仪器 三、实验内容与测试结果 1、测试输入输出波形&#xff0c;说明两者之间的关系 2、测试输出信号的频谱(傅里叶分析法) 3、将其中一个二极管反接&#xff0c;测试输出波形&#xff0c;并解释原因&#xff1b;将两个二极管全部反接&am…
阅读更多...
PID相关参数讲解：1、比例系数Kp与静态误差

PID相关参数讲解：1、比例系数Kp与静态误差

PID的结构与公式 来研究静态误差的同学&#xff0c;应该是对PID的原理有一定理解了&#xff0c;简单的概念也不用过多重复。 比例控制时PID控制中最简单的一个&#xff0c;很多能用代码编写PID代码的同学&#xff0c;也不一定理解这个比例系数Kp的意义&#xff0c;以及比例控制…
阅读更多...
C++进阶—多态

C++进阶—多态

目录 0. 前言 1. 多态的概念 1.1 概念 2. 多态的定义及实现 2.1多态的构成条件 2.2 虚函数 2.3虚函数的重写 2.4 C11 override 和 final 3. 抽象类 3.1 概念 3.2 接口继承和实现继承 4.多态的原理 4.1虚函数表 4.2 变态选择题分析多态调用 4.3 多态的原理 4.4 动…
阅读更多...
透过小说中的境界划分，看看你的能力处于哪个水平

透过小说中的境界划分，看看你的能力处于哪个水平

文章目录 1. 写在前面2. 散修3. 练气期4. 筑基期5. 结丹期6. 元婴期7. 化神期8. 练虚期 1. 写在前面 当我们某天开始走出校园&#xff0c;踏入社会的时候&#xff0c;是否也会感到一丝恐惧与焦虑&#xff1f;当我们各自奔走加入到江湖大大小小的门派中&#xff0c;为了企业与老…
阅读更多...
EL标签-给JSP减负

EL标签-给JSP减负

https://blog.csdn.net/weixin_42259823/article/details/85945149 安装使用 1. 通过命令行创建maven项目 2. 安装jstl包 <dependency><groupId>jstl</groupId><artifactId>jstl</artifactId><version>1.2</version> </depen…
阅读更多...
仙境传说RO：服务器外网架设登陆教程

仙境传说RO：服务器外网架设登陆教程

仙境传说RO&#xff1a;服务器外网架设登陆教程 大家好我是艾西&#xff0c;今天跟大家说一下自己编译的仙境传说RO服务端怎么开启外网让小伙伴和你一起玩。 目前开放的现成端有以下版本&#xff1a; 仙境传说ro守护永恒的爱 仙境传说ro爱如初见 仙境传说ro黑色派对 仙境…
阅读更多...
docker-compose把微服务部署到centos7

docker-compose把微服务部署到centos7

前言 这里主要记录以下微服务使用docker、docker-compose部署遇到的一些问题&#xff0c;大佬可以绕道去看看自动化集成这篇文章 部署之前你需要准备一些内容 微服务 这里feign-api是用来做服务之间相互调用的&#xff0c;单独抽离成了一个模块&#xff0c;gateway是服务网关&…
阅读更多...
中国电子学会2023年05月份青少年软件编程C++等级考试试卷三级真题(含答案)

中国电子学会2023年05月份青少年软件编程C++等级考试试卷三级真题(含答案)

1.找和为K的两个元素 在一个长度为n(n < 1000)的整数序列中&#xff0c;判断是否存在某两个元素之和为k。 【输入】 第一行输入序列的长度n和k&#xff0c;用空格分开。 第二行输入序列中的n个整数&#xff0c;用空格分开。 【输出】 如果存在某两个元素的和为k&#xff0c…
阅读更多...
CentOs中文件权限命令

CentOs中文件权限命令

文件权限&#xff1a; ls -l命令查看文件详情&#xff0c;前十位就是文件的类型和权限 第一位&#xff1a;类型&#xff1a; - 普通文件 d 目录 l 链接文件&#xff08;快捷方式&#xff09;link 2~4位&#xff1a;所有者的权限 5~7位&#xff1a;所有者所在组其它用户的权限 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023