407指导员

watch中监听vuex中state改变监听不到

vue项目打包分包和加hash值

axios模块的封装组件里使用axios<template><h2>{{categories}}</h2></template><script> import axios from "axios"; export default { name: "HelloWordVue", data() { return { categories: '' } }, cr

store文件夹的目录结构我们之前的store下的index文件很杂乱，不仅有store对象还有模块的对象，我们可以将其抽离开来state不用抽离共有状态还是放到index里mutations抽离import {INCREMENT, DECREMENT} from "./mutations-types"export default { //方法,默认就有一个参数是state [INCREMENT](state) { state.counter++ }, [DECREM

modules使用详解首先在唯一的store对象里注册modulesmodules: { a:moduleA}然后创建modulesconst moduleA = { state: { name: 'A' }, mutations: { updateName(state) { state.name = 'qwer' } }, getters: { fullName(state) { return state.nam

actions的使用详解为何要有actions环节我们之前学了vuex状态管理，组件可以引用state，但是不能直接修改state,比如发送操作到actions，在此执行异步操作，然后再提交mutation来修改state.如果没有异步操作可以直接提交到mutation跳过actions步骤。在mutation这里devtools插件可以用来监控state状态改变记录。如果有异步操作不通过actions直接到mutations就会无法捕捉。所以mutaions中的方法必须是同步方法，不能有异步操作

Mutation的响应规则（数据的响应式原理）当我们在state里添加属性时，都会被添加到响应式系统中，响应式系统会监听属性的变化，当属性发生变化时，会通知所有页面中用到该属性的地方，让界面发生刷新后添加的属性由于之前没有在store里初始化，我们就无法监听该属性，界面不能刷新。我们如何让新增属性也变成响应式呢之前在数组地方我们学过了vue.set方法，该方法不仅能在数组里使用，这里也可以。 updateInfo(state) { //state.info.name='qcl'

Mutations理解Mutations状态跟新mutations: { //方法,默认就有一个参数是state increment(state) { state.counter++ }, decrement(state) { state.counter-- }},上边的increment和decrement就是字符串的事件类型后边的紧跟函数就是回调函数,默认state为第一个参数Mutations参数传递addCount(count) { t

state单一状态树的理解将所有需要管理的信息放到一个store里管理getters使用详解可以理解为计算属性。假如我们state里保存的还有其他复杂状态//共享状态state: { counter: 100, student:[ {id:110,name:'why',age:18}, {id:112,name:'why2',age:28}, {id:113,name:'why3',age:38}, {id:114,name:'why4',age:48

Vuex概念和作用解析所谓状态可以理解为变量，变量里保存了状态，我们多个组件需要共享一个状态，那么这个状态到底放到哪里合适呢？我们肯定抽离出来为一个单独对象，这就是状态管理管理什么状态呢比如：多界面的登录状态，用户信息，购物车里商品，收藏物品等单页面状态管理<template> <div id="app"> <h2>{{message}}</h2> <h2>{{counter}}</h2>

文件路径别名问题vue-cli3里需要在根目录下配置vue.config.js文件module.exports = { //先写一个configureWebpack 表示你准备配置webpackConfig configureWebpack: { //配置路径相关的时候用resolve 可以解决路径相关的问题 resolve: { //别名ps：.vue等相关的其实已经写了，这里只需要写我们自己需要的 alias: { //默认有@ 他指

tabbar的组件封装对于组件的抽离，我们可以进行分析，整个下部分选项卡，肯定是可复用的，不同地方都要使用，我们将TabBar抽离成一个组件。接下来，那么我们选项卡数目是否固定呢，内容是否固定呢，答案肯定是不，我们选项卡不能写死，也抽离出来每一个单独的，每一个选项为一个单独的item那我如何确定它在TabBar里边有多少个item呢，那就使用插槽，预留出一个位置，开发者实际需要几个item就使用几个。每个item其是又是图片和文字组成，我们也不能直接写死，留下具名插槽，分别对应文字和图片。我们

vue-router与keep-alivekeep-alive是vue内置的一个组件，可以使被包含地组件保留状态，或避免重新渲染。router-vue是vue-router里注册地组件，我们之前学了它是一个占位符，如果 被包裹在keep-alive里边，所有路径匹配到地视图组件都会被缓存我们知道vue生命周期，里边有很多的回调函数，当到不同的阶段会执行对应的回调函数。那一个vue实例何时开始和结束呢，我们在Home.vue里自定义该回调函数/*创建组件时会进行回调的*/created() {

vue-router全局导航守卫常见的生命周期函数/*创建组件时会进行回调的*/created() {},/*将template挂载到整个dom上时进行回调的*/mounted() {},/*当界面进行刷新时进行回调的*/updated() {}发现一个问题就是我们使用编程式导航时，如果多次点击同一个路由，会发生报错。1.编程式导航和声明式导航区别]具体可以去官网：https://router.vuejs.org/zh/guide/essentials/navigation.h

vue-router-路由嵌套使用{ path: '/home', name: 'Home', component: Home, children:[ { path:'news', component:()=>import(/* webpackChunkName: "news"*/ '../components/HomeNews.vue') }, { path:'message', component:()=&g

vue-router打包文件解析这些文件app.js当前应用开发的所有业务代码 都会打包到此vendors.js第三方的这些框架之类的东西about.js就是路由懒加载打包的文件但是我们有很多页面，就有很多业务逻辑，默认打包到一个js文件里，会导致app.js越来越大，我们希望的是一个路由打包一个js文件，如果打包在一起我们请求js资源会十分卡顿，分开之后，我们需要什么页面，就请求什么js,这就是懒加载。路由懒加载路由懒加载的方式{ path: '/about', nam

动态路由比如我们有时进入一个路由，不同人进入，可能路由需要不同，这个时候就需要动态路由，路由不固定。​ 增加一个User.vue<template> <div> <h2>我是用户界面</h2> <p>用户相关信息</p> </div></template><script> export default { name: "user" }<

通过代码跳转路由<template> <div id="app"> <div id="nav"> <!-- <router-link to="/" >Home</router-link> | <router-link to="/about" >About</router-link>--> <button @click="homeClick">首

vue-router配置//导入vueimport Vue from 'vue'//配置路由相关信息信息import VueRouter from 'vue-router'import Home from '../views/Home.vue'//1.通过Vue.use（插件）,安装插件Vue.use(VueRouter)//2.创建VueRouter对象const routes = [ { path: '/', name: 'Home', component

url的hash和HTML5的historylocation.hash通过该方法来修改url，不会刷新浏览器，通过前端路由即可访问到对应页面。history模式pushState()history.pushState()三个参数，第一个是个对象，第二个是title,第三个是url.history.back()方法，返回栈顶的url，相当于左箭头，右箭头就是将url压入栈结构。replaceState()该方法和上边方法参数一样。该方法是替换网址，而不是存入栈里，不会有历史记

什么是路由和其中映射关系什么是路由呢路由就是通过互联的网络把信息从原地址传输到目的地址的活动映射表就是，地址和电脑之间的映射关系后端路由阶段（服务端渲染）之前web开发都是采用jsp/php等语言开发网页，并没有使用js，我们请求一个网址，将url发送到服务器，服务器会利用jsp技术，将页面渲染完毕，发送给你浏览器，在后端就完成了渲染每一个url都会有一个对应的jsp网页，不同请求，返回不同的页面这样其实在服务器已经形成一中映射关系，一个url对应一个页面。后端处理URL和页面之间

vue-cli3配置查看和修改方式一：启动配置服务器vue ui导入插件依赖vue-template-compiler和vue版本必须对应实际的版本是在node_modules里vue的dist文件夹下vue.esm.js版本，发行版本项目配置webpack配置修改。启动运行时编译就是之前说的compiler和only版本任务在ui界面启动项目，由数据分析方式二：在node_modules里寻找之前的配置文件配置文件都在，只是隐藏起来了方

vue CLI3创建项目vue creat 项目名（不要大写）报错说版本过旧，删除C:\Users\用户名下的.vuerc即可步骤上边的默认配置，下边手动配置手动界面，上下键移动，空格选中，这里去掉eslint只选择babel是否将关于babel，eslint的配置放置到一个单独配置文件，还是将其放入package.json是否将刚在创建的配置保存为自定义配置，下次创建直接选择如果要删除默自定义的配置，还是去删除.vuerc文件里的相关配置移除了

runtime-compiler和runtime-only区别runtime-compiler里的main.js// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'Vue.config.

vuecli-CLI2目录结构解析先看package.json"name": "vuecli2test","version": "1.0.0","description": "test vue cli2","author": "lcq <2226298119@qq.com>","private": true,"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev

vuecli-脚手架介绍和安装安装Vue脚手架3首先查看vue脚手架版本vue -V查看vue版本npm list vue安装npm install @vue/cli@3.2.1 -g拉取vue2模板npm install @vue/cli-init -g用vue-cli2创建项目vue init webpack 文件夹名字直接回车默认是文件夹的名字，也可以自定义项目名项目描述作者，可以去c盘用户下自己用户名.gitconfig文件里修改之前

webpack配置Plugin配置版权信息（自带）导入webpack模块在webpack.config.js里/*导入webpack*/const webpack = require('webpack');在model.exports里配置/*配置插件*/plugins:[ new webpack.BannerPlugin('最总版权归lcq所有'),]打包index.html文件（HtmlWebpackPlugin）安装插件npm install html-webpac

webpack配置vuenpm时加上-dev,是开发时依赖，运行时依赖就直接–save不加-dev.npm install vue@2.5.21 --save–save可以简写-S,一个横杠加大写S然后在mian.js里引入//使用vue进行开发import Vue from 'vue'const app = new Vue({ el: '#app', data: { message: 'hello webpack' }});然后执行npm run buil

webpack-es6转es5的babelnpm install --save-dev babel-loader@7.1.5 babel-core@6.26.3 babel-preset-es2015@6.24.1我们在开发过程中使用到es6语法，但是考虑到兼容性问题，需要将es6语法转为es5配置webpack.config.js/*配置es6转es5*/{ test:/\.js$/, /*排除以下文件夹转换*/ exclude:/(node_modules|bower_comp

webpack图片处理如果在css文件中，背景设置成图片，我们直接通过之前步骤配置css,然后就会报错，图片又需要对应的loader进行配置。直接在css中运用图片，以及添加了依赖。url-loader配置第一步安装url-loadernpm install url-loader@1.1.2 --save-dev第二部在webpack.config.js的rules添加{ test: /\.(png|jpg|gif|jpeg)$/, use: [{ loader:'url-l

loaderwebpack中使用css文件配置如果需要使用css文件，同时又不想将每一个css文件都依次加入html,我们只想要一个入口main.js放入html，首先要在main.js里引入所需的css文件/*依赖css文件*/require('./css/normal.css')有依赖才会去寻找对应的css文件，才会去使用对应的loader如果不指定版本，就会安装最新的。css-loader的安装解析css文件，使用import加载，并且返回css代码npm instal

webpack.config.js配置在项目所在目录创建一个webpack.config.js配置文件/*导入path模块*/const path = require('path');module.exports = { /*入口*/ entry: './src/main.js', /*出口*/ output: { /*绝对路径，动态获取,第一个参数获取当前文件所在路径，我们要放到dist文件夹下*/ path: path.resolve(__dirname,'di

前端模块化webpack基本使用过程首先通过node安装不用细说了。首先我们有计算属性的mathUtils.jsfunction add(num1,num2) { return num1+num2;}function mul(num1,num2) { return num1*num2;}module.exports = { add, mul}个人信息info.sexport const name = 'lqj';export const age = 18;ex

插槽的基本使用（slot）组件的插槽：组件的插槽也是为了让我们封装的组件更加具有扩展性。让使用者可以决定组件内部的一些内容到底展示什么。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>slot基本使用</title></head><body><div id="app"> <cpn

父子组件的访问方式父访问子方式一：$children​<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>$children</title></head><body><div id="app"> <cpn></cpn> <cpn></cpn&gt

父子通信结合双向绑定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <cpn :cnum1="num1" :cnum2="num2"></cpn></div><te

字串父通信（自定义事件）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自定义事件</title></head><body><!--父组件模板--><div id="app"> <!--父组件接收事件--> <cpn @itemclick="cpnClic

父向子通信（propos基本用法）方式一（字符串数组）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>父传子</title></head><body><div id="app"> <cpn :cpeople="people" :cmessage="message"></c

组件不能访问Vue实例里的数据vue组件有自己的data<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>分离写法</title></head><body><div id="app"> <cpn1></cpn1></div><!--1.抽离模

组件模板抽离写法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>分离写法</title></head><body><div id="app"> <cpn></cpn> <cpn2></cpn2></div><!--2.