vue
学习vue该怎么起步?

本文将持续更新。 关于vue的学习,虽说官网有非常详尽的文档,但初学者总归是有些茫然无措。 小编决定花一点点时间,梳理一些快速上手的要点帮助后来人。 ## 先不着急用脚手架,CDN单页面模式先把事情做起来 vue官网中有一段: >CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解。如果你...


Vue Element Admin 开发报错 Duplicate keys detected

Vue Element Admin 开发报错 ``` Duplicate keys detected ``` 此重定义如果在代码中,很容易发现。但如果是在路由文件中,经常容易找不到。 如果出现这...


一种 vue element 技术栈刷新 echarts 图表的实现方法

一种 vue element 技术栈刷新 echarts 图表的实现方法 # 方法 将 echarts 图封装在子组件,数据由父组件传入。在父组件强制刷新子组件实现echarts数据刷新。 组件强制刷新方法请参考小编昨天的博客[vue使用key实现组件刷新(渲染重置)笔记](https://yixzm.blog.csdn.net/article/details/105118631) # 关键代码 全部代码太多,仅贴和问题相关的关键步骤。 ## 父组件 ```vue...


一种在vue环境下动态改变css样式class属性的方法

```vue <div class="item" :class="changeStyle" @click="dododo()"> onepiece </div> ``` class="item" 是固定样式,:class="changeStyle" 是动态样式。 在css中,分别定义两个待变换样式的类。如: ```css .bg-red { background-color: red; } .bg-green { background-color: green; } ...


原生JS实现获取两个标签之间的内容,分离vue模板中的JS和HTML

`vue` 相比原生`JS`,确实方便很多。 出于本菜的特定使用场景,`vue` 引入模板的方式并不适用。无奈,只好出此下策,造轮子分离`vue` 模板中的`template`和`script`。 需要解析的模板(权当是字符串): ``` <template> <h1>ooo</h1> </template> <script> console.log("test"); </script> ``` 分离vue中的template ``` var html = str.subs...


配置vue项目build构建dist目录

最近在使用vue框架重构九型人格测试程序前端模块。 小编做个预言家: * 应用前端从原本的原生JS分页面应用重构至基于vue框架,代码可读性增加; * vue-cli方式构建项目,可以更方便的打包文件 * 还可以使用组件,更加工程化的管理项目 怎么做呢?步骤如下: 修改文件:config/index.js ```javascript build: { index: path.resolve(__dirname, '../dist/index.html'), a...


关于vue告警 Missing space before function parentheses

vscode环境开发vue-cli脚手架工程,eslint规范检查工具告警笔记 # 告警 告警内容: ``` ✘ http://eslint.org/docs/rules/space-before-function-paren Missing space before function parentheses src\components\question.vue:70:10 mounted() { ^ ``` 这行警告的关键信息: ...


关于vue告警:Closing curly brace does not appear on the same line as the subsequent block

最近在用vscode写vue,有两个目的,一方面是重构下小编渣站的前端,另一方面也是主要原因: 小编见到新技术就像狼闻到肉,老光棍看到俏姑娘,心里跟猫挠似的,不下手尝尝鲜那真是食不甘味、寝不安席。 So,毛毛躁躁上下其手不亦乐乎~ 整理代码时控制台报了一个警告: ``` ✘ http://eslint.org/docs/rules/brace-style Closing curly brace does not appear on the same line as the su...


关于vue告警:Infix operators must be spaced

vscode环境开发vue-cli脚手架工程,eslint规范检查工具告警笔记 # 告警 告警内容: ``` ✘ http://eslint.org/docs/rules/space-infix-ops Infix operators must be spaced src\components\question.vue:83:35 console.log(this.g_qid+" : "+score) ...


关于vue告警:Strings must use singlequote

vscode环境开发vue-cli脚手架工程,eslint规范检查工具告警笔记 # 告警 告警内容: ``` ✘ http://eslint.org/docs/rules/quotes Strings must use singlequote src\components\question.vue:126:18 var body = "result=" + JSON.stringify(g_answer); ^ ``` ...


关于vue告警:More than 1 blank line not allowed

vscode环境开发vue-cli脚手架工程,eslint规范检查工具告警笔记 # 告警 告警内容: ``` ✘ http://eslint.org/docs/rules/no-multiple-empty-lines More than 1 blank line not allowed src\components\question.vue:138:1 ^ ``` 这行警告的关键信息: ``` More than 1 blank line not ...


关于vue告警:Missing space before function parentheses

vscode环境开发vue-cli脚手架工程,eslint规范检查工具告警笔记 # 告警 告警内容: ``` ✘ http://eslint.org/docs/rules/space-before-function-paren Missing space before function parentheses src\components\question.vue:70:10 mounted() { ^ ``` 这行警告的关键信息: ...


