- 博客(33)
- 收藏
- 关注
RSS订阅原创 Vuex初始化
1、Vuex是一个专为Vue.js应用程序开发的状态管理模式。2、在开发中遇到了一种能够高效管理Vuex的初始化方式。在此记录下来3、目录结构：src/store4、文件内容：（1）state.js（2）getters.js（3）mutation-types.js（4）mutations.js（5）actions.js在初始化项目的时候，该文件一般是空的，不影响对Vuex的使用，当需要对mutations封装时，可以修改此文件（6）index.js5、在main.js中注入...
2022-06-07 21:44:09
1312
原创 TypeScript学习笔记（三）——贪吃蛇
配置文件1、将之前写好的package.json、webpack.config.js、tsconfig.json 复制到当前目录下2、使用 npm i 初始化环境3、在src目录下新建 index.html 和 index.ts4、安装工具：npm i -D less less-loader css-loader style-loader5、修改相关配置文件：（1）webpack.config.js： // 指定webpack打包时要使用的模块 module:{ //
2022-06-02 20:18:48
492
原创 webpack打包ts代码时的各文件配置
1、初始化项目（1）进入项目根目录，执行命令 npm init -y（2）主要作用：创建package.json文件2、下载工具（1）webpack相关npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin（2）Babel相关npm i -D @babel/core @babel/preset-env babel-loader core-js3、各文件的配置：（1）w
2022-05-29 19:28:14
800
原创 TypeScript学习笔记（二）
TypeScript（二）webpackBabelwebpack1、通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS。2、步骤：（1）初始化项目进入项目根目录，执行命令 npm init -y主要作用：创建package.json文件（2）下载构建工具在终端执行：npm i -D webpack webpack-cli webpack-dev-server typescript ts-
2022-05-29 16:15:24
261
原创 TypeScript学习笔记（一）
TypeScriptTypeScript简介TypeScript 开发环境搭建基本类型1、类型声明2、自动类型判断3、类型TypeScript简介TypeScript是JavaScript的超集。它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。TS完全兼容JS，换言之，任何的JS代码都可以直接当成JS使用。相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了
2022-05-26 19:56:32
277
原创 vue3学习笔记（二）
vue3学习笔记（二）其它 Composition APIshallowReactive 与 shallowRefreadonly 与 shallowReadonlytoRaw 与 markRawcustomRefprovide 与 inject（注入）其它 Composition APIshallowReactive 与 shallowRef1、 shallowReactive只处理对象最外层属性的响应式（浅响应式）import { shallowReactive } from "vue"
2022-05-22 16:29:23
599
原创 vue3学习笔记（一）
学习笔记vue3项目的创建1、 使用 vue-cli 创建2、 使用 vite 创建vue3项目内容 与 vue2的差异vue3项目的创建1、 使用 vue-cli 创建## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上vue --version## 安装或者升级你的@vue/clinpm install -g @vue/cli## 创建vue create vue_test## 启动cd vue_testnpm run serve2、 使用 vite 创建
2022-05-21 19:41:54
419
原创 后台管理系统案例
总结1、某个html元素 折叠展开时显示的效果不同 如何设置？ <h3>{{isCollapse ? '后台' : '通用后台管理系统'}}</h3>
2022-05-18 16:29:36
1094
1
原创 vuex的使用
1、src下新建 store/user.js（用不同的js文件存放不同的数据）import Cookie from 'js-cookie'export default{ state:{ token:'' }, mutations:{ setToken(state,val){ state.token = val Cookie.set('token',val) }, //
2022-05-18 16:27:01
187
原创 echarts的封装
1、 新建Echarts.vue<template> <div ref="echart"></div></template><script>import * as echarts from 'echarts'export default { props:{ //接收参数 isAxisChart:{ //判断是柱状图/折线图,还是饼图 type:Boolean,
2022-05-18 16:18:16
3478
1
原创 axios的二次封装
1、在src下新建config/index.js根据当前是开发环境还是生产环境来指定请求的基础路径export default{ baseUrl:{ dev:'/api/', //开发环境 pro:'' //生产环境 }}2、在src下新建api/axios.jsaxios相关配置import axios from "axios"import config from '../config'// 根据当前是开发模式还是生产模式
2022-05-18 15:48:32
212
原创 页面刷新vuex数据消失问题解决方案
1、问题：在进行后台管理项目的开发中，使用js-cookie来生成用户标识，并存在vuex中。 但是发现一刷新页面，页面会重新跳转到登录页面。2、 原因这是因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会消失。3、解决：利用第三方库（1）安装： npm install vuex-persistedstate（2）在store/index.js中使用import Vue from 'vue'import Vuex from 'vuex'
2022-05-09 15:57:28
2233
原创 代码结果总结
setTimeout(function() { console.log(1); }, 0); new Promise(function executor(resolve) { console.log(2); for (var i = 0; i < 10000; i++) { resolve(); } console.log(3); }).then(function() { console.log(4); }); console.l..
2022-05-02 20:54:42
285
原创 电商项目实战总结
1、async与await（1）登录验证功能login(){ this.$refs.loginFormRef.validate(async valid => { if(!valid) return // 如果不加await，result是一个promise对象。加上之后result是promise 成功的值，包括需要获取的data // const result =await this.$http.post('login', this.login
2022-04-23 19:02:16
1858
原创 vue学习笔记（五）之 Vue UI组件库
Vue UI组件库移动端常用 UI 组件库PC 端常用 UI 组件库Element使用一提到组件库，需要考虑两个问题：1、基于哪个框架？ Vue、React。。。2、PC端还是移动端？移动端常用 UI 组件库Vant ：https://youzan.github.io/vantCube UI： https://didi.github.io/cube-uiMint UI ：http://mint-ui.github.ioPC 端常用 UI 组件库Element UI： https://
2022-04-11 19:47:21
239
原创 vue学习笔记（四）之路由
路由简介1、vue-router 的理解2、对 SPA 应用的理解简介1、vue-router 的理解vue 的一个插件库，专门用来实现 SPA 应用2、对 SPA 应用的理解单页 Web 应用（single page web application，SPA）。整个应用只有一个完整的页面。点击页面中的导航链接不会刷新页面，只会做页面的局部更新。数据需要通过 ajax 请求获取...
2022-04-11 18:53:57
524
原创 vue学习笔记（三）之vuex
vuex简介简介概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应 用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方 式，且适用于任意组件间通信。Github 地址: https://github.com/vuejs/vuex...
2022-04-10 15:58:57
1092
原创 用vuex实现求和案例
1、index.js： // 该文件用于创建vuex中最为核心的store // 引入vue import Vue from 'vue' // 引入vuex import Vuex from 'vuex' // 使用vuex Vue.use(Vuex) // 准备actions,用于响应组件中的动作 const actions = { // jia(context,value){ // context.commit('JIA',value) //
2022-04-09 19:38:44
1157
原创 vue2学习笔记（二）
vue学习笔记（二）组件的自定义事件全局事件总线（GlobalEventBus）消息订阅与发布组件的自定义事件1、子组件向父组件传递数据的方式（1）通过父组件给子组件传递函数类型的props实现：子给父传递数据 //App.vue <School :getSchoolName="getSchoolName"/> methods: { getSchoolName(name){ console.log('App收到了学校名：',name) }, }
2022-04-08 20:59:03
909
原创 todoList案例
1、实现，所有的复选框选中时，全选前的复选框也变成选中 <!-- v-model默认收集的就是value值。 --> <input type="checkbox" v-model="isAll"/>computed: { isAll:{ get(){ return this.doneTotal === this.total && this.total > 0
2022-04-08 17:07:06
420
原创 VS快捷键
1、代码缩进快捷键先选中需要缩进的代码块，然后使用下面的快捷键：Ctrl + [ 向前缩进， Ctrl + ] 向后缩进。2、代码对齐快捷键先选中需要代码对齐的代码块，然后使用下面的快捷键：Shift + Alt + F...
2022-04-07 20:47:59
326
原创 vue2学习笔记（一）
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录Vue学习笔记一、Vue简介1、vue特点2、与其它 JS 框架的关联3. Vue 周边库二、初识Vue1、新建Vue实例2.阻止生成生产提示3、hello实例Vue学习笔记一、Vue简介1. 动态构建用户界面的渐进式 JavaScript 框架 2. 作者: 尤雨溪1、vue特点遵循 MVVM 模式编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发它本身只关注 UI, 也可以引入其它第三方库开发项目.
2022-04-07 18:36:25
513
原创 es6数组方法
reduce()这个方法常用来对数组进行统计当我想统计一个数组中 done值为 true 的元素个数可以使用这个方法简写形式：语法： array.reduce(function(total, currentValue, currentIndex, arr), initialValue)参数描述total必需。初始值, 或者计算结束后的返回值。currentValue必需。当前元素currentIndex可选。当前元素的索引arr可选。当前元素所
2022-04-07 09:45:38
250
原创 Mybatis中insert后返回该实体id
今天些项目的时候遇到的问题。insert一条数据之后，无法获取他的id。结果在xml文件里添加useGeneratedKeys=“true” keyProperty="id"就好啦。@[TINSERT INTOspace(creator,name,type,time,intro)VALUES(#{creator.id},#{name},#{type},#{time},#{intro});...
2019-04-13 20:23:29
3777
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人