随笔分类 - 前端 / vue项目
摘要：步骤 1：安装 Node.js 和 npm 确保你已经安装了 Node.js 和 npm。你可以通过以下命令检查安装情况： node -vnpm -v 如果没有安装，下载并安装最新版本的 Node.js，它会自动安装 npm。 步骤 2：创建项目 打开终端或命令行窗口，选择一个目录来创建你的项目文件
阅读全文
摘要：初始化项目后，页面会有自带的间距，这是浏览器本身的默认样式，所以我们需要进行样式初始化，清除浏览器默认样式。 安装初始化样式库reset-css 安装 npm i reset-css 最后在入口文件（main.js) 中引用（不同项目的入口文件不同可能，只要引入就行了） import 'reset-
阅读全文
摘要：windows版本 nginx基本命令 使用taskkill停止或关闭nginx：taskkill /f /t /im nginx.exe (注意：使用taskkill /f /t /im nginx.exe命令关闭所启动的nginx时，不会删除logs中的nginx.pid文件) 1、首先 创建v
阅读全文
摘要：npm install mockjs 使用步骤： 1.src文件夹中新建mock文件夹 2.准备json数据 banner.json [ { "id": "1", "imgUrl": "/images/banner1.jpg" }, { "id": "2", "imgUrl": "/images/b
阅读全文
摘要：获取浏览器地址1、window.location.href(设置或获取整个 URL 为字符串) var test = window.location.href;alert(test);返回：http://i.cnblogs.com/EditPosts.aspx?opt=1 2、window.loca
阅读全文
摘要：<template> <div> <!--注意命名data-格式--> <h1 :data-myName="name" :data-age="age" @click="btn">测试</h1> </div> </template> <script> export default { data(){
阅读全文
摘要：防抖：前面的所有触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续的快速触发，只会执行一次 节流：在规定的间隔时间范围内不会重复的触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发 解决方案：使用lodash函数 防抖函数： <script> import _ fr
阅读全文
摘要：vue2安装vuex3版本 vue3安装vuex4版本 背景：2个组件：home和search，将store仓库拆分成2个小仓库，home和search两个小仓库用于管理自己模块的数据 store文件夹下新建2个文件夹：home和search home下index.js //home模块的小仓库 c
阅读全文
摘要：安装依赖 cnpm install --save vuex@3.6.2 1.新建文件夹store，index.js文件 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); //state:仓库存储数据的地方 const state
阅读全文
摘要：发送请求时，浏览器展示进度条 安装插件 cnpm install --save nprogress@0.2 在封装axios的地方使用 //对于axios进行二次封测 import axios from 'axios'; import nProgress from 'nprogress'; //引入
阅读全文
摘要：在vue.config.js文件中添加配置 module.exports = { transpileDependencies: true, lintOnSave: false, //代理配置，但是它只在开发环境有效 devServer: { proxy: { '/api': {//路径中匹配到api
阅读全文
摘要：cnpm install --save axios@0.24 二次封装： 项目中新建api目录，及request.js //对于axios进行二次封测 import axios from 'axios'; //1.利用axios读写的方法create，创建一个axios实例 const reques
阅读全文
摘要：main.js中 //注册全局组件 import TypeNav from '@/components/TypeNav' //第一个参数：全局组件的名字，第二个参数：哪一个组件 Vue.component(TypeNav.name,TypeNav) 使用全局组件，直接使用标签，不需要import引入
阅读全文
摘要：解决：在vue-router的index.js中添加如下代码 //先保存router原型对象的push let originPush = VueRouter.prototype.push let originReplace = VueRouter.prototype.replace //第一个参数：
阅读全文
摘要：需求 点击搜索按钮向search组件传递参数 1.先给路由组件取个名字 2.路径中定义一个变量接受params参数（如果不想传params参数，则写:variable?，表示params参数可传可不传） { name: 'search', path: '/search/:variable', com
阅读全文
摘要：配置路由的时候，可以给路由添加路由元信息meta 举例：让组件Footer在Home和Search中展示，登录注册时隐藏 路由配置 //配置路由 export default new VueRouter({ routes:[ { path:'*', redirect: '/home' }, { pa
阅读全文
摘要：vue-cli3+vue2项目 1.创建项目命令：vue create app 2.vue.config.js文件关闭eslint配置 module.exports = { transpileDependencies: true, lintOnSave: false } 3.jsconfig.jso
阅读全文
