vue
僵尸C掉了我的脑子
路漫漫其修远兮
展开
-
nuxt命令创建新项目报错
【代码】nuxt命令创建新项目报错。原创 2024-03-27 14:54:04 · 207 阅读 · 0 评论 -
vue父子组件监听watch动态传值
应用场景:一个编辑功能,子组件需要动态监听表单中输入的值进行条件判断将值传给父组件,父组件接受子组件的值并返回给子组件进行赋值(编辑功能的数据回显)在此次功能中,我将子组件的编辑赋值操作放到了mounted中,然而watch中的formData监听则失效了,若放到created中,则会一切正常。父组件中:<template> <div> <el-button type="primary" :disabled="i原创 2021-03-05 14:58:08 · 3214 阅读 · 0 评论 -
移动端vue页面禁止移动/滚动
当需要在移动端中禁止页面滚动,加入:@touchmove.prevent即可,如下:<template <div @touchmove.prevent> <canvas id="xxx" width="300" height="300"></canvas> </div></template>...原创 2020-03-18 11:01:25 · 805 阅读 · 0 评论 -
vue移动端项目在手机上调试
1.电脑和手机要连同一个wifi 一定是复制无线网的IP,而不是以太网的IP2.在你的电脑上查找无线网络的ipv4地址:windows电脑的打开终端:输入ipconfig就可以看到ip地址了mac电脑的打开终端:输入ifconfig就可以看到ip地址了3.在vue中找到config文件 找到host 将host的值localhost或者原地址改为刚才复制的那个ipv4地址即可4.重...原创 2020-03-18 10:12:50 · 1986 阅读 · 0 评论 -
iview table 中根据不同状态改变其文本的颜色
结果展示:代码:{ title: '审核状态', key: 'Review', align: 'center', render: (h,params) => { if(params.row.Review === '已审核'){ return h('span',{ 'style': { 'color': '#2DC8...原创 2019-11-15 15:29:55 · 1274 阅读 · 0 评论 -
vue render 函数进行条件判断,然后创建标签
效果如下所示:要求:在表格中,审核状态为“待审核”时,多出“审核”按钮如下所示进行判断:render: (h, params) => { return h('div', [ h('Button', { props: { type: 'text', ...原创 2019-11-14 14:13:34 · 4064 阅读 · 1 评论 -
vue iview 表格的使用,在一个单元格中赋多个值
在render中定义:tableColumns: [ { title: "123", key: "serialNumber", width: 220, render:(h,params)=>{ return h('div',[ h('s...原创 2019-11-11 16:52:37 · 1161 阅读 · 0 评论 -
报错:npm install vue-router --save-dev
报错信息:新建好的vue项目,可以运行 但是当我要安装 vue-router的时候报错npm ERR! code EACCES npm ERR! syscall access npm ERR! path /Users/thinker/node_modules/_extglob@2.0.4@extglob/node_modules/extend-shallow npm ERR! errno -1...原创 2019-11-09 01:29:07 · 5239 阅读 · 2 评论 -
mac下安装Vue DevTools
1.安装去Vue DevTools 项目的官方主页GitHub上下载。因为直接在Chrome应用商店下载需要翻墙。https://github.com/vuejs/vue-devtools2.安装项目所需的依赖包 — npm 包进入下载好的vue-devtools-dev文件夹的目录,通过命令输入以下代码:yarn install3.编辑项目文件yarn run build4....原创 2019-11-08 15:56:42 · 677 阅读 · 0 评论 -
vue-cli3图形界面
使用如下命令可进入vue-cli3的图形界面vue ui**GUI:**图形界面的缩写原创 2019-09-23 15:16:59 · 770 阅读 · 0 评论 -
安装vue-cli3 脚手架
关于旧版本Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 卸载它。Node 版本要求Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多...原创 2019-09-23 15:08:40 · 492 阅读 · 0 评论 -
MacOS安装npm全局包的权限问题
MacOS,安装npm全局包提示没有写入权限:解决方法:修改npm包所安装目录的权限:sudo chown -R $USER /usr/local 然后输入密码就可以了查看目录是否已切换权限:ls -l /usr/local接下来可以进行npm全局包安装:例如npm install webpack -g...原创 2019-09-15 02:20:19 · 346 阅读 · 0 评论 -
vue3.0 去掉eslint 警告
vue 3.0 新的配置文件默认是vue.config.jsconst path = require('path')const debug = process.env.NODE_ENV !== 'production'module.exports = { baseUrl: '/', // 根域上下文目录 outputDir: 'dist', // 构建输出目录 as...原创 2019-10-11 14:50:21 · 1400 阅读 · 0 评论 -
mac安装报错Error: EACCES: permission denied, access '/usr/local/lib/node_modules
在用 mac 进行安装时会出现如下错误:出现以上错误,原因就是没有权限的问题原因: 执行命令行命令时没有获得管理员权限**解决方案:**在命令行前面添加sudo获取管理员权限,输入管理员密码就行例如原来的是: cnpm install -g @vue/cli应该该为:sudo cnpm install -g@vue/cli 再输入密码就行如下图所示:...原创 2019-09-12 16:53:28 · 3244 阅读 · 0 评论 -
vue-cli3创建项目
创建项目命令vue-cli3: vue create vue-testvue-cli2: vue init webpack vue-test进行相关配置default(babel,eslint) (默认选项,会安装必要的依赖,也将ellint作为必选项也进行安装)Manually select features (手动选项)选择 Manually select f...原创 2019-09-23 15:58:47 · 255 阅读 · 0 评论 -
Vue开发中的事件总线
在Vue开发中会遇到大量的组件之间共享数据的情形,针对不同的情形,Vue有相对应的解决方案。比如,父组件向子组件传值可以使用props,复杂项目中不同模块之间传值可以使用Vuex。但是,对于一些简单的项目里的非父子组件来说,它们一方面不适用props,另一方面又没有必要使用Vuex,针对这种情形可以使用中央事件总线(EventBus)来解决问题。1、创建事件总线可以使用多种形式创建Eve...原创 2019-09-24 11:07:59 · 328 阅读 · 0 评论 -
Vuex的使用
1.安装Vuex包NPM 安装vuexcnpm install vuex -S在一个模块化的打包系统中,您必须显式地通过 Vue.use() 来安装 Vuex:import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)2.创建Vuex实例实例化vuexconst store = new Vuex.Sto...原创 2019-09-24 17:52:13 · 115 阅读 · 0 评论 -
ERROR Invalid options in vue.config.js: "publicPath" is not allowed
刚从远程clone下来的代码,npm run dev后报错,报错信息如下: ERROR Invalid options in vue.config.js: "publicPath" is not allowednpm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! iview-admin@2.0.0 dev: `vue-cli-service s...原创 2019-10-11 11:42:25 · 7216 阅读 · 0 评论 -
【vue】iView-admin后台管理系统
1.目录手册解析: https://lison16.github.io/iview-admin-doc/#/2.预览: https://admin.iviewui.com/login3.基础模板: https://github.com/iview/iview-admin/tree/template原创 2019-10-11 16:34:35 · 2828 阅读 · 0 评论 -
vuex介绍
单向数据流概念页面是由很多个视图组成的,用户的操作会带来视图上一些状态的变化,状态的变化会驱动视图的更新vuex多个视图依赖于同一状态(例:菜单导航)来自不同视图的行为需要变更统一状态(例:评论弹幕)为Vue.js开发的状态管理模式组件状态集中管理组件状态改变遵循统一的规则...原创 2019-06-05 16:09:59 · 163 阅读 · 0 评论 -
把本地项目托管到“码云”中
在进行整个项目的托管前首先要确保有一下几个文件:.gitignore (项目忽略文件),项目中的某些文件没有必要上传到源代码仓库中README.md(描述项目的信息)开源协议将整个项目用 git 进行管理1.创建本地仓库git init此时,文件夹中多了一个 .git 文件2.查看文件状态git status标红的是未提交的3.添加项目文件git add ....原创 2019-08-29 16:26:32 · 275 阅读 · 0 评论 -
将本地项目上传到 github
创建本地仓库1.确认文件,首先,要确保有一个.gitignore文件2. 进入文件目录,在文件夹中按住shift同时点击鼠标右键选择bash控制台进入3.生成本地仓库git initgit add *git commit -m "init thinkercy"创建远程仓库4.创建远程仓库填入相应的信息后点击创建进行关联将下方所示的关联代码进行拷贝:将上一步拷贝...原创 2019-08-29 12:37:16 · 181 阅读 · 0 评论 -
vue `npm run build`打包后的路由内组件不显示问题
今天做项目的时候,碰到一个问题 很匪夷所思:项目做好后进行npm run build打包项目,结果,出现的问题如下图:下图是页面结构:可知 中间的 <router-view></router-view>部分内容根本就没有显示!!!!终于,经过仔细勘察,终于,被我知道了是什么原因 ~~~~~那是因为 mode:'history', 在 new Router({})...原创 2019-08-28 16:59:34 · 2388 阅读 · 1 评论 -
vue项目打包
vue项目打包步骤终端运行命令 npm run build如此便已打包完成打包成功后即可看见如下图所示的项目文件夹点击index.html,通过浏览器运行,出现以下报错,如图:如此,我们修改相应文件,步骤:1.打开 webpack.dev.conf.js 文件,找到 publicPath: config.dev.assetsPublicPath ,按Ctrl点击鼠标左键,跳转到i...原创 2019-07-20 10:09:36 · 458 阅读 · 1 评论 -
muse-ui使用Bottom Navigation组件刷新后保存点击状态
<template> <div id="app"> <router-view/> <mu-container id="footer"> <mu-bottom-nav :value="bottomNav"> <mu-bottom-nav-item value="/home" to="/h...原创 2019-06-28 16:42:56 · 378 阅读 · 0 评论 -
条件渲染、列表渲染、Class与Style绑定
条件渲染v-ifv-else,v-else-ifv-show<div id="app"> <div v-if="count > 0"> 判断1:count 大于 0,count的值是:{{count}} </div> <div v-else-if="count < 0 && cou...原创 2019-06-04 17:00:20 · 136 阅读 · 0 评论 -
Vue 计算属性与侦听器
侦听器<div id="app"> {{msg}}</div><script> var app = new Vue({ el: '#app', data: { msg: 'hello vue' }, watch: { msg: f...原创 2019-06-04 15:18:05 · 134 阅读 · 0 评论 -
vue调试工具vue-devtools安装
1、下载安装包https://github.com/vuejs/vue-devtools下载后解压2、安装win+r 进入cmd模式,cd到vue-devtools-dev文件下,然后 npm install进行安装,安装成功后执行 npm run build,如下图所示:3、修改文件修改vue-devtools-dev\shells\chrome中的manifest.json文件,...原创 2019-06-05 15:26:30 · 357 阅读 · 0 评论 -
vue-cli工具
查看node版本:node -v查看npm版本:npm -v快速创建工程的两种方法安装vue cli工具npm install -g @vue/cli查看vue cli的版本vue --version第一种创建方式 vue create首先,进入要创建工程的所在目录cd /thinker/vue使用vue create 项目名称创建项目vue create he...原创 2019-06-05 11:46:40 · 154 阅读 · 0 评论 -
vue实现跑马灯效果
分析:1、给【浪起来】按钮;绑定一个点击事件 v-on @2、在按钮的时间处理函数中,写相关的业务逻辑代码:拿到msg字符串,然后 调用字符串 substring 来进行字符串的截取操作,把第一个字符截取出来,放到最后一个位置即可;3、为了实现点击一下按钮,自动截取的功能,需要把步骤2的代码,放到一个定时器中去;创建一个控制区域<div id="app"> <inpu...原创 2019-02-19 16:29:09 · 6110 阅读 · 0 评论 -
认识vue.js
认识vue.js什么是vue.js为什么要学习流行框架框架和库的区别什么是vue.jsvue.js是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,vue语法也是可以用于进行手机App开发的,需要借助于weex)vue.js是前端的主流框架之一,和 angular.js、React.js一起,并成为前端三大主流框架!vue.js是一套...原创 2019-02-16 14:47:06 · 522 阅读 · 0 评论 -
webpack+vue 创建简单项目
安装nodejs用命令行生成vue项目框架需要npm包管理器来安装,而npm又是在安装nodejs的时候同时安装的,所以首先要安装nodejs,学习vue有必要了解下nodejs和npm的基本知识:nodejs安装: http://nodejs.cn/npm 介绍: https://www.npmjs.cn/安装命令行工具npm install -g vue-cli-g表示全局安装...原创 2019-08-23 18:54:46 · 275 阅读 · 0 评论 -
在 vue 中使用sass
1.先换成淘宝镜像再安装npm install -g cnpm --registry=https://registry.npm.taobao.org (安装淘宝镜像)用淘宝镜像快!而且安装的时候减少出错!cnpm install node-sass --save-dev //安装node-sasscnpm install sass-loader --save-dev //安装sass...原创 2019-08-24 11:06:59 · 187 阅读 · 0 评论 -
vue-router 设置默认路由
设置 redirect值,就可以默认显示你想显示的那个路由页面import Vue from 'vue'import Router from 'vue-router'import Content from '@/components/Content'import Doctor from '@/components/comtent/Doctor'Vue.use(Router)expo...原创 2019-08-28 16:37:31 · 4104 阅读 · 0 评论 -
vue 中去掉地址栏中的 #
要去掉vue中访问地址中的#符号可以在路由器中设置路由模式为history:mode:'history',原创 2019-08-28 10:25:53 · 1242 阅读 · 0 评论 -
vue打包后背景图片不显示??
当使用npm run dev命令本地访问的时候,背景图片是正常显示的,可使用npm run build命令打包后,访问dist目录下的项目,页面背景图路径就不对了,显示不出背景图。问题根源在项目开发中可以显示背景图:使用npm run build打包后的项目不显示背景:由上图背景图片链接地址可看出,打包后的文件仍然向http://wap.xxxxxx.com/specialist/st...原创 2019-08-27 20:01:08 · 1103 阅读 · 1 评论 -
Vue-cli 项目打包布署(简单清晰)
1.项目打包前更改项目config配置打开项目的 config > index.js文件修改build对象的assetsPublicPath: 属性值为 './ ' 如下:2.对vue-cli项目进行打包输入npm run build命令 如下:打包完成没有报错的话会在项目文件夹下生成dist文件夹( 需要拷贝布署到服务器的项目包),如下...原创 2019-08-27 18:48:22 · 264 阅读 · 0 评论 -
vue 数组中相对路径的图片 不显示问题
例如:data () { return { img: './../../assets/sec03_1.jpg' //路径也没问题啊,怎么不显示呢,难道他瞎啦! }}在template中:<img :src="img" /> 第一种解决方案是:简单粗暴型 使用绝对路径也就是带上域名即可第二种解决方案是:非常智慧型 代码如下:data ()...原创 2019-08-27 18:10:01 · 1481 阅读 · 0 评论 -
在 vue 中引入 bootstrap
1.安装下载 bootstrapnpm install bootstrap@32.在main.js文件中引入bootstrapimport 'bootstrap/dist/css/bootstrap.min.css'import 'bootstrap/dist/js/bootstrap.min.js'3.测试<ul class="nav nav-pills"> ...原创 2019-08-26 15:06:13 · 216 阅读 · 0 评论 -
在vue中引入jquery
1. 安装 jquerynpm install jquery --save-dev2.在 webpack.base.conf.js 添加内容:const webpack = require('webpack') plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', ...原创 2019-08-26 14:56:37 · 183 阅读 · 0 评论