许小墨のBlog

excel导入excel导入需要依赖elementui的上传组件，将上传的文件获取到以后，将文件的数据读取出来，解析成json格式，然后转换成我们可以显示的表格数据，然后展示在表格中。 文件上传组件12345678910<el-upload class="upload-demo" action :on-change="onChange" accept=".xlsx,.xls" :auto-upload="false" :show-file-list="false" > <el-button size="small" type="primary">导入</el-button></el-upload> 其中的on-change表示选择的文件信息发生变化的时候会 ...

shop删除无用文件和代码搭建项目后，进入这个项目文件夹，将App.vue中没有用的内容删除： 将views中默认创建好的HomeView文件和AboutView文件删除，将components中的HelloWorld文件删除。 将路由文件中的默认路由规则删除： 切换项目启动端口号如果我们的项目，使用的端口号不要默认的8080，就在vue.config.js中配置： 当我们重新启动项目后，就使用这个端口号访问项目了。 配置路由配置路由规则： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950const routes = [ // 5个路由 { // 首页 path: '/', redirect: '/index' }, { path: '/index', component: Index, // 商品详情子路 ...

vuexvuex中5个属性： state mutations actions getters modules - 模块化管理数据 1234modules: { 命名空间名字: 数据, 空间名字: 数据} 数据是通过导入进来的，被导入的文件： 12345export default { namespaced: true, state: {}, getters: {},} state使用： 直接使用 模板中 1{{$store.state.空间名字.数据}} 逻辑代码中 1this.$store.state.空间名字.数据 将数据放在自己组件中： 12345import {mapState} from 'vuex'computed: { ...mapState('空间名字', ['数据名字'])} getters使用： 直接使用 ...

vuex的使用vuex是什么？ vue项目中的数据库，其中的数据是不持久的，在多个组件要共用一些临时数据的时候使用vuex。 依赖第三方模块： 1npm i vuex@3 配置：在src下新建了store文件夹，其中新建了index.js 12345678910import Vue from 'vue'import vuex from 'vuex'Vue.use(vuex)const store = new vuex.Store({ // 定义数据 state: { num1: 5 }})export default store 在根组件中使用store，在main.js中： 12345import store from '@/store'new Vue({ store}) 使用： 模板中使用： 1{{$store.state.num1}} 在逻辑代码中使用： 1console.lo ...

vuex介绍在企业开发的项目当中，通常组件非常多，都是错综复杂的，如果用之前学习的组件传值方式，进行数据传递的话，会让项目变得臃肿且难以维护，所以vue提供了相关的模块，专门来维护整个项目的数据。 vuex可以让各个组件之间共享数据。 使用下载安装vue2和vuex3配合 vue3和vuex4配合 1npm i vuex 创建模块在项目文件夹下的src文件件下新建文件夹store，在store文件夹中新建index.js作为vuex的配置文件，代码如下： 12345678910111213141516171819202122232425import Vue from 'vue'import vuex from 'vuex'Vue.use(vuex)const store = new vuex.Store({ // vuex中有5个配置 state: { }, mutations: { }, actions: { }, getter:  ...

路由配置下载vue中要使用路由，需要依赖第三方模块 - vue-router 版本之间要有配合： vue2 + vue-router@3 vue3 + vue-router@4 下载对应的版本： 1npm i vue-router@3 配置需要在src文件夹下新建一个文件夹，文件夹下新建index.js，在这个文件中配置路由。 123456789101112131415161718192021222324252627282930313233343536373839404142434445// 导入vueimport Vue from 'vue'// 导入vue-routerimport VueRouter from 'vue-router'// 导入路由规则中要是用的组件import IndexCom from '../views/IndexCom.vue'import ListCom from '../views/ListCom.vue'import MyCom from '../views/ ...

脚手架和路由脚手架概念脚手架是为了更加快速的架构整个项目的结构和基础业务，开发者开发出来的一个工具。利用该工具可以执行一行命令就将项目的结构以及基础的业务架构好。 express有脚手架，可以快速搭建后端接口项目的结构，以及基础的用户请求模块。。。 vue也有vue的脚手架，可以快速搭建vue项目的结构和基础业务。。。 vue的脚手架： vue-cli - 旧版，现在基本不用 @vue/cli - 新生代，现在还有很多在用，也有人在用更新的 脚手架的使用下载安装： 1npm i @vue/cli -g 检查版本： 1vue --version # 简写 vue -V(大写) 创建项目： 1vue create 项目名称（用英文） 当使用npm多次下载失败的时候，cnpm比npm牛逼，yarn更牛逼，用流量是万能的。 项目目录结构public存放了一个现在正运行的index.html，不要改动 src项目主要文件夹： assets存放静态资源的文件夹 components存放所有组件的文件夹 App.vue根组件，将来我们自己写的其他组件最终都会 ...

json-server工具：快速的依赖一个json文件就能启动一个后端服务器接口。 下载： 1npm i json-server -g 检测是否能用： 1json-server --version 先创建data.json文件，其中必须是一个对象，一定要有一个键值对。 启动： 1json-server json文件 使用： post请求 - 新增数据 get请求 - 查询数据 查询所有数据 查询一条数据 put请求 - 修改数据 delete请求 - 删除数据 组件概念我们在项目开发中，通常是进行模块化开发的。在vue项目中，可以对整个页面进行模块化，组件就是页面中的一个模块。 我们将整个页面的一部分单独封装在一个页面中，当需要用到的时候，导入即可。 语法全局组件全局组件创建好以后，后续的每个vue实例都可以直接使用。 123456Vue.component(组件名称， { data() { return {数据} }, template: '组件的 ...

网络请求现代的前端项目都是前后端分离开发模式进行的，也就避免不了前端需要给后端服务器发送网络请求，对数据进行增删改查的操作。 发起网络请求的方法我们可以总结为4种： xhr - 原生的ajax 缺点：代码繁多 语法： 1234567891011121314const xhr = new XMLHttpRequest()xhr.open(请求方式, 请求路径, 是否异步)xhr.send()xhr.onreadystatechange = function() { if(xhr.readyState === 4) { if(xhr.status >= 200 && xhr.status < 300) { let res = xhr.responseText } }}xhr.onload = function() { let res = xhr.responseText} 其他请求方式的原理，就是原生ajax ...

vue生命周期vue从开始创建到最终被销毁的整个过程，是vue的生命周期。整个过程如下图： 整体分为3个阶段： 初始化阶段 创建vue实例 初始化vue中的很多监听，开始生命周期 将data中的数据进行监听，并放在vue实例上，可以访问到数据了 判断是否有el参数，如果没有就一直等待vue实例调用$mount(el参数) 判断是否有template参数 如果有，就将template编译成渲染函数 如果没有，就将el的outerHTML编译成template 创建vue实例的$el属性，并且用上面的渲染函数或template替换掉指定的el参数 挂载好了，页面也就显示出来了 更新阶段 当数据发生改变的时候，虚拟节点重新渲染并且打补丁 重新挂载好 销毁阶段 当vue实例调用$destory的时候，拆掉监听、拆掉子组件、拆掉事件。。。 已经销毁了 为了让我们更灵活的操控vue，vue框架内置了8个生命周期钩子函数，可以让我们在vue在整个生命周期中进行到某个阶段的时候，执行我们的代码。例如在挂载的时候，操作一下标签；在初始化以后操作一下数据。。。 生命周期钩子是函数是 ...