前端-vue
文章平均质量分 62
前端模块-Vue.js
成茂峰
一枚90后程序猿~
展开
-
vue项目 Editor.md使用示例
本文仅仅简单介绍了Editor.md使用,更多富文本配置及使用方式,参考:https://pandao.github.io/editor.md/有问题私信我!!~~原创 2023-10-09 07:39:56 · 635 阅读 · 1 评论 -
vue项目 ueditor使用示例
本文仅仅简单介绍了ueditor使用,更多富文本配置及使用方式,参考:http://fex.baidu.com/ueditor/#start-config。有问题私信我!!~~原创 2023-10-08 22:36:33 · 1132 阅读 · 0 评论 -
vue-cli 项目 配置全局scss 无需单独引入 各个页面可使用scss函数
配置全局scss 无需单独引入 各个页面可使用scss函数原创 2022-11-15 12:13:26 · 1052 阅读 · 0 评论 -
前端vue开发项目中的技术框架【简单推荐】
PC管理后台类型技术选用: vue + element-ui选择理由:选择vue的原因概述:前端主流MVVM框架, vue相对react写起来更方便,vue比react更容易上手,vue文档完善,社区繁荣,适用于做单页面应用,如:管理后台。1 轻量级框架,体积小2 采用虚拟dom, 运行效率高3 双向数据绑定,使用简便4 生态丰富,学习成本低为什么选择element-UI从 标准(标准化生产)、生态(周边产品,社区繁荣度)、成熟度(完成度与文档)、视觉(设计原创 2020-10-26 11:33:25 · 3593 阅读 · 0 评论 -
vue-qr插件使用 报错You may need an appropriate loader to handle this file type
# 正确的解决方式如下:# 正确的解决方式如下:# 正确的解决方式如下:原创 2022-08-19 17:14:40 · 2832 阅读 · 2 评论 -
官网简单模板 基于vue可生成静态文件(nuxt)
源码地址源码:https://download.csdn.net/download/u012551928/18862084开发环境你可以用vs code也可以用webstorm当你下载项目下来后,在项目目录运行命令行安装依赖npm install运行项目npm run dev开发生成静态npm run generate效果预览废话不多说,看一波效果...原创 2021-05-20 10:38:34 · 1032 阅读 · 3 评论 -
vue-cli 项目添加Axios,请求接口
进入vue-cli4创建后的项目安装axiosnpm install -s axios创建axios实例及请求拦截src下创建一个文件夹api,在这个文件夹下创建http.js(放axios实例),interface.js(放接口)http.js 创建实例代码如下:import axios from 'axios'// 创建axios实例const service = axios.create({ // baseURL: baseUrl, // api 的 base_url原创 2020-10-23 20:18:59 · 2041 阅读 · 1 评论 -
vue-cli4 创建配置文件,并配置运行自动打开浏览器
项目根目录创建一个文件vue.config.js文件vue.config.js配值自动打开浏览器module.exports = { // options... devServer: { open: true }}npm run serve 跑项目看看,发现真的自动打开了,神奇吧!!!...原创 2020-10-23 20:17:07 · 759 阅读 · 0 评论 -
vue-cli4 如何创建带有vue-router vuex scss预编译的项目
安装最新vue-cli4版本脚手架npm install -g @vue/cli创建项目vue create 项目名例如:vue create vue-cli4-demo选择手动配置点击向下方向键,进行选择:“Manually select features” (翻译:手动选择功能)选择要安装的功能点击向下方向键,然后如果想选中某项,就点击空格,即可选中。我们**选择Router(路由), Vuex(状态管理), CSS Pre-processors(CSS预编译器)**这三项原创 2020-10-23 20:15:17 · 864 阅读 · 0 评论 -
vue开发移动端H5 滑动操作 图片闪动
原因是渲染问题。这个问题我是在定时控制图片显示隐藏的时候发现,体验不友好,滑动一下图片就会闪一下!!这个不管你是使用v-if,v-show,还是opacity:0,都无法解决。就是无论是使用微信浏览器,safari等都有这样的不良体验。解决方式:使用css的visibility来解决:<img class="img img-1" :style="{visibility:...原创 2019-07-11 15:42:56 · 1936 阅读 · 0 评论 -
vue基础全——vue简单说
文章目录概念MVVM模式Vue的实现原理Vue的生命周期:概念Vue.js:基于MVVM模式实现的,一套用于构建用户界面的渐进式框架。高级功能:解耦视图可复用组件前端路由状态管理虚拟DOMMVVM模式MVVM:Model-View-ViewModel缩写,即模型-视图-视图模型。整这些虚的,说说能干啥:模型:后台传递过来的数据;视图:显示的页面;视图模型:MVVM的核心,...原创 2019-03-28 09:40:16 · 341 阅读 · 0 评论 -
vue的生命周期——vue简单说
文章目录beforecreate:el 和 data 并未初始化created:完成了 data 数据的初始化,el没有beforeMount:完成了 el 和 data 初始化mounted:完成挂载beforeUpdate:数据修改前updated:数据修改后beforeDestroy:销毁前,解绑监听destroyed:销毁后按照惯例:线上代码,用事实说话:<!DOCTYPE h...原创 2019-03-28 09:36:42 · 500 阅读 · 0 评论 -
vue组件——vue简单说
vue组件:可复用的 Vue 实例,扩展 HTML 元素,封装可重用的代码基础示例:&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;html&amp;amp;amp;amp;原创 2019-03-07 23:18:33 · 384 阅读 · 0 评论 -
vue-router——vue简单说
目录安装前端路由:单页面富应用(SPA)的核心,前端来维护一个路由规则.vue-router:官方定义:是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。安装&amp;amp;amp;lt;script src=&amp;amp;quot;/path/to/vue.js&amp;amp;quot;&amp;amp;amp;gt;&amp;amp;amp;lt原创 2019-03-07 09:54:31 · 264 阅读 · 0 评论 -
vue2 vue-router 在IE下不跳转问题
问题:使用vue-router 在IE下 a标签里的路由不跳转,火狐,chrome工作正常。解决方式:在App.vue 里增加判断IE浏览器手动修复……修改代码如下:src/App.vue<template> <div id="app"> <router-view/> </div></template>...转载 2019-04-26 18:32:26 · 3435 阅读 · 1 评论 -
vuex——vue简单说
文章目录应用场景基本用法安装项目源码学习结构图知识点基础示例mutations 修改数据getters 处理数据actions 异步操作业务逻辑modules 模块分隔应用场景用于非父子组件通信,可以更好的管理整个项目的组件状态。应用于大型单页面应用,更适合多人协同开发。vuex中的store包含了应用的数据(状态)和操作过程。Vuex里的数据都是响应式的,任何一个组件使用同一个store里...原创 2019-03-24 16:51:13 · 304 阅读 · 0 评论 -
vue-cli项目 使用 js-cookie
js-cookie github地址https://github.com/js-cookie/js-cookie使用方式npm install js-cookie --save引入js-cookieimport Cookies from 'js-cookie'使用js-cookie获取cookie对应的值import Cookies from 'js-cookie'// 获取...原创 2019-09-17 15:10:34 · 2183 阅读 · 0 评论 -
vue 安装使用 less
使用vue-cli2创建的项目,如果直接将style标签中添加lang=“less”,会有一堆报错!!!<style lang="less" scoped></style>报错截图如下:安装依赖,命令行进入项目目录,然后执行如下命令:主要用途是:编译lessnpm install less less-loader --save-dev安装完成,报错就没有...原创 2019-07-26 17:53:20 · 391 阅读 · 0 评论 -
vue 安装使用 scss
使用vue-cli2创建的项目,如果直接将style标签中添加lang=“scss”,会有一堆报错!!<style lang="scss" scoped></style>报错如下:需要安装一下一些插件,这些插件的用途是,将scss编译为css命令行进入项目目录,跑一下安装:npm install node-sass sass-loader style-loa...原创 2019-07-26 17:42:15 · 1243 阅读 · 0 评论 -
vue-cli项目 IE运行报错 [vuex] vuex requires a Promise polyfill in this browser.
控制台打印错误如下:[vuex] vuex requires a Promise polyfill in this browser.解决方式:安装 babel-polyfill 。 babel-polyfill可以模拟ES6使用的环境,可以使用ES6的所有新方法npm install --save babel-polyfill修改配置文件:build/webpack.conf...转载 2019-04-26 18:42:30 · 390 阅读 · 0 评论 -
vue-cli 打包出来的项目,scss,less样式里面的背景图无法显示,路径不正确
解决方式:找到项目中的build/utils.js文件,找到如下代码: if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) } else { return ...原创 2019-06-21 09:55:02 · 1536 阅读 · 1 评论 -
webpack插件 mini-css-extract-plugin 图片路径不正确
使用了后报错如上:路径是相对css的路径,导致背景图访问出错!!!解决方式:找到build/util.js文件对应的如下代码: // generate loader string to be used with extract text plugin function generateLoaders(loader, loaderOptions) { const loa...原创 2019-07-11 14:10:17 · 3412 阅读 · 4 评论 -
vue 开发移动端 出现底部被遮住 巨坑
原因:vue中的scss,less中使用了calc来计算高度:例如:height: calc(100vh - 42px);建议使用盒子模型来构建布局!!!原创 2019-07-25 18:12:37 · 5075 阅读 · 5 评论 -
Vue-cli 搭建简单 路由项目
一、环境1. Nodejs安装 1) Nodejs下载地址http://nodejs.cn/download/二、安装1. 安装vue-cli 及构建项目 1) Vue-cli是什么Vue-cli是由vue官方提供的cli,为单页面应用(SPA)快速搭建繁杂的脚手架。 2) 安装安装nodejs环境http://nodejs.cn/download/ ...原创 2018-11-22 11:20:49 · 1015 阅读 · 0 评论 -
vue-cli3 简单实践(一)
文章目录概述官网安装创建项目使用图形化界面使用命令行概述本篇用于学习vue-cli3,你还在使用vue-cli2构建项目吗?是时候使用vue-cli3来秀一下操作了。官网官网地址:https://cli.vuejs.org/zh/guide/安装npm install -g @vue/cli安装完成后,查下版本vue --version检查其版本是否正确 (3.x)底下这个...原创 2019-07-24 18:12:16 · 396 阅读 · 0 评论