随笔分类 - 前端 / 渐进式
摘要：初始化项目 npm init @vitejs/app cd md-demo01 npm install npm run dev 参考 # 安装依赖 npm i @kangc/v-md-editor@next -S # main.js import { creatApp } from 'vue'; i
阅读全文
摘要：HelloWorld.vue <template> <div> <h1>你好！vue</h1> <p>{{msg}}</p><br> <span>传值：{{counter}}</span> <button @click='btnClick'>你点击了{{count}}次</button> </div
阅读全文
摘要：<template> <div> <el-table class = "table" :data="BlogList" style="width: 100%" :row-class-name="tableRowClassName" border stript > <el-table-column t
阅读全文
摘要：查询所有用户 <script lang = "ts" scoped> export default { data() { return { } }, methods: { getUserList(){ this.$http.get("user/userList").then((response)=>
阅读全文
摘要：进入控制台页面后，因为侧边栏的default-active属性，每次刷新都会显示hello页面 我们希望选中一个页面后，刷新时依然显示该页面 首先default-active指定一个路径 <template> <el-menu class="el-menu-vertical-demo" :defau
阅读全文
摘要：前言 实现需求 表单验证 防抖和节流 登录预验证 路由导航守卫 参考 路由导航守卫 官网 参考1 参考2 开发步骤 向后端发送post请求前需进行表单验证 <script lang="ts"> export default { data() { return { ruleForm: { name:
阅读全文
摘要：default # 1.引入vue、根组件app # 2.创建vue实例挂载到根组件 vue-cli + vue2 # 1.引入vue、根组件app # 2.创建vue实例挂载到根组件 # 3.全局配置 Vue.prototype.$http = axios # 4.挂载到根组件 new Vue({
阅读全文
摘要：前言 之前参考这篇博客实现的路由跳转，是侧边栏开启路由 但是在当前项目中，需先让用户登录注册才进入控制台页面，所以注册、登录页面也使用路由，我们不能让注册登录页面显示到控制台的显示区 解决方案：将路由出口放到根组件App.vue中，注册页面、登录页面、控制台页面作为二级组件，将其他组件作为三级组件引
阅读全文
摘要：案例地址 构建项目 集成sass 子组件切换 使用vite2构建vue3项目 npm init @vitejs/app cd demo01 npm install npm run dev 集成vue router cnpm install vue-router@next --save view目录下
阅读全文
摘要：前言 后端使用spring boot + mybatis plus 后端开发完成后部署到Linux服务器，前端请求数据 前端使用vite2 + vue3 + vuex + router + axios + element-ui + less + ts 前端开发完成后部署到Linux服务器 准备后端接
阅读全文
摘要：前言 demo为chnq/vue/vue/vue-demo 项目地址 初始化 参考这篇博客构建一个最简单的vue项目 启动项目后报错：errors and 0 warnings potentially fixable with the --fix option. 解决方案：配置项目根目录下的pack
阅读全文
摘要：前言 参考1 参考2 案例一 vue-cli + vue2导出pdf 案例地址 安装依赖 # 将页面html转换成图片 npm install --save html2canvas # 将图片生成pdf npm install jspdf --save 新建htmlToPdf.js import h
阅读全文
摘要：# nodejs安装：https://www.runoob.com/nodejs/nodejs-install-setup.html # 打开cmd命令行工具，验证node、npm是否安装成功 node -v npm -v # 查看npm全局的安装路径 npm config get prefix #
阅读全文
摘要：简介 vue-cli创建vue项目，整合vuex、vue-router、axios、element-ui 项目模板下载地址 创建项目 使用vue-cli创建项目，功能选择：Babel、Router、vuex、Linter/Formatter、使用配置文件 点击查看详细步骤 插件选择vue-cli-p
阅读全文
摘要：vue实例 vue2.x中创建vue实例，挂载到dom节点 点击查详情 <div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>{{details()}}</h1> </div> <script type="tex
阅读全文
摘要：使用vite构建项目步骤 安装node，cmd输入：node -v验证是否安装成功；一般node安装后会自动安装npm，cmd输入：npm -v验证是否安装成功 选择一个文件夹作为项目文件夹，搜索框输入cmd，输入：npm init @vitejs/app 输入项目名称或者按enter使用默认名称：
阅读全文
摘要：组件 组件基础 <my-counter></my-counter> const app = Vue.createApp({ // 根组件 data() { return {} } }) //注册子组件my-counter app.component('my-counter', { data() {
阅读全文
摘要：前言 最近在b站上学习了飞哥的vue教程 学习案例已上传，下载地址 class绑定 对象绑定 :class='{active:isActive}' // 相当于class="active" :class="'active'" // 相当于class="active" ，这里绑定的是一个字符串 :cl
阅读全文
摘要：前言 最近在b站上学习了飞哥的vue教程 学习案例已上传，下载地址 指令 #id2{ // css部分 font-size: 24px; color: green; } v-bind:href="myUrl" v-bind:id="myId" // 等同于：href="www.baidu.com"
阅读全文
摘要：前言 最近在b站上学习了飞哥的vue教程 学习案例已上传，下载地址 使用方式 使用在线cdn 下载js文件并自托管，引入到项目后使用 使用npm安装后，用cli来构建项目 声明式渲染 Vue2需引入vue.min.js {{msg}} // Mustache 语法 var vm = new Vue(
阅读全文
