知行合一

第一、安装momentnpm install moment --save第二、在main.js引入moment，并且设一个全局的过滤器import Vue from 'vue'import App from './App.vue'import moment from 'moment'import './assets/css/bootstrap.min.css'import './assets/css/index.css'Vue.config.productionTip = false

vue-typescript-bus为了实现两个页面组件之间的数据传递，假设我有页面A，点击页面A上的某一个按钮之后，页面会自动跳转到页面B，同时我希望将页面A上的某一些参数携带过去给页面B。（传参数的时候可以通过路由的params或者query去传参数，或者大型数据可以用vuex来处理，但是有些人还是喜欢用vue-typescript-bus中央事件来处理）安装npm i -S vue-m-ts-bus使用方法，在main.ts里面#main.tsimport Vue from 'vue';

在项目开发中客户突然提出这样的一个需求，客户需要在查看某一个页面时，这个页面需要登录才能查看评论或者提交问题，或者…等，需要有权限的才能查看的信息，这时客户会点击登录界面，但是登录后又跳转到刚刚浏览的那个页面，而不是首页，之前设计的是直接登录后，返回到用户中心，面对这种需求，这种问题该如何去做呢？1、router.currentRoute:当前的路由信息对象，我们可以通过router.currentRoute.fullPath获得解析后的 URL，包含查询参数和 hash 的完整路径，如果要访问的页面的路

vue由静态路由改为动态路由时，出现下面的错误静态路由懒加载，当我们把在router里面，把它写死在ts里时，它加载的ok的，可是我们通过api接口拉取过来的数据时，发现是不报了上面的错// 静态路由懒加载export const loadView = (view: any) => { return () => import(`@/views/${view}.vue`)}错误原因是webpack打包逻辑，webpack4中动态import不支持变量方式，查看路由返回的信息，只是

