- 博客(30)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 项目分析五
一、封装单独的树操作栏组件//封装单独的树操作栏组件:src/views/departments/components/tree-tools.vue<template> <el-row type="flex" justify="space-between" align="middle" style="height: 40px;width: 100%"> <el-col> <!-- 名称应该变成 对应的节点中的name -->
2022-03-28 19:48:57
1260
原创 项目分析四
一、实现组织架构的头部内容<!-- 实现页面的基本布局 --> <el-card class="tree-card"> <!-- 用了一个行列布局 --> <el-row type="flex" justify="space-between" align="middle" style="height: 40px"> <el-col> <span>
2022-03-27 19:20:11
898
原创 项目分析三
一、路由页面整理// 在src/router/index.js中删除多余的静态路由，后续再慢慢添加import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)import Layout from '@/layout'export const constantRoutes = [ { path: '/login', component: () => import('@/views/logi
2022-03-25 19:30:49
837
原创 项目分析二
一、登录表单的校验修改placeholder占位符<el-input ref="mobile" v-model="loginForm.mobile" placeholder="请输入手机号" name="mobile" type="text" tabindex="1" auto-complete="off" /><el-in
2022-03-24 20:39:41
434
原创 项目分析一
一、初始化cd Desktop // 切换到桌面mkdir 项目名 // 创建文件夹cd 项目名 //切换到这个项目名文件git init // 创建仓库git pull 地址 master // 拉到某个地址的master分支的代码code ./ // 进入项目// 打开项目以后，就可以关闭终端二、运行项目npm install // 安装依赖npm run dev // 运行项目三、修改拉下的文件内容1.删除main.js中跟mock
2022-03-23 18:03:52
1018
原创 Element
一、Element的介绍前端出品的基于 Vue.js的 后台组件库 方便程序员进行页面快速布局和构建 安装：npm i element-ui -S二、对Element注册// 在main.js中对ElementUI进行注册import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);三、Element的使用<template>
2022-03-21 20:05:59
1721
原创 VUEX的基础
一、vuex是基本概念概念：是一个专为 Vue.js 应用程序开发的状态管理模式； 作用：vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题； 注意： 修改state状态必须通过mutations mutations只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行 执行异步代码，要通过actions，然后将数据提交给mutations才可以完成 state的状态即共享数据可以在组件中引用 组件.
2022-03-19 19:29:01
202
原创 项目分析九
一、修改头像——实现图片预览功能// 增加一个文件选择标签，让头像行点击触发文件选择器的点击事件,在src/views/user-profile/index.vue中<input type="file" hidden ref="file" @change="onFileChange" ><!-- 个人信息 --><van-cell class="photo-cell" title="头像" is-link center
2022-03-18 20:28:20
334
原创 项目分析八
一、发布文章评论// 准备弹出层:在article/index.vue中准备弹出层，使用弹出层组件Popupdata(){ return{ //其他变量... isPostShow:false // 发布评论弹层控制 }}// 使用弹层组件<!-------- 发布评论 -------------><van-popup v-model="isPostShow" position="bottom"> 测试内容<
2022-03-17 20:01:49
371
原创 项目分析七
一、文章详情——关注用户1.思路：给按钮绑定点击事件在事件处理函数中：如果已关注，则取消关注如果没有关注，则添加关注<van-button v-if="article.is_followed" class="follow-btn" round size="small">已关注</van-button><van-button v-else class="follow-btn" type="info"
2022-03-15 19:10:50
1422
原创 项目分析六
一、文章详情——创建组件并配置路由// 1.创建文件，src/views/article/index.vue<template> <div class="article-container">文章详情</div></template><script>export default { name: 'ArticleIndex', components: {}, props: { // 使用props解耦获得了的动
2022-03-14 20:58:45
1027
原创 项目分析五
一、首页-频道编辑——数据持久化// 1.封装添加请求的方法，在src/api/channel.js中export const addUserChannel = channels => { return request({ method: 'PATCH', url: '/v1_0/user/channels', data: { channels: [channels] } })}// 2.在src/views/home/com...
2022-03-13 19:51:15
1317
原创 项目汇总四
一、首页-频道编辑——弹出层<template> <div class="home-container"> <!-- 导航栏 -->.....<!-- /导航栏 --> <van-tabs class="channel-tabs" v-model="active" swipeable animated border> ..... <!-- 右侧自定义内容 --> <!-- 占位元素 --&g
2022-03-11 19:25:41
1288
原创 项目分析三
今天主要写的是关于首页——文章列表的渲染一、文章列表——首页导航栏：使用组件搭建框，然后再渲染样式// 在src/wiews/home/index.vue<template> <div class="home-container"> <!-- 导航栏 --> // 1. 使用组件搭建 <van-nav-bar class="page-nav-bar" fixed> <van-button
2022-03-10 19:22:15
478
原创 项目分析二
一、表单增加验让规则 在vant组件库中找到Form表单验证规则 :rules="[{ validator: asyncValidator, message: '请输入正确内容' }]"可以对其进行封闭，方便管理使用data() { return { ...... userForRules: { mobile: [ { required: true, message: "手
2022-03-08 20:35:25
859
原创 项目知识汇总一
一、git回顾查看文件状态：git status 提交文件：git add . 提交到仓库：git commit -m '对这次进行描述' 提交到gitee仓库：git push二、vant组件库使用导入方式分为三种：自动按需导入； 手动按需导入（不推荐使用，比较麻烦）； 一次导入所有的包（会增加代码包的体积，在这次项目中使用到了）； 通过cdn引入（不推荐在模块化系统中使用）安装(暂时指定版本使用）：yarn add vant@2.12.44 加载注册vant组件： imp
2022-03-07 21:26:42
293
原创 Vuex的基本概念
一、vuex初识概念：是状态管理器 优点：数据的更新是响应的 作用：是在vue项目中管理数据 地址：http://v3.vues.vuejs.org/zh/ 使用vuex的原因：组件的通讯是很复杂的，方便进行组件通讯二、使用安装(要指定的版本)：yarn add vuex@3.6.2 | npm i vuex@3.6.2 创建配置store store/index.js// 在src下面创建文件夹store,store文件夹创建index.js文件，文件内容如下：...
2022-03-05 20:30:58
299
原创 路由、Vant组件库
一、路由的概念 前端路由：路径和组件的映射关系。 路由作用：实现业务场景切换。 单页面应用：所有的业务都在一个页面中编写，有一个html 单页面应用优点： 整体不刷新页面，用户体验更好。 数据传递容易，开发效率高 单页面应用缺点： 开发成本高 首次加载会比较慢一点。不利于seo 单页面应用想要切换场景需要依赖路由。 二、使用路由 实现路由：vue-router（暂时安装3.5.1
2022-03-03 18:59:15
1287
原创 Vue-组件进阶和自定义指令
一、动态组件可以让多个组件进行切换，同时只会显示一个组件 <component :is="自定义"></component> 特征：显示某个组件，这个给件会创建，如果某个给件不显示了，这个给件会销毁二、keep-alive可以让组件被缓存，不被销毁<div style="border: 1px solid red;"> <!-- Vue内置keep-alive组件, 把包起来的组件缓存起来 --> <keep-aliv.
2022-03-01 19:59:18
571
原创 Vue汇总
一、axios使用axios的好处：可以返回一个Promise实例，支持服务端和客户端。 安装：yarn add axios 导入：import axios from 'axios' 使用 axios({ method: '请求方式', // get post url: '请求地址', data: { // 拼接到请求体的参数, post请求的参数 xxx: xxx, }, params: { // 拼接到请求行的参数, get请求的参数 xxx:
2022-02-28 19:57:03
319
原创 vue小结
一、vue过滤器filters:{过滤器名字: (值){return 处理后的值}}二、vue计算属性-computedcomputed: { "计算属性名" () { return "值" } }三、vue侦听器-watchwatch: { 变量名 (newVal, oldVal){ // 变量名对应值改变这里自动触发 } }四、vue侦听器-深度侦听和立即执行watch: { "要侦听的属性名": { immediate: true, // 立即执行（可选） de..
2022-02-27 16:18:19
76
原创 Vue第三天
一、vue计算属性-computed 计算属性使用场景：当变量的值，需要通过别人计算而得来时 语法：computed: { "计算属性名" () { return "值" } } 注意点：计算属性和data属性都是变量，不能重名；函数内使用的变量改变，重新计算结果返回 <template> <div> <h1>{{ num }}</h1> </div></template><s
2022-02-25 21:00:02
260
原创 学习Vue的第二天
一、Vue的指令—— v-text作用：解析文本 语法：v-text="vue的数据变量"<template> <div> <p v-text="str"></p> </div></template><script>export default { data () { return { str:'<span>我是一个span标签</span>'
2022-02-24 20:06:49
317
原创 学习vue的第一天
一、Vue概述 vue是一个渐进式的js框架 开发vue有两种方式： 传统的开发，通过html页面引入vue webpack工程化开发 二、创建项目： 当安装vue后，通过命令 vue -V ，看是否出现版本号，如果出现了就表示已安装完成 执行 vue create 文件名 命令，创建项目 当出上图情况，就表示创建成功 再切换到刚刚创建好的项目上：cd 文件名 更新本地服务器：yarn serve 三、
2022-02-22 20:41:23
331
原创 webpack
webpack一、webpack是什么： 它的本质是一个第三方的包，用于打包压缩。 二、webpack的作用： 压缩了代码，减少了文件，加快了浏览器加载的速度。 三、webpack环境准备： 初始化webpack包环境：yarn init 安装webpack包：yarn add webpack webpack-cli -D 在package.json文件中配置："scripts"{"build":"webpack"} 四、webpack入口和出口：
2022-02-21 21:07:22
137
原创 Node.js
一、node.js是什么？node.js是一个基于 Chrome V8引擎的 JS 运行环境。二、终端中的快捷键（六个）。上箭头 ↑ ，可以快速定位上一次执行的命令，可以连续按，一直往上找。 tab 键，可以快速补全剩下的路径。 esc 键，可以快速删除命令。 cls命令，可以快速清空终端。 cd命令，可以进行目录切换。 dir命令，可以查看当前目录列表。三、内置模块 —— fs 文件系统模块fs.readFile(path, [option], callback) 方法，用来读取
2022-02-10 19:22:10
701
原创 大事件项目第一天
一、提供了一个资源库。layui - 经典开源模块化前端 UI 框架。二、使用 layui 的流程。进入 layui 的官网； 点击文档，这里面有很多基础说明，页面元素以及内置模块； 找到你需要的使用的部分使用说明； 引入 layui.css 再引入自己的 css 样式。三、复习 GIT 的命令。首先先在 Gitee 里创建新的仓库； 在本地创建仓库 git init ; 管理未跟踪的文件 git add . ; 将暂存区的文件提交仓库进行保管 git commit -m '描.
2022-01-21 19:04:07
375
原创 GIT 总结第二天（2022.1.20）
一、开源和闭源的概念。 开源：开放源代码。既提供程序，也提供源代码。 闭源：只提供程序，不提供源代码。 二、开源许可协议。 最常用的是 MIT ,因为最好用，限制比较少。 三、将远程仓库克隆到本地。 git clone 需要克隆的远程仓库名称 四、主分支。 在创建 .git 仓库时，默认的主分支就是 master 。 主分支的作用：用来保存和记录整个项目已完成的功能代码。 五、创建分支。 git branch 要创建的分支的名称 六、查看
2022-01-20 19:13:25
341
原创 GIT第一天（2022.1.18）
一、什么是GIT？ 是一个开源的分布式版本控制系统（是一个好用的版本）。 特点：项目越大越复杂，一起开发者越多，就越能体现GIT的高性能和高可用性。 二、GIT 的特性，它的主要特性有两个： 直接记录快照，而非差异比较： 记录快照的缺点：占用磁盘空间比较大； 记录快照的优点：版本切换速度快； 记录快照的特点：用空间来换时间。 基本上所有的操作都是在本地执行的。 三、GIT中的三个区域： 工作区（写代码的区域）；
2022-01-18 20:36:14
316
原创 AJAX总结
AJAX第一天（2022.1.12）服务器上网过程中，负责 存放和对外提供资源 的电脑，叫做服务器客户端在上网过程中，负责 获取和消费资源 的电脑，叫做客户端URL的概念URL（全称是 UniformResourceLocator） 中文叫 统一资源定位符，用于标识互联网上每个资源的唯一存放位置。URL的组成URL地址一般由三部分组成: 客户端与服务器之间的 通信协议 （http/ 或者 https/） 存有该资源的 服务器名称 （www.cnblogs...
2022-01-17 19:16:11
675
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人