【前端28_Vue-Cli 脚手架】萌新指南、安装脚手架、创建项目、项目目录介绍、路由重定向、路由守卫、Vuex、代码规范ESlint、常用组件:Element、Vue-Axios

本文主要是介绍【前端28_Vue-Cli 脚手架】萌新指南、安装脚手架、创建项目、项目目录介绍、路由重定向、路由守卫、Vuex、代码规范ESlint、常用组件:Element、Vue-Axios,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

注:标题加*星号,代表比较重要

文章目录

  • Vue-cli 脚手架
    • 介绍
    • 安装
    • 创建一个项目
      • 代码创建
      • 图形界面GUI创建项目
    • 项目目录介绍
    • 路由
      • 路由重定向
      • 路由守卫*
        • 全局中的守卫
        • 路由独享的守卫
        • 组件中的路由守卫
        • 完整的导航流程
    • Vuex*
      • Vuex 介绍
      • 组成
        • state
          • 定义变量
          • 使用变量
        • mutations
          • 定义方法
          • 使用方法
        • actions
          • 定义异步操作
          • 使用异步操作
        • getters
          • 定义装潢公司
          • 使用装潢公司
    • 代码规范
      • 取消函数前面带空格
    • 常用框架
      • Element ui
      • Vue-Axios

Vue-cli 脚手架

介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。
就是说我们在开发的时候,前期需要配置很多东西(网络组件,路由组件,打包组件等等),有了Vue-cli脚手架,他会帮我们集成这些功能

安装

可以通过以下命令,在命令行里敲

npm install -g @vue/cli
# OR
yarn global add @vue/cli

如果你的 node 版本太低的话也安装不成功,我当时用的是 v10.14 好像,安装失败了,然后更新到 v12.18 就可以安装了

创建一个项目

创建项目有两种方法

  1. 代码创建
  2. 图形界面GUI

代码创建

  • 找到想要创建项目的文件夹,在此文件夹下打开cmd,(按住shift + 鼠标右键),在右键菜单里打开powershell或者是git bash。(PS:如果在PowerShell中出现cannot be loaded because running scripts is disabled on this system.)问题,打开链接阅读。

  • 输入命令vue create 项目名字
    在这里插入图片描述

  • 选择安装依赖(babel 是es6转es5的工具,eslint是代码格式校验工具,默认是安装这两个依赖的,如果没选上,后期也可以选择添加的,莫慌,router是路由模块,是我自己加的,因为会用到)
    在这里插入图片描述

  • 我的配置大概是这样,这个自由性很高,没必要都一样
    在这里插入图片描述

  • 稍等几分钟,成功的话会提示你的在这里插入图片描述

图形界面GUI创建项目

  • cmd中输入命令vue ui,回车之后稍等一会,会在浏览器中弹出页面。
  • 紧接着跟着图示走就可以了,建项目的时候也会很慢,稍等即可。

在这里插入图片描述

项目目录介绍

新建好之后是如下这样的(可能有些文件不一样,莫慌)
在这里插入图片描述

  • 其中最重要的是src了,以后打代码都是在src里打
    • App.vue: 首页
    • main.js :入口文件
    • assets:静态文件
    • components:组件
    • router:路由配置

路由

在脚手架右上角会有提示,让你安装vue-router
安装完之后就会在src文件夹生成router文件,里面的js就是路由管理文件

