前言 最近在写nuxt项目时候每次新建页面都要去新建然后引入各种需要的依赖很是麻烦，所以想写一个脚本自动生成文件 省去手动新建现写下实现方法 给大家参考Mac下可直接运行 Windows下需要安装Cygwin类软件且配置环境变量后运行使用方法1、需要修改package.json 的scrpts 加一条create 或者自定义名字 主要是为了我们在terminal中输入指令后运行对应的脚本package.json2、在项目根目录新建一个template文件夹放自己的模板文件文件内...
亲测，webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行。 我的vue项目结构如下：1. 进入该vue项目目录，打开git bash，执行：npm run build(在package.json的scripts配置)执行成功如下图所示：然后此时你会发现项目下多了一个 dist 文件夹，dist下文件便是项目打包之后生成的文件。此时我们直接在浏览器中打开index.html，是会报错的，什么都看不到。2. 安装express-generator生成器 执行 $ npm install ex...
当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。 <template><div id="app"><p v-for="item in items" :key="item.id">{{item.message}}</p><button class="btn" @click="handClick()">更改数据</button></div> </template><script> export default {name: App,data () {return {items: [{ message: "one", id: "1" },{ message: "two", ...
初次看到这个模块方式，感觉很是新奇，之前的vuex状态树使用方法用的也有些腻了，就想来实践一发新的东西 废话不多说，直接进入正题 Vuex状态树-模块方式官方文档解读状态树还可以拆分成为模块，store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块 这句话啊，看了半天，我都没绕出来。之前一直用的是store目录下文件为：index.js、state.js、mutations.js、actions.js。后三个是index.js的子模块，你说这每个js文件都...
vue-router配置路由，使用vue的异步组件技术，可以实现按需加载。这种方式下一个组件生成一个js文件 用例： { path: /promisedemo, name: PromiseDemo, component: resolve => require([../components/PromiseDemo], resolve) }es提案的import() (推荐)webpack官方文档：webpack中使用import() vue官方文档：路由懒加载(使用import()) 用例： // 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。 const Imp...
一、前言在4k广告机中需要实现多语言切换，这时候接触到国际化，前端框架无数，其中几种热门的框架都有相匹配的国际化插件工具。比如： vue + vue-i18nangular + angular-translatereact + react-intljquery + jquery.i18n.property在4K广告机项目中使用的前端框架为Vue，故而我们将使用vue-i18n这个插件进行国际化功能的实现。二、最终实现效果三、国际化的实现1、首先在自己的项目中安装 vue-i18n依赖包。这里使用NPM进行安装，如...
安装clipboard.jsgithub路径:https://github.com/zenorocha/clipboard.js安装：npm install clipboard --save 引入clipboard.js import ClipboardJS from "clipboard";或 <script src="https://clipboardjs.com/dist/clipboard.min.js"></script>使用：剪切 <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device...
v-if和v-show的区别是前端面试中常问的基础知识点，v-if、v-show顾名思义就是用来判断视图层展示效果的。那么具体是怎么展示呢？v-if和v-show的区别又是什么呢？ 首先我们可以来看一下Vue中文社区说明文档的介绍:Vue中文社区说明文档中简单来说是：初始渲染的时候进行条件判断展示； 在实际开发中我们会经常使用到v-if和v-show来进行判断展示，我们可以这么理解： <div class="tc" v-if="pload && list.length<1" ><img src="../as...
一.标签传参方式：<router-link></router-link> 第一种 router.js {path: /course/detail/:pk,name: course-detail,component: CourseDetail }传递层 <!-- card的内容 {id: 1,bgColor: red,title: Python基础 } --> <router-link :to="`/course/detail/${card.id}`">详情页</router-link>接收层 let id = this.$route.params.pk 演变体 """ {path: /course/:pk/:name/detail,name: course-detail,component: CourseDetail }<router...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body><div id="app"><!-- post-title使用驼峰命名postTitle会报错 blog-post改为blogPost会报错 --><blog-post post-title="hello!"></blog-post></div><script>Vue.component(blog-post, { //命名...
今天用Vue做一个小项目时需要用到多个select筛选功能，但是原生的太丑，如果直接写在当前页多个select处理起来又太繁琐，第三方ui又太大，所以就自己写了一个，并上传了GitHub仓库,仓库地址：https://github.com/tuohuang/vue-select 使用方法：引入组件:import VueSelect from ../components/VueSelect 注册组件export default {components: {VueSelect} } 使用组件<template><vue-select:options="options"name="name"value="id"...
当我们完成项目的构建，进入开发阶段的时候，除了你需要了解框架本身的知识点外，我们还需要提前掌握一些项目的编码技巧与规范，在根源上解决之后因编码缺陷而导致的项目维护困难、性能下降等常见问题，为项目多人开发提供编码的一致性。 本文将罗列项目中常用的一些编码技巧与规范来帮助大家提升代码质量，并会结合代码片段加强大家的理解与认知。当然不是所有实例都是针对 Vue.js 开发的，有些同样也适用于其他前端项目。 实例1....
本文实例讲述了vue实现标签云效果的方法。分享给大家供大家参考，具体如下： 闲扯两句 最近想给自己的博客上加上一个3D标签云的效果，用来表示自己博客文章的分组，网上找到了canvas实现的，还有a元素实现的解析3D标签云，我想让标签可以选择和点击，又不想在标签数量较多时操作a标签导致性能问题，于是svg就成了一个不错的选择。 标签初始化 这里实现的核心主要是参考了前面的那篇解析3D标签云的文章，作者给出了源码，讲解也比较...
一、路由模式解析 要讲vue-router的路由模式，首先要了解的一点就是路由是由多个URL组成的，使用不同的URL可以相应的导航到不同的位置。 如果有进行过服务器开发或者对http协议有所了解就会知道，浏览器中对页面的访问是无状态的，所以我们在切换不同的页面时都会重新进行请求。而实际使用vue和vue-router开发就会明白，在切换页面时是没有重新进行请求的，使用起来就好像页面是有状态的，这是什么原因呢。 这其实是借助了浏览器的...
一、函数式组件和普通组件的区别 渲染快没有实例，意味着没有（this）没有生命周期（没有响应式数据）二、组件函数的使用1.以局部组件为例，将组件标记为functional=ture; 因为函数式没有实例，因此组件需要的一切都是通过context参数传递，它是一个包括如下字段的对象： props：提供所有 prop 的对象children: VNode 子节点的数组slots: 一个函数，返回了包含所有插槽的对象scopedSlots: (2.6.0+) 一个暴露传入的作用域插槽的对象...