首先vue+typescript下报Property ‘clearSelection’ does not exist on type ‘Vue’这种情况居然会编译错误，查看报了什么错，显示是分析原因： 它不知道是哪个类型的属性，因为我们这里用到了TypeScript，而TypeScript 又是强类型检查所以报了这个错。解决方案：将原来的this.$refs['multipleTable'].clearSelection()修改为任意类型 (this.$refs['multipleTa

前言在项目中，经常会遇到各种组件与组件之间，父子组件，子父组件之间的数据交互问题，而单个组件的实例出来的数据又是相互独立的，这就意味着不同组件之间的数据无法相互引用，在项目中，大部分的项目中，一般会有几种方式，需要我们去解决，解决了项目的组件通信问题，也就意味着，我们可以把很多的公共的部分进行封装，然后供其它组件之间的引用。针对不同的使用场景，在项目中有几种方式可以使用，如：props、 $emit/ $on、vuex、 $parent / $children、$attrs/ $listeners和

vuex中使用module：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。1、模块内部的数据：①内部state，模块内部的state是局部的，也就是模块私有的，比如是addRoutes.js模块state中的count数据，我们要通过this.$store.state.addRoutes.count获取2、内部getter、m...

html代码： <div id="app"> <ul> <li><span><input type="checkbox" v-model="allcheck" /></span>全选</li><br /> <li v-for="it...

场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。父组件中：<li v-for="article in articles" @click="getDescribe(article.id)">方案一： getDescribe(id) {//直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: ...

问题：在项目中，每次页面刷新的时候会自动弹出一个通知消息，而且都是没有任何内容，直接弹出，一个一个的排查也不知道问题出在哪儿？最的发现是：该情况只在引入局部插件才会引起import Vue from 'vue'import 'element-ui/lib/theme-chalk/index.css'···import { ... Message, ...} from 'el...

computed：通过属性计算而得来的属性1、computed内部的函数在调用时不加()。2、computed是依赖vm中data的属性变化而变化的，当data中的属性发生改变的时候，当前函数才会执行，data中的属性没有改变的时候，当前函数不会执行。3、computed中的函数必须用return返回。4、在computed中不要对data中的属性进行赋值操作。如果对data中的属性进行赋...

1、export与export default均可用于导出常量、函数、文件、模块等2、你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用3、在一个文件或模块中，export、import可以有多个，而 export default 仅有一个4、通过export方式导出，在导入时要加{ }，export default则不需...

代码示例：this.$store.commit('loginStatus', 1);this.$store.dispatch('isLogin', true);规范的使用方式：// 以载荷形式store.commit('increment'，{ amount: 10 //这是额外的参数})// 或者使用对象风格的提交方式store.commit({ type: ...

官方网站：https://vuex.vuejs.org/zh/项目中安装vuexnpm install vuex -S在项目的src目录下新建一个目录store，在该目录下新建一个index.js文件，我们用来创建vuex实例，然后在该文件中引入vue和vuex，创建Vuex.Store实例保存到变量store中，最后使用export default导出store：import Vue ...

首先 sockjs-node 是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。如果你的项目没有用到 sockjs，vuecli3 运行 npm run serve 之后 network 里面一直调研一个接口：http://localhost:8080/sockjs-node/info?t=146218370000...

1、将从服务器请求的数据作为全局变量（全局变量模块挂载到Vue.prototype）在开发中，有时需要将从接口请求到的一些数据当做全局变量，在其他页面多次使用。比如，登录成功后可能需要将用户名，id等信息存起来，便于其他页面展示或使用，将这些信息定义为全局变量是用起来就很方便。例如：export default { data(){ return{} ...

在编写vue文件中引入模块 import model from "@/common/model";这里路径前面的“@”符号表示什么意思？resolve: { // 自动补全的扩展名 extensions: ['.js', '.vue', '.json'], // 默认路径代理 // 例如 import Vue from 'vue'，会自动到 'vue/di...

使用步骤：1、下载依赖 cnpm install v-distpicker --save2、配置与引入，在main.js中写：import Distpicker from 'v-distpicker' Vue.component('v-distpicker', Distpicker)在你的需要加载三级联动的页面的加入如下js中：import VDistpicker from...

vue 在nginx下页面刷新出现404问题，解决在nginx下页面加载了js但是页面显示空白问题解决一、vue 在nginx下页面刷新出现4041、如果是在根目录则配置如下location / {　　root /；　　index index.html;　　try_files $uri $uri/ /index.html}2.如果是有特定目录location /xx/xx/ ...

在学习VUE时，发现很多的组件的引入都是用ES6，需要在main.js中写入如下代码：export default () =&amp;gt; { const router = createRouter() const store = createStore() const app = new Vue({ router, store, render: h =&amp;gt; ...

eslint配置方式有两种：一、注释配置：使用js注释来直接嵌入ESLint配置信息到一个文件里配置文件：使用一个js，JSON或者YAML文件来给整个目录和它的子目录指定配置信息。这些配置可以写在一个文件名为.eslintrc.*的文件或者在package.json文件里的eslintConfig项里，这两种方式ESLint都会自动寻找然后读取，或者你也可以在命令行里指定一个配置文件。有...

1、首先在npm上下载vue-lazyload的引用包npm install vue-lazyload --save-dev2、然后我们在main.js里面import这个包，当然，单单这一个包是不够的，还得其他的文件import Vue from 'vue';import App from './App.vue'import router from './router';import Vue

1.github下载地址：https://github.com/vuejs/vue-devtools2.下载好后进入vue-devtools-master工程执行npm install ----->npm run build3.修改mainifest.json 中的persistant为true4.打开谷歌浏览器设置—>扩展程序–》勾选开发者模式—》加载已经解压的扩展程序–》选择目录–>vue-d

<template> <div> <table class="table table-striped table-bordered" width="100%" style="border: 0 solid #fff;margin-top: 10px;"> <thead class="thead-bottom-line"> <tr

首先创建主页模板：html<template> <div> <!-- 导航栏 --> <ul> <li @click="toggleTabs(tab01Text)">{{tab01Text}}</li> <li @click="toggleTabs(tab02Text)">{{tab02T

$mount()手动挂载当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中；假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载。例如：new Vue({//el: '#app',router,render: h => h(App)// render: x => x(App)// 这里的render: x => x(App)是es6的写法// 转换过来就是：

webpack 把我们所有的文件都打包成一个 JS 文件，这样即使你是小项目，打包后的文件也会非常大。下面就来讲下如何从多个方面进行优化。去除不必要的插件刚开始用 webpack 的时候，开发环境和生产环境用的是同一个 webpack 配置文件，导致生产环境打包的 JS 文件包含了一大堆没必要的插件，比如 HotModuleReplacementPlugin, NoErrorsPlugin… 这时候

vue 组件使用说明一个组件实质上是一个拥有预定义选项的一个 Vue 实例在header组件内部允许外部使用，需要导出属性，有2种导出方法

vue toggle做一个点击切换class<template> <div> <span :class="{'bg-primary text-danger':isA,'bg-success text-white':!isA}" @click="toggle()">AAAAA</span> </div></template><script> export de

全局安装 vue-clinpm install --global vue-cli创建一个基于 webpack 模板的新项目vue init webpack my-project安装依赖cd my-projectnpm install为了使用sass，我们需要安装sass的依赖包npm install --save-dev sass-loader//sass-loader依赖于node-sass

阻止事件冒泡<template> <div> <div id="box"> <div @click="show2()"> <input type="button" value="按钮" @click="show()"> </div> </div> </div></temp

vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装及注意事项。手动安装第一步：找到vue-devtools的github项目，并将其clone到本地git clone https://github.com/vuejs/vue-devtools.git第二步：安装项目所需要的npm...

webpack4.26.0集成vue-loader@15.2.6是最新的版本，vue-loader版本太高了，不支持，所有只有uninstall再重新安装低版本的vue-loader//uninstall的版本npm uninstall --save-dev vue-loader//重新安装低版本的vue-loader@14.2.2npm install --save-dev vue-lo...

打包报如下错误：The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.WARNING in...

几种实现双向绑定的做法目前几种主流的mvc(vm)框架都实现了单向数据绑定，而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素（input、textare等）添加了change(input)事件，来动态修改model和 view，并没有多高深。所以无需太过介怀是实现的单向或双向绑定。实现数据绑定的做法有大致如下几种：发布者-订阅者模式（backbone.js）脏值检查（...

这个方法了不起啊。。vue.js和avalon.js 都是通过它实现双向绑定的。。而且Object.observe也被草案发起人撤回了。。所以defineProperty更有必要了解一下了几行代码看他怎么用 var obj= {} Object.defineProperty(obj,"long",{ value:123 }) console.log(...

there is a chart instance already initialized on the dom在DOM上已经初始化了一个图表实例解决方案：var myChart;//防止出现“There is a chart instance already initialized on the dom.”的警告 //在使用echarts发现需要及时对新建的myChart实...

一、安装nodejsnodejs的官方网站二、安装cnpm，安装命令为，如下cnpm install -g cnpm --registry=https://registry.npm.taobao.org三、设置环境变量（非常重要）说明：设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径1、鼠标右键"此电脑"，选择“属性”菜单，在弹出的“系统”对话框中左侧选择“

html<template> <div class="hello"> <ul> <li v-for="(item, index) in proData"> <label for=""> <input type="checkbox" :value="item.name" v-mode

安装第一步：创建工程项目，基于 webpack 模板的新项目，工程名为myrouter。vue init webpack myrouter第二步：定位到myrouter的工程目录下cd myrouter第三步：安装工程依赖的模块，这些模块将被安装在：myrouter\node_module目录下，根据package.json的配置下载该项目的modulesnpm install第四步：运行项目