项目用到了状态管理工具 Vuex  中文文档:https://vuex.vuejs.org/zh/guide/ 大家都知道,vue中可用props将父组件的数据传递给子组件,但是有个问题,子组件一般不能修改父组件的数据,这时候vuex就派上用场 1.vuex 安装:npm install vuex --save 2.在src中新建一个store文件夹:本人目录结构如下: 3.在main.js 中引入: import store from './store' new Vue({ el: '#app…

记录自己的vue开发之旅,方便之后查询 一.开发环境 1.安装node.js  自带npm https://nodejs.org/en/ 2. 全局安装vue-cli脚手架 npm install vue-cli –g            vue-V 查看版本说明安装成功 3.新建项目文件夹,在该文件夹下进入cmd 输入vue init webpack vue 安装vue-cli         根据提示输入对应的信息,没有特殊要求可一直回车 4.进入根目录 npm install 安装项目依…

开发环境跟脚手架初始完毕后,我们开始配置axios请求后台接口   axios使用说明:https://www.kancloud.cn/yunye/axios/234845 1.本人是在脚手架中的src目录下新建api文件夹,在新建一个fetch.js 文件用来配置axios以及管理后台的接口 2.开始安装axios  npm axios --save 安装 3.下面的代码是封住axios后的请求文件 import axios from 'axios' import qs from 'qs' i…

main.js import Vue from 'vue' import App from './App' import router from './router' import store from './vuex' import Axios from 'axios' Vue.prototype.$axios=Axios Axios.defaults.baseURL="http://www.wwtliu.com" Vue.config.productionTip = false n…

  本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的使用 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,promise是es6里面的用法. axios能做的事情:官网地址 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JS…

在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-server模拟的接口,这个前面的文章中有提到,需要的可以去翻阅. 整个的流程是在组件的created中提交dispatch,然后通过action调用一个封装好的axios然后再触发mutation来提交状态改变state中的数据,然后在组件的计算属性中获取state的数据并渲染在页面上 首先新需要在项…

一.内容回顾 1.webpack(前端中工作,项目上线之前对整个前端项目优化) - entry:整个项目的程序入口(main.js或index.js): - output:输出的出口: - loader:加载器,对es6代码的解析,babel-loader(官网:https://www.babeljs.cn/)是浏览器支持es6, css-loader解析css文件,style-loader 将css代码添加一个style标签插入header标签中,url-loader等等: - plugins…

Vue学习六之axios.vuex.脚手架中组件传值   本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的使用 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,promise是es6里面的用法. axios能做的事情:官网地址 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和…

第一步:安装Node 1.打开NodeJS的官网,下载和自己系统相配的NodeJS的安装程序,包括32位还是64位一定要选择好,否则会出现安装问题. 下载地址:https://nodejs.org/en/download/   我选择的是Window版本64位的安装程序,也有MAC平台的安装程序. 下载完成,如图:   2.接下来就是安装了,安装很简单,直接下一步下一步就可以,但是我也把流程记录下来,给第一次看本教程的人有一个大概的了解. 双击安装文件,如图:   3.点击下一步,选择同意协议,…

一. 组件化开发 1.1 组件[component] 在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js定义功能的特效,因此就产生了一个功能先关的代码把[HTML.css和javascript]封装到一个文件的模式,我们成为“组件”. 组件有两种:默认组件[全局组件] 和 单文件组件 1.1.1 默认组件 <div id="app"> <addnum></addnum> <addnum>&…