11 2022 档案
摘要：安装 npm install --save nprogress 引入 // 引入进度条 import nprogress from "nprogress"; // 引入进度条样式 import "nprogress/nprogress.css"; 使用 const requests=axios.cr
阅读全文
摘要：const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, lintOnSave:false, //代理跨域 devServer:{
阅读全文
摘要：//对axios进行二次封装 import axios from "axios"; // 利用axios对象的方法create，去创建一个axios实例对象 const requests=axios.create({ // 基础配置 // 基础路径，发请求时候，自动出现api baseURL:"/a
阅读全文
摘要：//对axios进行二次封装 import axios from "axios"; // 利用axios对象的方法create，去创建一个axios实例对象 const requests=axios.create({ // 基础配置 // 基础路径，发请求时候，自动出现api baseURL:"/a
阅读全文
摘要：{ path:"/Search/:keyword?",//制定params可传可不传 component:Search, meta:{show:true}, name:"search" }, 传空串 params:{keyword:''||undefined},//传空串的写法
阅读全文
摘要：methods:{ goSearch(){ // 1.路由传参字符串形式 // this.$router.push("/Search/"+this.keyword+"?k="+this.keyword.toUpperCase()) // 2 模板字符串 // this.$router.push(`/
阅读全文
摘要：只需要删除即可； 具体位置在public-reset.css
阅读全文
摘要：{ path:"/Home", component:Home }, 代码中 component的配置不能 写成字符串形式，如果写了就会报如上错误，去掉引号即可
阅读全文
摘要：const path=require("path"); const HtmlWebpackPlugin=require("html-webpack-plugin") module.exports={ entry:{ app:'./src/app.js', main:'./src/main.js' }
阅读全文
摘要：webpack.dev.js const path=require("path")//nodejs核心模块 专门用来处理路径问题 const ESLintPlugin = require('eslint-webpack-plugin'); const HtmlWebpackPlugin = requ
阅读全文
摘要：配置打包文件中 //小于10kb转化直接渲染的base64格式 在 rules 中加入如下配置 { //小于10kb转化直接渲染的base64格式 test: /\.(png|jpe?g|gif|webp)$/, type: 'asset', parser: { dataUrlCondition:
阅读全文
摘要：const path=require("path")//nodejs核心模块 专门用来处理路径问题 module.exports={ entry:"./src/main.js", //输出 output:{ // 文件输出路径 // __dirname nodejs的变量 ，代表当前文件的文件夹目录
阅读全文
摘要：//该文件用于创建vuex中的store //引入vuex import Vue from 'vue' import Vuex from 'vuex' import axios from 'axios'; import { nanoid } from 'nanoid'; //使用插件 Vue.use
阅读全文
摘要：<template> <div class="count"> <h2 > 当前求和为 :{{sum}}</h2> <h3 > 当前求和放大十倍为为 :{{bigSum}}</h3> <h3 > 我在：{{address}} 学习：{{subject}}</h3> <h3 > 下方组件的总人数 ： {
阅读全文
摘要：<template> <div class="count"> <h2 > 当前求和为 :{{sum}}</h2> <h3 > 当前求和放大十倍为为 :{{bigSum}}</h3> <h3 > 我在：{{address}} 学习：{{subject}}</h3> <select v-model.nu
阅读全文
摘要：<template> <div class="count"> <h2 > 当前求和为 :{{sum}}</h2> <h3 > 当前求和放大十倍为为 :{{bigSum}}</h3> <h3 > 我在：{{address}} 学习：{{subject}}</h3> <select v-model.nu
阅读全文
摘要：当state中的数据需要经过加工后在使用 //该文件用于创建vuex中的store //引入vuex import Vue from 'vue' import Vuex from 'vuex' //使用插件 Vue.use(Vuex); //猪备actions--用于响应组件中的动作 const a
阅读全文
摘要：组件count <template> <div class="count"> <h2 > 当前求和为 :{{$store.state.sum}}</h2> <select v-model.number="n"> <option :value="1">1 </option> <option :valu
阅读全文
摘要：vuex的对应版本 vue2对应vuex3 所以安装的时候 npm i insatll vuex@3 vue3 对应vuex4 所以安装的时候 npm i insatll vuex 安装完成之后 在main js中引入 //引入vuex import Vuex from 'vuex'; //使用插件
阅读全文
摘要：<template> <div id="app" class="container"> <Category title="美食" > <template scope="{games}"> <ul> <li v-for="(g, index) in games" :key="index">{{g}}<
阅读全文
摘要：<template> <div id="app" class="container"> <Category title="美食" :listData='foods'> <img src="https://s3.ax1x.com/2021/01/16/srJ1q0.jpg" alt=""> </Cat
阅读全文
摘要：https://animate.style/ 按照里面的方法进行编辑
阅读全文
摘要：<template> <div class="school"> <button @click="isShow=!isShow" >显示/隐藏</button> <transition :appear="true"> <h2 v-show="isShow"> 你好啊</h2> </transition
阅读全文
摘要：app <template> <div id="app"> <div class="todo-container"> <div class="todo-wrap"> <MyHeader :addTodo="addTodo"></MyHeader> <MyList :todos="todos" :ch
阅读全文
摘要：footer <template> <div class="todo-footer" > <label> <input type="checkbox" /> </label> <span> <span>已完成{{doneTotal}}</span> / 全部{{todos.length}} </sp
阅读全文
摘要：app <template> <div id="app"> <div class="todo-container"> <div class="todo-wrap"> <MyHeader :addTodo="addTodo"></MyHeader> <MyList :todos="todos" :ch
阅读全文
摘要：app中 <template> <div id="app"> <div class="todo-container"> <div class="todo-wrap"> <MyHeader :addTodo="addTodo"></MyHeader> <MyList :todos="todos" :c
阅读全文
摘要：涉及到三个 组件 header <template> <div class="todo-header"> <input type="text" placeholder="请输入你的任务名称，按回车键确认" @keyup.enter="add"/> </div> </template> <script
阅读全文
摘要：首先建立静态资源html App。vue <template> <div id="app"> <div class="todo-container"> <div class="todo-wrap"> <MyHeader></MyHeader> <MyList ></MyList> <MyFooter
阅读全文
摘要：三种写法 export default { name:"MyFooter", //简单写法 /* props:["name", "age", "sex"] */ //对象写法 // props:{ // name:String, // age:Number, // sex:String, // }
阅读全文
摘要：一、export 和 export default 1、export与export default均可用于导出常量、函数、文件、模块等 2、在一个文件或模块中，export可以导出多个，对应的 import导入加{ } //导出 export function fn1(){ } export fun
阅读全文
摘要：安装 npm i nanoid 使用 import {nanoid} from 'nanoid' export default { name:"School", data() { return { name:"xiao bai", adress:"北京", id:nanoid(5) } }, } <
阅读全文
摘要：很多没接触过的人士被问到插件开发觉得很厉害 其实看过官方文档之后就知道其实不是很难 下面是官方给出的开发案例 MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或 property Vue.myGlobalMethod = functi
阅读全文
摘要：src中为我们需要编写的资源 assets中为公共资源 如图片 多媒体文件等 components中为我们编写的子组件 app为子组件入口 mainjs为总入口文件
阅读全文
摘要：//引入vue文件 import Vue from 'vue' // 引入app文件 import App from './App' //创建vm new Vue({ el:"#app", // render:h=>h(App) render(h) { return h(App); }, })
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
