a8725585的博客

Ref自动解包watch直接接受Ref作为监听对象，在回调中解包const counter = ref(0)watch(counter, count => { console.log(count) // same as `counter.value`})在模板中自动解包reactive解包import { ref, reactive } from 'vue'const foo = ref('bar')const data = reactive({ foo, id

接着上一篇vue中编写通过方法调用的组件我们已经开发完成一个插件，接下来将其发布到npm,供他人使用同时也方便后续其它地方复用。接下来的打包主要是使用vue-cli3脚手架搭建的环境。cli2的打包发布可以看这篇文章 教你一步步封装vue组件并发布到npm。1、修改项目package.jsonvue-cli 3.x 提供了构建目标的命令,不用再去配置webpack.config,直接新增命令搞定target: 默认为构建应用，改为 lib 即可启用构建库模式name: 输出文件名.

一个可以提供自动化文档的生成，并提供组件预览，这个库叫做 Vue Styleguidist使用参考 使用Vue Styleguidist编写组件文档

参考：Vue原理解析

通过函数调用的组件，常见的toast提示框，loading等创建文件目录结构|---loading |---Loading.vue |---index.js编写index.js思路创建组件构造器实例化组件挂载到一个新建的div上新增至body页面上通过实例对组件进行代理操作import Vue from 'vue'import LoadingComp...

安装vuecli3npm install -g @vue/cli# ORyarn global add @vue/cli创建项目vue create project-typescript手动选择特性选择babel、ts、router、vuex、css预编译器这里我们使用基于类的组件选择sass编译器eslint规则独立的配置文件配置在App.vue中新增路...

前后端分离后单页面应用盛行，出现了服务端渲染的说法，其能更好的SEO什么是服务器端渲染 (SSR)服务器将组件和获取到的数据解析生成html字符串，发送给客户端。过程同之前的php、java等的全栈开发，使用模板引擎，获取数据后解析为html字符串后，发到客户端展现。服务器渲染的 Vue.js 应用程序，可以同时在服务器和客户端上运行。为什么使用服务器端渲染 (SSR)更好的 ...

安装npm install --save-dev eslint eslint-plugin-vue配置"extends": ["plugin:vue/recommended"]解析器vscode安装eslint插件配置vscode自动fix设置保存时格式化"eslint.autoFixOnSave": true,扩展检查.vue文件关闭编辑器自动保存格式化，避免冲突...

通过数据劫持set发布消息，通过watcher进行订阅消息，从而触发update代码1export class Observer { ... constructor (value: any) { this.value = value this.dep = new Dep() this.vmCount = 0 ... }代码2Object.d...

需求在vue单页面应用中打印目标区域解决方案使用原生window.printvar printhtml = window.getElementById(dom).innerHtml // 获取打印区域var oldhtml = document.innerHtml // 保存原始内容document.innerHtml = printhtml // 赋值打印windo...

饿了么Cascader 级联选择器 省市数据混入文件下载地址源码options: [{ "label": "北京", "value": "北京", "children": [{ "label": &quo

如何使用1、第一种 使用脚手架时配置使用vue-cli脚手架构建webpack模板的vue项目时会询问你是否使用eslint 选择yes 之后选择检测的配置文件a.选择eslint语法检测b.选择配置文件这里我选择的standard 据说airbnb非常严格这样生成之后就自带了代码检测测试一下cd myappnpm run dev显示没问题接下来我们将代码修改一下出错了函数和参数需要有空格。2...

思路：前端验证1、路由meta中保存是否需认证字段// meta:{// requireAuth:true //需要登录验证// },2、使用vue-router的全局前置守卫进入路由前判断该路由是否需要登录验证router.beforeEach((to,from,next)=>{ if(to.meta.requireAuth){ //是否需要登录权限 ......

1、直接安装好node后 自带有npm2、使用npm安装webpack npm install webpack (局部安装，在mac中进行全局安装后边打包时会出错)、vue、vue-cli3、下载你需要的包后面发现跑的时候总出错直接在项目文件夹下运行npm install编译成功其中你可能会遇到报错：Error: listen EADDRINUSE原因是端口被占用解

vue加载完加载mui,当用到plus时先加载完plus基座再初始化muivar t=new Vue({ el:'#app', data:{ tabledata:[], countdata:[], nowtime:'', }, mounted (){ //mui mui.plusR

昨天按照教程安装好vue-router模块后，在应用中引入router 发现没有router.map方法，百度后原来是vue2.0里的路由改了// 1. 定义（路由）组件。// 可以从其他文件 import 进来const Foo = { template: 'foo' }const Bar = { template: 'bar' }// 2. 定义路由// 每个路由应该映射一个组件。

vue-socket.io的使用参照vue-socket.io的git地址说明文档进行安装npm install vue-socket.io在app.js中注册import VueSocketio from 'vue-socket.io';Vue.use(VueSocketio, 'http://socketserver.com:1923');在组件中使用ex...

Es6语法IE下兼容问题UglifyJsPlugin报错 UglifyJsPlugin不支持Es6语法，vue-cli生成的项目中当引入的node_modules里有es6的的语法vue文件时,会报错如： ERROR in static/js/vendor.2de645693dea309ad3b2.js from UglifyJs Unexpected token: operator (>)

a.js作为中间件export模块 from使用说明

vue父子组件钩子函数触发顺序beforeMount后mounted前构造子组件 依次遍历 beforeCreate-父组件created-父组件beforeMount-父组件beforeCreate-子组件created-子组件beforeMount-子组件beforeCreate-次子组件created-次子组件beforeMount-次子组件mounted-次子组件...

1.vue父子组件使用props传值时props数组里用驼峰命名转到父组件使用时会需变更为短横线分割命名即 myData=>my-data2.sync语法糖 :data.sync="val"=> :data @update:data="newval=>val=newval" 触发父组件更新值时使用驼峰命名 3.子组件中使用element.ui组件中的dialog组件后，通过父组件...

一般我们在html 和css文件中需要用到图片时直接使用相对路径即可。如<img src="@/img/img1.png"/>  background="url(@/img/img1.png)"但在vue中style中这样使用会出错，找不到文件。template模板中既可以使用相对路径，也可以使用别名@ style中可以使用相对路径 不能使用webpack中配置的路径别名解决方法：1....

Vue.js的初步使用领导布置了一个新任务，这次尝试着前端使用bootstrap+vue.js后端用thinkphp5进行开发。页面的样式布局直接使用的模板之家下载的bootstrap模板，因为没啥美感，还是直接下载使用来的快。接下来是正式部分vue的使用：在html头文件部分在线引入vue.js <script src="https://unpkg.com/vue/dist/vue.js">