明日复明日的博客

首先：@是在路径访问时使用的，为了减少层级引用。@这是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

有时候mock需要绑定接口，但是switchhost因为系统不支持接口的绑定，所以这时候只能通过whistle来进行绑定。baidu.com 127.0.0.1:1024最简单的mock模式，将需要返回json放在本地。前面的就是可以在network看到的url。http://www.test/personalise/submitGroupbyId /Users/xiaoyue.z/WebstormProjects/wechat-admin-vip-com/mock/api/submitGr.

前提：希望在node中直接使用import引入模块，自 Node 13 开始可以直接使用 ES Modules 但是会报警，Node 14 后可以使用并且不报警了。系统：windows10，并且已经装了node12。首先我们是使用nvm包管理工具，比较小。git链接里面直接下载nvm-setup，无需配置，解压缩之后就是exe直接点击使用。注意nvm不要放去C盘，否则使用node会无法访问。可以通过where node找到node的安装路径，填入安装时的这里。这样就不需要卸载本来的no..

在接口上线之前，电脑调试可以通过代理返回，但是真机调试本质上上请求方是手机，没有设置代理，所以会接口404。真机可以通过代理，让数据发向本机的服务器（127.0.0.1：8899），然后电脑抓包，来完成接口的mock。首先是whistle代理mock数据，也就是手机发的请求，whistle返回。首先手机（iphone）设置代理。WiFi→选择WiFi→最下面配置代理手动→输入服务器和端口号。whistle点击online可以看到。点击https出现二维码，点击有地址，然后在浏览器中输入这个地址，

模块化概念——在进行项目分析或者编码时，先把项目进行拆分，拆分成很多的类，对象，很多的函数等等。能够提高代码的复用性。这些被拆分出来的类型，对象，函数就是模块。1) 前端模块化ES6之前，因为JavaScript不支持模块化，所以在前端里出现了第三方的解决方案 AMD和CMD。AMD：Asynchronous Module Definition,中文名是异步模块定义的意思，需要加载require.js库；对外导出使用return主模块再使用其他模块：require([引入的其它模块列表],

前置知识点：在es5中只有全局作用域和函数作用域，而es6中新增了一个块级作用域，就是可以在js文件里任意出使用{ }形成相对独立的作用域（一般用于if和for内部）。变量提升：先解析代码，获取所有声明的变量，然后代码自上而下依次运行将变量提升到自身所在作用域的头部，这将导致脚本还未执行，而变量却存在，只不过变量的值为undefined。因此注意：变量声明可以提升 但是赋值初始化不提升。计算机语言从右往左的解读模式让var a = b = 1; b 为未被定义，直接被认为是全局变量，而va

Readonly只针对input(text/password)和textarea有效，而disabled对于所有的表单元素有效，包括select,radio,checkbox,button等。块级元素实际占用的宽度：border+padding+width

首先的首先，JavaScript里的逻辑与和逻辑或的返回值不一定是布尔值！ 逻辑非的返回值一定是Boolean值。与。 规则从上到下执行。注意：js的简便计算特性会令他遇到第一个false的时候停止计算，返回这个对象（而不是对象转换的false）有没有undefined，有的话返回undefined有没有null，有的话返回null0和NaN和’'会被转换成false，遇到了直接返回他俩。console.log(NaN && false) //NaNconso

前几天刷牛客对if (new Boolean(false))console.log('true')竟然能正常输出true感到惊讶，去看了红宝书才发现有Boolean对象和Boolean原始值的区别。先明确一下原始值和引值的区别。new创建的Boolean对象，是对object类的继承，除了继承object的一些方法之外，还重写了比如valueof(),stringof()等的方法，他们的返回值都是true，false。但是当我在nodejs里面测试又发生了迷惑，不是要对象才有方法，为什么tt一个基本

一道非常简单的题引发的思考：输入一个链表，反转链表后，输出新链表的表头。首先： js里面是没有明确的堆和栈的概念的，也就是不存在一个&arr，来获取数组的地址。但是可以理解成数组在创建时向堆申请了一大块区域。然后：JavaScript 有 6 种基本的数据类型，分别是：布尔、null、undefined、String 和 Number、Sympol。这些基本类型在赋值的时候是通过值传递的方式。let x = 10;let y = "abc";let a = x;let b =

效果如下：有两种方法，本质都是使用slot。官方定义表格至少提供两个数据，columns定义了每一列的名字和表格数据对应的key，data是传进去的表格数据，是个列表[ ]，里面的每一个{ }是表格的一行，{ }的key在colums中定义。<a-table :columns="columns" :data-source="data">如果想要给表格的内容换行，只需要在对应colums定义的地方加入槽，意味着不是直接返回输入的值，而是返回槽内的模板。最简单就是在定义colums时声

vue-cli4集成了watchNight，只需要npm安装本身和自动测试的驱动器就行。虽然nightwatch是基于Selenium Server，但是新版的nightwatch已经不需要再单独引入了。npm install nightwatchnpm install chromedrivernpm install geckodriver然后在package.json里面增加命令。我这里有两种情况，项目生成之后按照第一步的步骤，再安装watchNight，"e2e": "nightwat..

flex的使用只针对子元素，完全不针对孙子和孙子的后代。flex的主轴就是水平方向，交叉轴就是垂直方向，规定子元素按那种轴的什么方式排列就行（flex-direction，flex-flow）。要注意这个属性是针对flex父元素（justify-content、align-items等），还是flex项（flex-grow、orde等r）的。...

首先区分发送的数据类型是application/json; charset=utf-8还是application/x-www-form-urlencoded。其中axios默认的类型是application/json，后端接收的数据格式是键值对字典序列。其中qs.stringify通常用于form表单类型，传递&连接起来的字符串。var a = {name:'hehe',age:10}; qs.stringify(a)// 'name=hehe&age=10'JSON.st..

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

不太习惯antd的官方文档让我踩了不少坑。总结一下粗浅的使用方式。要同时引入form和form-item。form-item包裹在需要作为表单项目引入form <a-form :form="form" > <a-form-item> <a-input v-decorator="[ `longitude`, validatorRules.longitude]" /&gt

对于javascript来说，字典类(Dictionary)的基础是Array类，js中的Array既是一个数组，同时也是一个字典。所以除了直接遍历外，还能用Object.keys的对复杂类型进行遍历。对已经定义好的字典序列使用for遍历取全部值。注意这里必须是字典序列而不是array里面的字典元素！ var dic = {c:4, a:2, d:3, b:1}; // 定义一个字典 console.log("输出最初的字典元素: "); for(var key in di

一、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) : });然

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

前置：引入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

使用背景：购物车页面的下边栏设置了一个全选按钮，点击可以选择购物车的全部商品，再次点击则会取消选择。因为下边栏是一个子组件，所以需要向父组件发送信息。错误写法：因为即使被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

情景：商城的购物车界面，点击全选选中全部商品，再次点击全部取消。商城里的数据存储在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...

核心错误应该是[Vue warn]: Property or method "$t" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based compone...