vue
文章平均质量分 62
众生皆苦唯有我甜
(̿▀̿ ̿Ĺ̯̿̿▀̿ ̿) 互联网软件开发工程师
展开
-
vue项目基础用法教程(一)
1. 什么是Vue.js?Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。2.安装n安装vue-cli3 & node环境全局安装npm install -g @vue/cli查看vue版本vue -V创建项目原创 2022-05-01 07:00:00 · 12075 阅读 · 1 评论 -
前端项目自动化部署
应用场景通常情况下,项目需要部署上下通常采用下面几种方式以Vue项目为例,打包之后利用指令/工具,利用Scp命令行或FTP将dist目录中的文件上传至服务器Web环境根目录下。利用git服务器,ssh进入web服务器 -> 执行git clone或git pull将项目克隆至服务器 -> 执行npm install -> 执行npm run build。以上两种方式都不是最优解,第一种方式操作步骤繁琐;第二种服务器需要安装node&git环境,并且多了原创 2022-03-29 16:36:04 · 10032 阅读 · 0 评论 -
vue项目基础用法教程(二)
创建项目vue-cli脚手架生成项目vue create 项目名称配置参考vue-router配置vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。我们可以访问其官方网站对其进行学习: https://router.vuejs.org/zh/1. 安装vue-router(创建项目时若已勾选vue-router请忽略)npm install vue-router --save2. 创建路由实例一般在src目录下创建router原创 2022-03-28 14:00:17 · 7541 阅读 · 0 评论 -
vue移动端开发h5基础配置
移动端项目中开发基础配置简介:仅针对于vue项目基础配置,但也适用于类似框架vue项目搭建项目初始化vue2.0vue init webpack <项目名称>基础配置依据个人爱好,这里直接省略vue3.0vue create <项目名称>基础配置同样省略vue3.0需要在根目录创建vue.config.js这里有一篇关于vue-cl...原创 2020-04-17 14:06:33 · 1035 阅读 · 2 评论 -
vue组件(父子,兄弟)间传值调用方法
父组件向子组件传值1.1.在父组件App.vue中引入子组件<script>import v-header from "@/component/header.vue" export default { components:{ v-header }}</script>1.2.父组件App.vue调用子组...原创 2019-12-26 17:16:36 · 410 阅读 · 0 评论 -
表格实现拖拽换位
1.EemenetUihttps://element.eleme.cn/#/zh-CN/component/table引入draggableimport draggable from 'vuedraggable'html<el-table id="otable" :data="tableData" border row...原创 2019-11-29 14:23:34 · 590 阅读 · 0 评论 -
vue点击按钮复制,分享链接给好友
1.下载模块vue-clipboard2npm i vue-clipboard2 -s2.main.js中引入import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)3.vue页面使用方法html部分<input type="text" v-model="message"> <butto...原创 2019-11-04 17:55:04 · 21908 阅读 · 0 评论 -
Do not use built-in or reserved HTML elements as component id: main
解决:组件名不能和html标签重复,main 和html部分ID名重复!修改其一即可原创 2019-11-04 15:53:21 · 4480 阅读 · 0 评论 -
跨域解决方案-ngnix反向代理完美解决(1)
近期在项目中,由于后端重定向两次接口,前端直接拿回响应时间较长,所有在这里做一次跨域。小节一下。什么是跨域?跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议,端口,域名。类型实例协议跨域http://www.baidu.com访问https://www.baidu.com端口跨域http://www.baidu.com:8080访问http...原创 2019-10-15 18:38:13 · 372 阅读 · 0 评论 -
vue真机模拟神器移动端控制台vConsole
首先下载模块cnpm i vconsole -s;然后在main.js中引入模块import VConsole from 'vconsole'const vConsole = new VConsole()console.log(vConsole.version)完工,加油小伙伴们。原创 2019-10-08 13:50:53 · 769 阅读 · 0 评论 -
解决Vue启动报错 npm ERR! @1.0.0 dev: node build/dev-server.js
首先我们要明白报错的原因是这个项目的启动端口被占用。所以需要我们重新拿回这个端口或者换个端口启动项目。报错截图解决方案1:在config目录下index.js中修改port的值 。解决方案2:打开任务管理器找到被占用的端口 关闭应用。点进程>>找到对应PID关闭即可...原创 2019-09-28 14:24:04 · 21166 阅读 · 0 评论 -
前端Vue框架-vuex状态管理详解
vuex的理解采用集中式存储管理模式。用来管理组件的状态,并以自定以规则去观测实时监听值得变化。vuex安装引入使用前需要下载vuexnpm install vuex --save在我们的main.js文件中引入该文件,在文件里面添加 import store from ‘./store’;,再在vue实例全局引入store对象;import Vue from 'vue'imp...原创 2019-09-19 15:36:27 · 384 阅读 · 2 评论 -
Vue之富文本编辑器—vue-quill-editor
1.首先下载 npm i vue-quill-editor -s2.安装依赖 npm i quill -s3.配置main.jsimport Vue from 'vue'import App from './App'import router from './router'import VueQuillEditor from "vue-quill-editor"import ...原创 2019-08-05 17:33:47 · 236 阅读 · 0 评论 -
webpack打包时,html出现路径问题
在webpack打包时,npm run build 访问里面的index首页,发现路径不对,有时候是空白页。解决方法:在config下面的index.js把 assetsPublicPath: ‘/’, 修改为: assetsPublicPath: ‘./’,ttf .woff .woff2.img路径错误解决方法:在build下面的webpack.base.conf.js把...原创 2019-08-12 17:16:45 · 797 阅读 · 0 评论 -
vue cli3.0+ts学习心得
占坑 后续更新原创 2019-08-26 18:51:55 · 332 阅读 · 0 评论 -
Nodejs本地部署项目
介绍一个简易的方法,用来检查打包的项目是否可正常部署。1.首先压缩vue或react等项目,生成dist目录。如图2.下载安装http-server镜像文件npm install http-server -g(windows下)sudo npm install http-server -g(linux和mac下)3.进入dist目录,控制台执行http-servercd dist...原创 2019-08-27 11:08:12 · 2415 阅读 · 1 评论 -
修改文件内所有文件的指定字符串方法
前段时间,公司临时需求从网上爬下来一个官网,几百个html页面,一个一个修改显然不现实,指令修改有点小问题。最后通过webstorm开发工具指令完成,webstorm真的强大。快捷方式如下:查找上一个shift+F3文件内代码替换ctrl+R指定目录内代码批量替换ctrl+shift+R指定目录内代码批量查找ctrl+shift+F目录下所有文件指定代...原创 2019-09-02 17:40:04 · 280 阅读 · 0 评论 -
app手机端h5查看控制台
在html head中插入以下代码<script src="//cdn.jsdelivr.net/npm/eruda"></script><script>eruda.init();console.log('控制台打印信息');</script>之后在手机上打开app时界面上会有一个可移动的设置的图标,点击图标,控制台就会显示...原创 2019-09-04 13:42:15 · 5275 阅读 · 2 评论 -
配置vue不同环境配置不同打包命令
不同环境如何配置地址请查看环境切换1:安装cross-envnpm i --save-dev cross-env//npm i --save-dev cross-env //淘宝镜像下载2:安装cross-env在config目录下创建test.env.js和pre.env.js修改prod.env.js中的内容,如下'use strict'module.exports =...原创 2019-09-04 14:17:17 · 671 阅读 · 0 评论 -
项目版本更新,浏览器缓存问题解决方案
打包项目更新到服务器时可能会存在缓存问题,需要在服务器中进行配置。location = /index.html { add_header Cache-Control "no-cache, no-store";}no-cache, no-store可以只设置一个no-cache浏览器会缓存,但刷新页面或者重新打开时 会请求服务器,服务器可以响应304,如果文件有改动就会响应200...原创 2019-09-10 13:53:00 · 2778 阅读 · 0 评论 -
Error in v-on handler: "TypeError: handler.apply is not a function"
报错截图原因vue但文件中data属性和methods里的方法重名。解决修改重新命名即可原创 2019-09-10 14:13:35 · 16006 阅读 · 2 评论 -
强烈推荐!Vue知识总结,面试必备
今天工作不是很忙,简单做下Vue总结。1.vue全家桶指定的是什么?答:vue(整体架构)+vuex(状态管理)+vue-router(路由)+vue_resource || axios(数据交互)+各种ui。pc端ui:antd-vue || element-ui等.移动端ui:mint-ui || Vant 等. 2.v-model是什么?如何使用?vue中标签怎么绑定事件?答:...原创 2019-09-17 15:20:26 · 200 阅读 · 0 评论 -
局域网内访问vue项目
1.首先获取本地IP地址2.在vue项目中的config文件中的index.js内,将host的配置改为本地的IP。如3.在vue项目中的package文件中,在script内的dev中加入 – host 本地IP。如3.重启项目 npm run dev 。然后通过访问本地ip+端口号就可以局域网内访问了。...原创 2019-07-31 19:05:34 · 658 阅读 · 0 评论