路由重定向

  {path: '/',// 路由重定向redirect:'/Login'},

路由守卫*

啥叫路由守卫呢?

路由守卫就是当我们切换路由的时候,会触发的函数(个人理解)

  • 守卫有全局守卫,路由独享的守卫,组件中的守卫
全局中的守卫

我们来通过示例演示
在这里插入图片描述
在这里插入图片描述
在切换路由的时候会触发这些函数,其中的顺序为

  1. beforeEach
  2. beforeResolve
  3. afterEach
路由独享的守卫

路由中的守卫有beforeEnter
在这里插入图片描述
他的执行顺序如上图中的动图所示,是在全局守卫beforeEach之后,beforeResolve之前的。
在这里插入图片描述

组件中的路由守卫

在这里插入图片描述

在这里插入图片描述

可以通过上面的动图得知,进入组件中的路由顺序是,先全局,然后局部路由,然后是组件路由
离开组件的时候,先触发组件中的离开路由。
如果是在当前路由中修改了参数,就会触发beforeRouteUpdate ,在当前路由改变,但是该组件被复用时调用。下面有官方给的栗子。

// 这是官网给的
const Foo = {template: `...`,beforeRouteEnter (to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用// 不!能!获取组件实例 `this`// 因为当守卫执行前,组件实例还没被创建},beforeRouteUpdate (to, from, next) {// 在当前路由改变,但是该组件被复用时调用// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 可以访问组件实例 `this`},beforeRouteLeave (to, from, next) {// 导航离开该组件的对应路由时调用// 可以访问组件实例 `this`}
}
完整的导航流程
  1. 导航被触发。
  2. 在失活的组件里调用 beforeRouteLeave 守卫。
  3. 调用全局的 beforeEach 守卫。
  4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  5. 在路由配置里调用 beforeEnter
  6. 解析异步路由组件。
  7. 在被激活的组件里调用 beforeRouteEnter
  8. 调用全局的 beforeResolve 守卫 (2.5+)。
  9. 导航被确认。
  10. 调用全局的 afterEach 钩子。
  11. 触发 DOM 更新。
  12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

Vuex*

Vuex 介绍

我把它理解成 全局变量的管理

组成

Vuex 由以下四大部分组成

  1. state:用来存放数据
  2. mutations只有通过 motations 才能修改 state 中的数据
  3. actions:处理异步调用的事件
  4. getters:把 state 中的数据包装一下,不会修改 原 state 中的数据
state

在项目中的 src--store--index.js文件下。
作用:用来存放数据的。

定义变量

一般 state 会长成这个样子:
在这里插入图片描述

使用变量

第一种方法

<!-- mustache 表达式 -->
<p>当前count的值为:{{ $store.state.count }}</p>

第二种方法

<template><div><!-- 3. 展示使用方法> --><p>{{ showNum }}</p></div>
</template>
<script>// 1. 先在脚本中引入变量的映射,类似于从仓库中取出变量
import { mapState } from 'vuex'
export default {// 2. mapState 中放入你想使用的变量名字。// 然后再计算属性中,通过拓展运算符,展开 mapState,感觉像组件的注册一样。// 使用的时候就可以像使用计算属性那样了。computed: {...mapState(['count']),},
}
</script>
mutations

作用:用来修改 state 中的数据
优势:方便以后的维护,不然以后项目多的话就不好排查是谁改变的数据了。
注意:只有它才可以修改 state 中的变量,而且不要在这里写异步的操作

定义方法

我们需要现在store.js中定义方法

// new 创造实例,并暴露出去
export default new Vuex.Store({state: {count: 0},mutations: {add(state) {state.count++}}
})

其中每个方法的第一个参数都是 state,用来拿到 state 中的数据

使用方法

第一种方法

this.$store.commit('add')

第二种方法

<script>
// 1. 先引入 mapMutations
import { mapState, mapMutations } from 'vuex'
export default {data() {return {}},computed: {...mapState(['count']),},// 2. 然后在这里展开methods: {...mapMutations(['sub', 'subN']),}
}
</script>
actions

所有的异步操作都要写在这里
如果是修改了数据,那么还需要通过调用 mutations 中的方法
每个异步操作都有一个参数 context,第二个参数用来传参

定义异步操作
// 类似这种感觉,因为延时定时器中的回调是异步的
// 所以我们要卸载 actions 中
actions: {addAsync(context) {setTimeout(() => {// 在 actions 中,不能直接修改 state 中的数据;// 必须通过 context.commit() 触发某个 mutation 才行context.commit('add')}, 1000)},addNAsync(context, param) {// console.log(param)setTimeout(() => {context.commit('addN', param[0])}, 2000)}}
使用异步操作

第一种方法:this.$store.dispatch('异步事件名称')

addHandle3() {// 这里的 dispatch 专门用来触发某个 actionsthis.$store.dispatch('addAsync')
},

第二种方法:

<template><div><!-- <p>当前count的值为:{{ count }}</p> --><!-- 3.这样调用:当然写个点击事件然后执行,都是可以滴 --><button @click="subAsync()">-1异步(第二种引入方法)</button><button @click="subNAsync(10)">-N异步(第二种引入方法)</button></div>
</template><script>
// 1. 在这里导入 mapActions
import { mapActions } from 'vuex'
export default {data() {return {}},computed: {...mapState(['count']),...mapGetters(['showNum'])},methods: {// 2. 把异步的方法映射出来,使用 actions 的第二种方法...mapActions(['subAsync', 'subNAsync'])}
}
</script>
getters

gettersstate 中的值稍加修饰,然后return 回来,并不会改变 state中的数据
再次声明:只有 mutations 才有权力修改 state 中的数据的值。
它返回的是变量,所以跟 state 的使用方法很像,映射的话都可以映射到 computed中去

定义装潢公司
getters: {// 不会修改 store 中的数值,只是包装数据的作用showNum(status) {return `当前的count值为[${status.count}]`}}
使用装潢公司

第一种方法

<p>{{ this.$store.getters.showNum }}</p>

第二种方法

 computed: {...mapGetters(['showNum'])},

代码规范

萌新会遇到如下的错误
在这里插入图片描述
这并不是代码写错了,而是规范的问题
在这里插入图片描述

这个ESLint插件帮我们检查的,前期的规范想养成的养成,也可以关掉规范检查,如下

在这里插入图片描述

取消函数前面带空格

在根目录下找到.eslintrc.js文件
在这里插入图片描述

// 函数前面没有空格"space-before-function-paren": 0

然后从新运行下项目(不是保存,而是重新加载一遍,就是在ui中重新启动服务。)

常用框架

Element ui

首先在依赖中安装 element-ui,安装好依赖之后,在main.js中引入

快速上手在这里插入图片描述
在这里插入图片描述

Vue-Axios

axios是网络请求,原生网络请求的封装

在脚手架中添加依赖
在这里插入图片描述

  • 前台发起请求可以这样写,首先要在组件脚本开头引入axios
import axios from 'axios'

然后写逻辑代码,写链式的话会比较清晰。

// 这里的指针是为了在axios里使用组件里的参数
let _this = this;// 前台发送请求
axios.get('http://localhost:3000/register', {params: {username:this.username,psw:this.psw}
}).then(function (response) {// 提示注册成功// axios 中的this需要定向// console.log(response);if (response.data == '200'){_this.$message({message: `${_this.username}注册成功`,type: 'success'})}}).catch(function (error) {// 抓取错误console.log(error)})

这篇关于【前端28_Vue-Cli 脚手架】萌新指南、安装脚手架、创建项目、项目目录介绍、路由重定向、路由守卫、Vuex、代码规范ESlint、常用组件:Element、Vue-Axios的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/976097

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

Zookeeper安装和配置说明

一、Zookeeper的搭建方式 Zookeeper安装方式有三种,单机模式和集群模式以及伪集群模式。 ■ 单机模式:Zookeeper只运行在一台服务器上,适合测试环境; ■ 伪集群模式:就是在一台物理机上运行多个Zookeeper 实例; ■ 集群模式:Zookeeper运行于一个集群上,适合生产环境,这个计算机集群被称为一个“集合体”(ensemble) Zookeeper通过复制来实现

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

CentOS7安装配置mysql5.7 tar免安装版

一、CentOS7.4系统自带mariadb # 查看系统自带的Mariadb[root@localhost~]# rpm -qa|grep mariadbmariadb-libs-5.5.44-2.el7.centos.x86_64# 卸载系统自带的Mariadb[root@localhost ~]# rpm -e --nodeps mariadb-libs-5.5.44-2.el7

Centos7安装Mongodb4

1、下载源码包 curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-4.2.1.tgz 2、解压 放到 /usr/local/ 目录下 tar -zxvf mongodb-linux-x86_64-rhel70-4.2.1.tgzmv mongodb-linux-x86_64-rhel70-4.2.1/

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

如何用Docker运行Django项目

本章教程,介绍如何用Docker创建一个Django,并运行能够访问。 一、拉取镜像 这里我们使用python3.11版本的docker镜像 docker pull python:3.11 二、运行容器 这里我们将容器内部的8080端口,映射到宿主机的80端口上。 docker run -itd --name python311 -p

Centos7安装JDK1.8保姆版

工欲善其事,必先利其器。这句话同样适用于学习Java编程。在开始Java的学习旅程之前,我们必须首先配置好适合的开发环境。 通过事先准备好这些工具和配置,我们可以避免在学习过程中遇到因环境问题导致的代码异常或错误。一个稳定、高效的开发环境能够让我们更加专注于代码的学习和编写,提升学习效率,减少不必要的困扰和挫折感。因此,在学习Java之初,投入一些时间和精力来配置好开发环境是非常值得的。这将为我