明日复明日的博客

首先：@是在路径访问时使用的，为了减少层级引用。@这是webpack设置的路径别名，默认指向src。旧版本在build/webpack.base.conf这个文件里面定义。新版本在根目录下创建在vue.config.js定义。const path = require('path')const resolve = dir => path.join(__dirname, dir)module.exports = { baseUrl: './', runtimeCompile

首先vue-cli3.0集合了webpack，不需要像网上很多在config/index.js中设置，根据官方文档，只需要在package.json同级的创建vue.config.js，在里面修改。当然文档所说，vue.config.js里面还有一些虽然是webpackd属性，但还是得直接设置的，这个就可以参考vue.config.js的配置文档。根据配置文档，不难发现productionSourceMap这个看似是我们需要的属性，其实配置的是在生产环境而非开发环境。不是我们需要的。因此是选择cha

前置知识：element-ui的表格内部的是嵌套了N层div的，蓝色圈内是外层，是该行的td的样式，红色圈内是内层，是class=cell内部的样式。如果想改的是整列的背景色，可以通过td改，方法是在el-table最外层： <el-table :cell-style="col1_display">然后在methods里面定义同名的方法，选择适合的条件返回css： col1_display({ row, column, rowIndex, columnIn

一个很简单的问题，页面在有后端传过来的数据时正常显示，没有数据时就异常了TypeError: Cannot read property 'Name' of undefined，并且整个页面完全不显示。在调试的时候发现，这是页面在created的时候就会发生的错误。后来发现是数据是对象的对象，然而如果没有获取到数据，owner的数据结构只是一个键值对而没有这样。 <div>姓名：{{owner.user.name}}</div> <div>手机号:{{

首先在ts中属性、模板名字等都有个横杠和大写的转换的，比如父组件中是 <color-drawer>，则子组件的名字是ColorDrawer.vue其次在ts中全部都需要用装饰器说明下面的内容是啥（是组件、还是信号发射器、还是prop属性等），所以必须引入装饰器:import { Component, Prop, Vue, Emit, Mixins, Watch } from 'vue-property-decorator'接下来就是在父组件中引入子组件，并且注册组件，引入组件和js中是一样的

先准备一个情景，你需要用到第三方的组件，比如antd的表格，默认情况下表头和内容都是简单数据，单元格也无法合并，只有基础的样式。可能会有一些api可以对表格进行简单的装饰，比如bordered给表格增加边框size="middle"设置表格大小，但是依旧是一个非常简单的表格。表格的列规定了用column实现，表格内容必须是规定的data-source数组，无法更改任何内容。 <a-table bordered size="middle" :c

一、window对象首先window对象是浏览器下的默认对象，也就是全局对象，在没有明确指向的时候this指向window。即使切换路由，window对象里面的属性和方法依旧会保留。因此可以在控制栏直接输入this、window、self都可以直接打印window对象。window对象很很多默认的方法和属性。 一切全局变量和方法都是window的属性和方法，也就是只要没有指定作用域就会赋值给window。 <script type="text/javascript"> v

子组件(传递参数values)this.$emit('Update', values)父组件(除了接收参数values【$event】之外，还有额外的两个本地的参数)<父组件 @Update="UpdateAttMsg($event,languageType,idx)"/>使用这个方法（第一个是子组件传递的参数values，后面两个是上面的参数）UpdateAttMsg(val, languageType, idx) {}...

git config --global user.name “ZXY”$ git config --global user.email “zouxiaoyue@ds.cn”git config user.name$ ssh-keygen -t rsa -C “zouxiaoyue@ds.cn”密钥生成：https://www.cnblogs.com/xiuxingzhe/p/9303278.html【git 端口拒绝解决方案】ssh: connect to host github.com po

前置知识：vue官网的transition动画。链接：https://cn.vuejs.org/v2/guide/transitions.html大佬实现：https://segmentfault.com/q/1010000011359250的采纳答案。新建一个js文件把代码丢进去。然后要用的vue地方，import collapseTransition from "./animation"，再写入components里面。 <collapse-transition>

一直傻了没懂then调用什么意思，其实是在调用接口的地方使用then。下面各自截取部分来讲述。首先我在http.js里面对axios进行了封装。// 响应拦截器var instance = axios.create({ timeout: 1000 * 12});instance.interceptors.response.use( // 请求成功 res => res.status === 200 ? Promise.resolve(res) : });然

前置知识：为什么通常post需要qs封装。https://my.oschina.net/u/4318177/blog/3369294可以在network下面找到各个发送请求的url非公共部分，看到请求信息。如果看不到就是根本没发出这个消息。这里发现请求变成了options，这是因为chrome的检测，中间我试了很多，包括降低chrome的安全等级，安装跨域插件等，最后发现应该是在后端允许跨域，【注意包括允许options请求】：python写服务器参考我之前的链接：https://blog.csd

我在某个子路由内使用了一个this.$router.push，并且确保这个地址被注册了，但是却无法跳转。 this.$router.push({path:'/1'}).catch(error => { if (error.name !== "NavigationDuplicated") { throw error; }

一个很低级的错误。背景：点击学生信息，学生信息的具体内容收起，右上角的icon改变。 <div class="panel panel-info"> <div class="panel-heading" @click="shrink()"> <el-row :gutter="20"> <el-col :span="23"><span clas

前置：引入jQuery首先：npm install jquery --save-dev然后在webpack.base.conf.js的module.exports中找到plugins，在里面加入：new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" })最后在main.js文件中 引入jquery：import $ from 'jquery'接下来是引入bootstrap：使用命令npm install boo

这就导致我们想更改一些引用的组件的css的时候，无法成功。比如说我用了element的一个折叠组件，想改变他的颜色。调试的时候我能在这里改变这些属性，但是如果在vue的style中的修改确是无效的。解决办法：引入scss可以嵌套父和子的作用域npm install css-loader style-loader --save-devnpm install node-sass sass-loader --save-dev然后使用深度选择器，既不破坏别的组件的css，也能覆盖当前组件。 .

注意这个是不一样的。get方法：因为http中get方法是直接把参数附在url的后面，所以本来应该是用过字符串的拼接来穿度参数。就是 url += ?ID=123这样，但是axios完成了封装，可以在后面使用params写出参数。注意必须是{params：{ 字典序列}}，当然如果没有参数可以直接省略。axios.get(url,{ params:{'id': id, 'message': message}, ).then((res) => {

使用背景：购物车页面的下边栏设置了一个全选按钮，点击可以选择购物车的全部商品，再次点击则会取消选择。因为下边栏是一个子组件，所以需要向父组件发送信息。错误写法：因为即使被mapState包裹也不会影响computed的正常功能，所以我通常是全部包裹住的，但是此时出现错误Computed property "checked" was assigned to but it has no setter. computed: mapState({ list:'cart_list', //商品详情信息

首先axios是为了向服务器发送请求获取资源，因为不希望每次发送请求都要判断是否成功，写大量的重复代码，所以要对axios进行一个简单的封装。这是./api/http.js// 先导入vuex,因为我们要使用到里面的状态对象// vuex的路径根据自己的路径去写import store from '@/store/index';/** * axios封装 * 请求拦截、响应拦截、错误统一处理 */import axios from 'axios';import router from

注意：我是负责前端部分的，后端是同学在负责，所以我只负责一个前后端的对接。背景是一个在线商城。首先清楚前端是作为客户端，请求后端服务端的消息。所以前端后端都run起来。后端的同学给了我这样的接口文档：因此后端请求这个url就能够返回数据：接下来是前端的问题，前端就是要向这个URL发出get的请求。这里我使用了axios的包，首先npm install axios，然后在/src/api/index.js下对axios做配置：import axios from 'axios';import

首先情景是：线上商城用户想增加地址。使用了vant的增加地址的组件。用户点击保存触发onSave，首先把需要的存入的数据也就是用户的姓名地址存到一个对象里。 onSave(content) { let addDate={ 'username':content.name, 'usertel':content.tel, 'province':content.province,

使用官网的例子使用无效： '$route' (to, from) { console.log(to.path); //当前路由 console.log(from.path); //跳转路由 }这是因为在某个路由下所要监听的路由只能是他的子路由，比如你在/a下只能监听/a这个路由的子路由的变化。...

背景：线上商城下订单的时候，用户选择存在localstroge中的地址。父组件：选择地址的页面。selectAdd下的index.vue子组件：每一个地址。（CheckBox+地址）要实现只能选择一个地址确认。我前后考虑了几种做法。第一种是用了一个计数器count，CheckBox的值改变时触发change函数，给count加减。主要代码如下： <van-checkbox v-model="checked" @change="select"></van-checkbox&g

首先是背景，一个简单的答题web app，想加入一个倒计时功能，每当打开新的一题的时候重新从10倒计时到0，如果倒计时到0了还没有做出选择，将看做放弃选择，进入下一题。因为我要实现的功能是10s倒计时并且切换到下一页，因为之前写法的问题，我切换去下一页路由并没有改变，只是引用了一个数组中的不同的index。我最开始怕麻烦引入了vue2-countdown组件，直接npm安装就可以了。但是这个...

遇到过这种情况，调试的时候图片是存在的，能够在style中看到图片的，但是背景就是无法显示。特别奇怪的是如果不是给整个body加background或者对最外层的div的class加background，都可以添加。比如随便选中一个类是可以成功的： .scores{ background: url(../../images/4-2.png) no-repeat;...

跟着任何的教程来就行。因为没有默认安装的插件所以先新建文件.postcssrc.js，按照链接里的粘贴进去就行。不需要单独引用这个js，会被自动添加到配置里面去。https://github.com/frontend9/fe9-library/issues/144...

首先在webstorm里面是编译成功的，但是打开localhost却没有内容显示！打开调试的时候发现问题Uncaught TypeError: routes.forEach is not a function这种时候和这里无关，就是找不到route下的文件了！因为之前是写在main.js下面的，所以被我直接移植了过去。乍一看是不是有引入每一个组件的路径？但是这个文件没有输出啊！！！main...

首先明确的一点是这个打包的过程会用到import和require的所有资源，只要有一个地方不对都会全部出错！！然后我这里首先出现的错误是相关模块没有找到，注意后面是我们调用前面资源的地方，也是前面相对后面的资源，然后我发现我给文件命名成了actions而不是action错了，所有缺失。或者我遇到了第二个问题，明明我在指定模块有common文件，但是说找不到。这是因为我引入的是common.l...

下面src是一样的，但是如果动态设置就无效。<template> <div class="player"> <div id="trigger" ><!-- <audio :src="src" id="audio" loop ></audio>--> ...

教程官网真的很详细！！！https://element.eleme.cn/#/zh-CN/component/quickstart接下来具体使用注意这句话：通过基础的 24 分栏，迅速简便地创建布局。<el-row :gutter="20"> <el-col :span="6"><div class="grid-content bg-purple">&...

因为官网的文档是给微信小程序的，所以记录一下。要注意一下webstorm自动生成的vue模板是vue/cli3，很多教程里面说的是改.babelrc，但是这个是2.x版本的，3.0应该是直接在babel.config.js下面改就行了。注释的部分是本来的部分。// module.exports = {// presets: [// '@vue/cli-plugin-babel/...

情景：商城的购物车界面，点击全选选中全部商品，再次点击全部取消。商城里的数据存储在vuex里面一个叫做list_cart的数组里，其中一个属性是ischecked来控制每个商品是否被选中。而下面这个则是van-submit-bar里面嵌套了一个van-checkbox，通过v-model="checked"来控制。checked也是一个computed数据：点击后父组件（购物车页面）传递改变的value值，同时向父组件发消息代表方便改变其他选项的值。 checked: { get()

情境是这是线上商城的详情页面，商品详情是items数组，点击分类页面的商品，路由跳转到详情页面，路由参数是商品在items中的序号。但是问题是只有第一次点击商品i的时候可以正常加载items[i]的数据到html中，退出后点击商品j，发现加载的还是商品i的信息，只有刷新后才会更新成商品j的信息。部分代码： <shopPanel :key = "nums" :goodname="item.text" :tag="

首先据我查的资料，this.$router.push路由跳转有以下几种形式：1. 不带参数 this.$router.push('/home')this.$router.push({name:'home'})this.$router.push({path:'/home'}) 2. query传参 this.$router.push({name:'home',query: {id:'1'}})this.$router.push({path:'/home',query: {id:

这里假设一个背景。父组件：购物车页面。子组件：购物车里面的每一个商品的item。父组件需要为子组件提供数据（商品类型、商品价格、商品标签等）。父组件无须额外定义说明这些数据，在子组件调用的地方（item的标签内）直接调用就行。传入子组件的属性就是key,index,num,thumb…，而传入的数据就对应他们的值。<!--每一个添加的商品，list里面是购物车的全部的数据，这里的index则是加入购物车的商品的序列号--> <Item

要分清两者的区别。首先是监听页面的刷新与离开，此时相当于直接在这个网页中按了刷新，如果是webapp则是离开这个app而不是切换路由！在script中直接增加监听器监视beforeunload： //监视如果页面离开 created() { window.addEventListener('beforeunload', this.updateHandler) }, beforeDestroy() {

环境：父路由的path: /item/item01/，子路由的path:evaluate。 在模板中使用了<router-view></router-view>，并且触发了this.$router.push("/item/item01/evaluate");并且如果push的是相对path:evaluate无效。并且子路由的内容可以正...

进入阿里巴巴的素材库https://www.iconfont.cn/，选择需要的，加入购物车，然后下载到本地。解压缩之后把除了demo的全部放到assets下面，创建一个文件夹iconfont全部放进去。然后main.js里面直接调用import "./assets/iconfont/iconfont.css"然后在每一个vue中直接使用了。因为把图标转换成了icon...