VUE - 技术教程文章
vue+webpack新项目总结1【代码】【图】
头部组件的 标题 根据不同的页面显示不同的标题第一步： 在store 里面初始化全局变量// vuex 通过状态管理数据 import Vue from ‘vue‘ import Vuex from ‘vuex‘ Vue.use(Vuex)const store = new Vuex.Store({state: {// 公共 comm: {loading: false,login: {memberId: ‘‘,userData: ‘‘},indexConf: {isFooter: false, // 是否显示底部isBack: false, // 是否显示返回title: ‘‘ // 标题 }}},mutations: {/*...
vue 编译大量空格警告问题总结 warning: Replace `??` with `··`【图】
1、vue开发中发现最后越来越多的编译警告，如 warning: Replace `??` with `··` (prettier/prettier) at src/views/shebei/shouye.vue:554:1: 最终排查得出结论，是编写代码，空格问题，（代码和编辑器左边有空格导致），css html 都会导致，必须确保左边空额不能有 截图如下： 正确的编码样式： 编译控制台报错警告信息 vue 编译大量空格警告问题总结 warning: Replace `??` with `··`原文：https://www.cnblogs.com/pxjbk...
vuex的理解
希望能帮到需要的童鞋. vuex: 单一状态树,用一个对象就包含了全部的应用层级状态.作为项目的唯一一个 数据源ssot存在. state和getters A. getters可以看作是state的计算属性.但都是写在store中,都是用来存储数据的. (getters的意义在于,直接在store中对需要的state进行逻辑处理,而不用每个组件引用的时候 都处理一遍) B. 在组件中都是通过计算属性获取store中的数据,而mapGetters和mapState, 是用来辅助生成计算属性的...
vue 学习笔记（一）
Vue.js在设计上使用MVVM模式。通过MVVM的模式拆分为视图和数据两部分，并将其分离。因此，你只需关心数据即可，DOM的事情Vue会帮你自动搞定。Vue的生命周期钩子比较常用的有：created 实例创建完成之后钓鱼，此阶段完成了数据的观测等，但尚未挂载，$el还不可用。在需要初始化处理一些数据时会比较有用mounted el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始beforeDestroy 实例销毁之前调用。主要解绑一些使用addEve...
Vue日常报错【代码】【图】
报错信息：Error: Cannot find module ‘webpack/bin/config-yargs‘at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)at Function.Module._load (internal/modules/cjs/loader.js:506:25)at Module.require (internal/modules/cjs/loader.js:636:17)at require (internal/modules/cjs/helpers.js:20:18)at Object.<anonymous> (E:\MIKEY\WebStromWorkSpace\TestWebpackVue\node_modules\webpack-dev-...
vue前后端交互方式【代码】【图】
1、大纲2、前后端交互方式3、Promise使用异步JavaScript的执行环境是「单线程」所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。-* 这个任务可称为主线程异步模式可以一起执行多个任务，但多次异步调用的顺序不确定，不是按照我们写代码的顺序得到结果如果异步调用结果存在依赖，代码需要嵌套JS中常见的异步调用定时任务...
vue2.0：（三）、项目开始，首页入门（main.js，App.vue,importfrom）【代码】【图】
接下来，就需要对main.js App.vue 等进行操作了。 但是这就出现了一个问题：什么是main.js，他主要干什么用的？App.vue又是干什么用的？main.js 里面的import from又在干嘛？newVue（{}）是干嘛的？里面又需要什么参数，它到底能干什么。在网上搜了一篇博文，解答一些初级的困惑。一、什么是main.js?里面一般都是些什么内容？ 1、 main.js 程序入口文件，是初始化vue实例并使用需要的插件,加载各种公共组件.import Vue...
解决新版本webpack vue-cli生成文件没有dev.server.js问题【代码】
新版本webpack生成的dev.server.js 在webpack.dev.conf.js中webpack.dev.conf.jsconst axios = require(‘axios‘) const express = require(‘express‘) const app = express() const apiRoutes = express.Router() app.use(‘/api‘, apiRoutes)然后找到devserver 这里可以配置路由devServer: {before (app) {app.get(‘/api/getDiscList‘, function (req, res) {res.json})}, 原文：https://www.cnblogs.com/luxiaoyao/p/8733...
vue_钩子函数【代码】
beforecreate : 举个栗子：可以在这加个loading事件; created ：在这结束loading，还做一些初始化，实现函数自执行; mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情; beforeDestroy： 你确认删除XX吗？ destroyed ：当前组件已被删除，清空相关内容;created()：在创建vue对象时，当html渲染之前就触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次；activated()：在vu...
Vue 路由传递参数【代码】【图】
https://blog.csdn.net/crazywoniu/article/details/80942642 Vue 路由传递参数与 Vue传递参数不同 vue-router传递参数分为两大类编程式的导航 router.push声明式的导航 <router-link>编程式的导航 router.push编程式导航传递参数有两种类型：字符串、对象。字符串字符串的方式是直接将路由地址以字符串的方式来跳转，这种方式很简单但是不能传递参数：this.$router.push("home");对象想要传递参数主要就是以对象的方式来写，分为两...
Vue项目中的跨域问题（开发环境、生产环境）【代码】【图】
刚工作两个月，公司项目的代码还没接触明白，今天偶然看到了前端项目中vue.config.js对于后台接口的配置 devServer: {port: port,open: false,overlay: {warnings: false,errors: true},proxy: {[process.env.VUE_APP_BASE_API]: {target: `http://localhost:8080/ShaoxingBackend/`,changeOrigin: true,pathRewrite: {[‘^‘ + process.env.VUE_APP_BASE_API]: ‘‘}}}// after: require(‘./mock/mock-server.js‘)},proxy应该是...
vue-use echart【代码】【图】
npm install echarts --save然后在需要引用的组件中引入echartvar echarts = require("echarts");mounted:function(){this.init();console.log(123)},methods:{init:()=>{var echarts = require(‘echarts‘);// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById(‘main‘));// 绘制图表myChart.setOption({title: {text: ‘ECharts 入门示例‘},tooltip: {},xAxis: {data: [‘衬衫‘, ‘羊...
vue去掉地址栏里的#【图】
vue地址栏#长这样 地址栏中，经常出现#，是什么作用，能不能去掉？ 地址栏有两种模式：hash模式：地址栏包含#，#之后的不被获取history模式：具有对url历史进行修改的功能 在微信支付，分享url作为参数传递时，url不能满足需求，因此在实际项目中，一般是修改为history模式history有个问题，就是在刷新之后，或者页面不存在时，会出现404；因此需要后台配合，处理404的问题 核心代码如下： 原文：https://www.cnblogs.com/cheny...
Vue成绩单【代码】
<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><title>vue成绩单</title><style type="text/css">*{margin:0; padding:0; }.report_card{width:800px;margin:0 auto;font-size:12px;}.report_card table{width:100%;border-collapse: collapse;text-align:center;}.report_card caption{font-size:14px;text-align:left;line-height:30px;font-weight:bold;}.report_card table th,.report_card table td{...
Vue风格指南总结【代码】
优先级 A：必要的这些规则会帮你规避错误，所以学习并接受它们带来的全部代价吧。这里面可能存在例外，但应该非常少，且只有你同时精通 JavaScript 和 Vue 才可以这样做。(1)组件名应该始终是多个单词的，根组件 App 除外组件名为多个单词 必要组件名应该始终是多个单词的，根组件 App 除外。 这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。 反例Vue.component(‘todo‘, {// ...})...
简单介绍一下vue2.0【代码】【图】
VueVue是用于构建用户界面的渐进框架。作者尤雨熙特别强调它与其他的框架不同，Vue是渐进式的框架，可以逐步采用，不必一下就通过框架去重构项目。 另外Vue的核心库只专注于视图层，这样就更容易与其他库或现有项目进行集成，也更灵活。650) this.width=650;" src="/upload/getfiles/default/2022/11/5/20221105025430470.jpg" title="vue.png" width="700" height="345" border="0" hspace="0" vspace="0" />Vue在兼容性上不支持...
vue-cli项目结构分析【图】
总体框架一个vue-cli的项目结构如下，其中src文件夹是需要掌握的，所以本文也重点讲解其中的文件，至于其他相关文件，了解一下即可。文件结构细分1.build——[webpack配置]build文件主要是webpack的配置，主要启动文件是dev-server.js，当我们输入npm run dev首先启动的就是dev-server.js，它会去检查node及npm版本，加载配置文件，启动服务。2.config——[vue项目配置]config文件主要是项目相关配置，我们常用的就是当端口冲突时配...
vue 框架谷歌浏览器滚动条样式【图】
// 谷歌浏览器滚动条只需要在vue-element-admin-master\src\styles\index文件中写入下面代码即可::-webkit-scrollbar { width: 8px; height: 8px; background: transparent;}::-webkit-scrollbar-thumb { // 滑块部分 background: transparent; border-radius: 4px;}:hover::-webkit-scrollbar-thumb { // 轨道部分 background: hsla(0, 0%, 53%, 0.3);}:hover::-webkit-scrollbar-track { background: hsla(0, 0%, 53...
Vue生命周期中mounted和created的区别
一、什么是生命周期？Vue中实例或者组件从创建到消灭中间经过的一系列过程二、created和mounted区别？ created--在模板渲染称html或者模板编译进路由前调用created mounted--已完成模板已经渲染或el对应渲染后 created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。 原...
使用vue-cli搭建vue项目问题解决方案【图】
工欲善其事必先利其器,安装所需环境node和npm的安装 首先需要安装node环境，直接到官网下载安装包 https://nodejs.org/zh-cn/ 安装node默认安装npm， 不需要重复安装npm。安装完成后，可以命令行工具中输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功。下载dev-tool工具 为了以后调式做准备 https://github.com/vuejs/vue-devtools#vue-devtools安装全局vue-cli脚手架 npm install -g vue-cli 出现如下问题： npm ins...
Vue.js入门
Vue.js入门Vue.js是什么是一个渐进式JavaScript快速开发框架、学习之前需要掌握的基础知识有：HTML、CSS、JavaScript、AJAX。它可以简化Dom操作（DOM(HTML Document Object Model)是什么），有响应式数据驱动特性。了解一个框架最好去看一下它的官网：Vue.js官网面向初学者的教程可以看看这里：4个小时带你快速入门vueAPI接口环境安装教程网上有很多了，直接去搜索即可。IDE选用WebStorm。标签v-text：作用是设置标签的文本值(text...
px2rem-loader（Vue:将px转化为rem，适配移动端）【代码】
1：使用的是vue-cli+webpack，通过npm来安装的npm i lib-flexible --save2：在main.js中引入lib-flexibleimport ‘lib-flexible/flexible‘3：通过meta标签，设置设备宽度以及缩放比例<meta name="viewport" content="width=device-width, initial-scale=1.0"> 4.安装px2rem-loadernpm install px2rem-loader 5.配置px2rem-loader 在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如：const cssLoader = {loader: ...
VUE新版扫码下单必选分类设置FAQ【图】
使用场景：商家想要设置某些分类下的商品设置必选，否则不能下单。如某火锅店，商家想要设置汤底这个分类下的商品，顾客扫码下单的时候必须选择一份才能下单，此时 就可以使用这个功能配置步骤和注意事项如下：配置步骤（这里的分类以“主食”为例）：一、登录新商家中心（”必选分类”这个功能配置仅在新商家中心支持，老版商家后台不支持） 1、商品管理--开台设置--开台分类--点击添加开台必选分类 2.分类下商品必选份...
Vue+NodeJS+ElementUI 的简单示例【图】
1、演示所使用到的工具：谷歌浏览器、HBuilder、cmd命令窗口、nodejs（自带npm）2、切换到项目中3、使用 vue 命令添加 elementUI的插件(element) 4、选择Fully import(全部导入), 也可以选择 import on demand（按需导入） 回车键确认。5、do you wish to overwrite element‘s SCSS variable (是否希望改写元素的SCSS变量) 6、choose the locale you want to load( 选择要加载的区域) 选择zh-CN回车。7、element插件下载完成。8、...
Vue2.0中的Ajax请求【图】
Vue可以借助于vue-resource来实现Ajax请求 http请求报文浏览器与服务器数据交互是遵循http协议的，当浏览器要访问服务器的时候，浏览器需要将相关请求数据提交给服务器。格式分为：请求报文行、请求报文头、请求空行、请求报文体 http响应报文当浏览器请求服务器的时候，服务器需要将数据返回给浏览器，这种数据是通过响应报文响应会回浏览器的。格式分为：响应报文行、响应报文头、响应空行、响应报文体 HTTP协议约定1、浏览器祥服...
基于Nodejs+Vue+Webpack的前端开发指导
//饿了么官网https://element.eleme.cn/#/zh-CN/component/layouthttps://cn.vuejs.org/v2/guide/class-and-style.html基于Nodejs+Vue+Webpack的前端开发指导安装nodejs，上官网（https://nodejs.org/en/），根据OS系统版本下载。直接安装。安装过程，直接点击“”Next“”。 （安装完毕，会自动添加 X:/program/nodejs目录到环境变量path中）检查： 输入 node -v，是否正常返回nodejs版本信息 输入 npm -v, 是否返回n...
Python前后端分离开发Vue+Django REST framework实战_Django REST framework框架
课程简介： 采用当前流行的前后端分离式开发技术，涉及RESTFul API基础知识和Vue项目结构分析，解决了技术开发单一的痛点，拥有超前的技术融合技能，让你在开发的领域比别人技高一筹！课程重点讲解RESTFul API知识，主要面向后端开发者，为了补充后端同学对前端Vue认知不足，本课程特意简单的讲解了Vue前端项目的结构以及如何调试每个API接口数据。课程由慕课网发布，收集整理于网络，如有侵权，请联系删除！！ 课程目录：第1章 课...
基于Idea从零搭建一个最简单的vue项目【图】
一、需要了解的基本知识node.jsNode.js是一个Javascript运行环境(runtime)，发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快，性能非常好。 Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞I/O模型...
vue中mode hash 和 history的区别
对于 Vue 这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。为了达到这一目的，浏览器当前提供了以下两种支持：hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不...
vue-resource请求，类似ajax【代码】
<template><div><div>vue-resource请求，类似ajax</div><div>----------------------------</div></div> </template> <script>export default{data(){return{}},mounted(){//get请求 ‘/someUrl‘ 是后台地址的数据接口如：someUrl.php 等等this.$http.get(‘/someUrl‘).then(response => { //获取响应数据// get body dataconsole.log(response.body); //输出响应数据}, response => {//error callback});//post请求 ‘...