vue eslint报错:Unexpected newline between function and ( of function call no-unexpected-multiline

vue eslint报错:Unexpected newline between function and ( of function call no-unexpected-multiline ``` Failed to compile. ./src/components/welcome.vue Module Error (from ./node_modules/eslint-loader/index.js): E:\code\cli_wz\sa\src\components\welc...


vue-cli脚手架工程目录架构分析

使用npm在线初始化方式可以快速构建一个单页应用工程,俗称vue-cli脚手架。 vue init webpack 之后就可以徜徉在代码的海洋里。 神曾说:“只因不小心在人群中多看了你一眼,为了不再孤苦思念你的容颜,我决定扒开你的外衣一探究竟。” 神又说:“前端开发的究极奥义?想要的话就给你,去找吧!我把世界上的一切都放在那里!” So,熟悉代码目录结构吧! # 微操作 代码打包 ``` npm run build ``` # 根目录文件夹 | 文件...


vue引入axios发送get或post请求的方法

提到get/post请求交互,话说小编在不用框架时喜欢用原生js封装ajax。但如今既然用了vue就得尝尝axios的味道。 配置使用axios期间报了几次错,所以在这里将错误及过程日志贴一贴。 # 报错、告警 分析 (1)'axios' is not defined 错误信息: ``` ✘ http://eslint.org/docs/rules/no-undef 'axios' is not defined src\components\question.vue:1...


vue配置域名访问,解决“Invalid Host header”问题(杀webcache)

时代在召唤,So,本菜也来赶赶时髦玩玩vue,耶! 小编身为有备案域名的男人,玩vue自然要在公网撩。服务搭好,点开[http://www.yixzm.cn:8080/#/](http://www.yixzm.cn:8080/#/)后一脸懵逼…… ``` Invalid Host header ``` 参考网友的方法[解决vue项目中的“Invalid Host header”](https://www.xuanmo.xin/details/2869),修改`webpack.dev.con...


vscode搭建vue环境方法极速版

vscode搭建vue-cli脚手架,小编整理分享下自己感觉较快捷的方法。 # vue-cli ## 基础环境 vscode官网下载安装:https://code.visualstudio.com/ nodejs(npm初始环境)官网下载安装,并**配置环境变量**:https://nodejs.org/en/download/ ## 打开vscode终端 》左侧边栏 》资源管理器 》 右键空白区域添加文件夹(新建) 》右键文件夹 》选择在终端打开 如图...


PHP+Vue+axios实现一套抑郁症检测题

古人云:知我者,谓我心忧。不知我者,谓我何求。 用小编的话讲,就是无论日子过得有多苦,总有贱人嫌你过的爽。 这许多年来,小编给身边人留下的是乐观,积极,鸡血的印象,经常有耿直Boy赞赏小编在生活工作中不服输的劲头。 然而,不知何时小编猛然发现,过度消极、极度自卑、严重失眠甚至自杀倾向等一系列重度抑郁症临床表现竟然全部出现在小编身上。压抑,想哭,却无法表现表达。30岁的全菜程序员,就是这么绝望…… 抑郁症关注多了,所以对抑郁症测试也产生了兴趣。遂耗费一晚上时间搞了它。 既然是抑郁...


vue脚手架cli关闭eslint

配置项找到这行代码注释掉即可。 ```js //...(config.dev.useEslint ? [createLintingRule()] : []), ``` 配置文件位置(新项目大约在43行): `/build/webpack.base.conf.js`...


vue组件铺满整个屏幕

```css html { height: 100%; } body { height: 100%; margin: 0; padding: 0; } ``` 参考来源: [https://segmentfault.com/q/1010000007689320](https://segmentfault.com/q/1010000007689320)...


整理全菜30篇学习vue和脚手架的笔记

HTML和CSS适应不同终端屏幕的实现(附typecho CSS文件) --- --- DATE: 2017-09-24 14:31:29 CentOS vs Ubuntu 的个人观点: >说明:Cen...


vue element 刷新 echart

一种 vue element 技术栈刷新 echarts 图表的实现方法 # 方法 将 echarts 图封装在子组件,数据由父组件传入。在父组件强制刷新子组件实现echarts数据刷新。 组件强制刷新方法请参考小编昨天的博客[vue使用key实现组件刷新(渲染重置)笔记](https://yixzm.blog.csdn.net/article/details/105118631) # 关键代码 全部代码太多,仅贴和问题相关的关键步骤。 ## 父组件 ```vue...


Vue Element使用less报错 Module not found Error Can't resolve 'less-loader'

Vue Element使用less报错 Module not found: Error: Can't resolve 'less-loader' # 报错1: Element中css源码 ``` &:last-child { margin-bottom: 0; } ``` eslint提示,强迫症受不了啊。 > } expectedcss(css-rcurlyexpected) 解决: 添加 lang="less" 源码: ``` <style lang="les...


vue父子组件通信实现笔记

# 父组件向子组件传递内容 ## 父组件发送: 模板正常绑定方式传值即可 ```html <yixzm :flag="dream"></yixzm> ``` ## 子组件接收: props接收后可直接使用,参考watch函数,method内使用同样是 `this.flag` ```javascript props: { flag: String }, watch: { flag() { console.log(this.flag) } }, ...


vue使用key实现组件刷新(渲染重置)

vue使用key实现组件刷新(渲染重置)笔记 关于这个问题,大佬们提供了很多种组件重置的方法,比如 v-for、key、以及this.$forceUpdate()等。 如这位大佬将 v-for和key的方法讲的很详细,额 我猜了一个原创链接:https://www.cnblogs.com/zyulike/p/12036456.html 参考原文(转载):https://blog.csdn.net/zyx1303031629/article/details/86656785 v-if ...


推荐阅读