骑着代码去流浪

关于nuxt部署参阅https://blog.youkuaiyun.com/weixin_36185028/article/details/1063356811，安装nginx2，配置nginx在nginx中配置能在不同的设备自动定向到h5或pc页面假设网站域名为xxx.com，nuxt启动后pm2的list中的pc端进程为xxxpc，package.json中端口运行端口为3011；h5端进程为xxxh5，package.json中端口运行端口为3012；网站访问端口为80cd /etc/ngi

1，安装node,npm,pm2进入node官网获取最新的安装文件链接下载安装文件：wgethttps://nodejs.org/dist/v12.16.3/node-v12.16.3-linux-x64.tar.xz解压：tar -xvf node-v6.10.0-linux-x64.tar.xz 建立软连接(需要root权限)：mv node-v6.10.0-linux-x64 nodejs sudo ln -s /root/nodejs/bin/npm /.

方法1，以事件总线方式创建拦截器，待所有事件请求结束消失loading创建事件总线：import Vue from 'vue'var _bus = new Vue() // 创建一个事件总线var num = 0axios.interceptors.request.use(function (config) { //在请求发出之前进行一些操作 num++ _bus.$emit('showloading') return config }axios.inte

重写element-ui的message方法一：弹出之前判断是否有多个，有则不弹出，没有则弹出一个resetMessage.js：/**重置message，防止重复点击重复弹出message弹框 */import { Message} from 'element-ui';const showMessage = Symbol('showMessage')class DoneMessage { [showMessage](type, options, single) {

1.安装npm install jsonp --save-dev2.引入jsonpimport jsonp from 'jsonp';3.请求数据export default { created(){ //jsonp请求数据 var keyword = "李白"; var baseUrl = "https://sp0...

最近接触到需要使用到Seo,要求每个页面拥有不同的title,keywords,description第一步 在router里面index.js文件夹中 routes: [ { path: '/', name: 'main', component: Main, meta: { title: '首页title内容',...

1，在vue-cli项目目录下创建vue.config.js文件module.exports = { module: { rules: [ { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', ...

Vue中子组件调用父组件的方法，这里有三种方法提供参考第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法父组件<template> <div> <child></child> </div></template><script> impor...

安装postcss-px2remcnpm i postcss-px2rem -S配置postcss-px2rem//vue.config.jsmodule.exports = { css: { loaderOptions: { css: {}, postcss: { plugins: [ require('...

axios它是基于promise的http库，可运行在浏览器端和node.js中,然后作者尤雨溪也是果断放弃了对其官方库vue-resource的维护，直接推荐axios库，小编我也是从vue-resource转换过来的，差别说不来，我们讲一下axios在实际开发中的用法如何在 Vue.js 中使用第三方库axios特点1.从浏览器中创建 XMLHttpRequests2.从 ...

这种问题一般是area这个计算属性没有设置set方法导致该报错，因为在methods方法里面有对area赋值的操作。只要添加一个 set方法就可以解决此报错。v-model会视图直接修改vuex中的state中的searchWebName，在严格模式下，由于这个修改不是在mutation函数中执行的，所以这里就会抛出一个错误.方法一：监听值变化，调用mutations中方法修改数据...

在苹果手机上，当软键盘收起时输入框会失去焦点；但是在安卓实际上，键盘收起时输入框并不一定会失去焦点，但是会引起window的高度变化因此，在安卓手机上可以通过window.onresize事件判断键盘收起还是弹出，在苹果手机上可以通过输入框失去和得到焦点事件来判断 //判断机型 var isAndroid = u.indexOf("Android") > -1 || ...

安装npm install --save qrcodejs使用引入import QRCode from 'qrcodejs2'html<div ref="qrCode" class="qrcode"></div>jsmethods: { qrcode(){ let qrcode = new QRCode(th...

使用vue-i18n的v-model绑定的值国际化需要使用监听函数<template> <div id="app"> <label for="locale">locale</label> <select v-model="locale"> <option>en</option&gt...

思路：1）调用js的touch的API接口分别监听touchstart,touchmove,touchend事件2）使用计时器可以设定时间用于区分长按和点击<template> <div class="about"> <p @touchstart="start" @touchmove="move" @touchend="end"> ...

1.解释文档给的说明是：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。看着不是很懂，再接合文档的异步更新队列的说明可能你还没有注意到，Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲...

vue-baidu-map文档：https://dafrok.github.io/vue-baidu-map/#/zh/start/usage在plugins新建map.js:import BaiduMap from 'vue-baidu-map'import Vue from 'vue'Vue.use(BaiduMap, { ak: '申请的百度地图密匙'})在nuxt....

1，下载flexible.js下载地址：http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js下载后放到/static目录下2，安装postcss-px2remnpm install --save postcss-px2rem3，配置打开nuxt.config.js3.1，在head...

1.插槽渲染父组件种引用子组件，标签内写入的内容将被分发到子组件的slot标签中父组件：&lt;strong&gt;1.插槽渲染&lt;/strong&gt; &lt;div&gt; &lt;slot-view&gt;窗外的麻雀，在电线杆上多嘴&lt;/slot-view&gt;&lt;/div&gt;子组件SlotView.vue：&lt;temp...

方法一：　　　　通过监听事件document.addEventListener('click',function(e){ if(e.target.className!='usermessage'){ that.userClick=false; }})方法二（比较好）：　　给最...

/***滑动限制***/ stop(){ var mo=function(e){e.preventDefault();}; document.body.style.overflow='hidden'; document.addEventListener("touchmove",mo,false);//禁止页面滑动 }, ...

获取当前路由名称$nuxt.$route.path获取当前路由路径$nuxt.$route.name 

this.$router.push({ path: '/auth/login'}) 

需求，根据传递过来的宽高比，进行宽高的重新计算 computed:{ imgWD(o){ return function(o){ return { width:'370px', height:370*(1/o) + 'px' } } } }&lt;div :sty...

1.安装npm install vue-quill-editor2.在plugins创建vue-quill-editorimport Vue from 'vue'import VueQuillEditor from 'vue-quill-editor/dist/ssr'Vue.use(VueQuillEditor)3.在nuxt.config.js引入相关文件css...

1.安装npm install mavon-editor --save2.在plugins中创建vue-markdown.jsimport Vue from 'vue'import mavonEditor from 'mavon-editor'Vue.use(mavonEditor)3.在nuxt.config.js中引入css: [ { src: "mavo...

npm i axios qsnpm i @nuxtjs/axios @nuxtjs/proxy --save-dev plugins/axios.js使用qs将请求从参数转化位字符串import qs from "qs";export default function({ $axios, redirect }) { $axios.onRequest(config =&...

简单介绍一下vue中常用dialog组件的封装：实现动态传入内容，实现取消，确认等回调函数。首先写一个基本的弹窗样式，如上图所示。在需要用到弹窗的地方中引入组件：import dialogBar from './dialog.vue'components:{ 'dialog-bar': dialogBar,},&lt;dialog-bar&gt;&lt;/d...

使用nuxt框架做http请求，每次要把cookie传到后端，使用document.cookies不能在后端获取cookies，使用cookie-universal-nuxt插件https://www.npmjs.com/package/cookie-universal-nuxt安装：npm i --save cookie-universal-nuxt在nuxt.config.j...

1，实现逻辑1）登录时用户勾选自动登录后，将用户的登录信息（一般为账号和密码）储存到本地cookie（localStorage同），并设置一个过期时间；2）用户退出后下次进入页面，若本地cookies时间没有过期，则获取用户的登录信息，调用登录接口执行登录，即省去用户点击登录那一步；3）若用户没有勾选自动登录，则将自动登录的cookie清除2.实现代码&lt;el-check...

 得到的data为每个请求得到结果组成的元素集合async asyncData (app) { let data = await Promise.all([ axios.get('/api/users'), axios.get('/api/users') ])},

1，引入组件在components目录创建组件，在页面中引入组件例如引入公共导航栏创建组件components/Nav.vue引入组件layouts/default.vue2，引入公共样式assets/css/common.css在nuxt.config.js中引入若引入less或者sass：...