CSS

发表于2022-11-19|更新于2025-05-23|CSS

|总字数:611|阅读时长:2分钟|浏览量:

CSS

选择器

基础选择器

选择器名字	示例
标签选择器	`p{color: green;}`
类选择器	`.red {color: red;}`
ID选择器	`#red {color: red;}`
通配符选择器	`* {color: red;}`

复合选择器

选择器	作用	描述
后台选择器	`a b{color: green;}`	b是孩子
子代选择器	`a> b{color: green;}`	b是儿子
并集选择器	`a , b{color: green;}`	一次选中多个元素

伪类选择器

:link 未被访问的连接
:visited 已经访问的连接
:hover 鼠标放在上面的连接
:active 鼠标按下没有谈起的连接

focus伪类选择器

获取焦点的表单选择器

字体属性

文本属性

盒子模型

边框

还有个表格边框合并的属性:border-collapse:两条边合并成一条边

内边距

内边距也会影响盒子的实际大小
padding 值得顺序是上右下左
没有指定width,加了padding就不会改变盒子宽度

外边距

margin的语法跟padding用法一样

外边距应用-盒子居中

让盒子居中的前提条件是:

盒子必须指定了宽度
盒子左右的外边距都设置为auto

嵌套外边距塌陷

解决方法1: 给父元素定义上边框,坏处就是撑大了盒子
border-top: 1px solid transparent;
解决方法2:指定一个上内边距,坏处就是撑大了盒子
padding: 1px;
解决方法三:为父元素添加 overflow
overflow: hidden;

在浮动,固定,绝对定位的盒子就不会有塌陷问题

元素显示模式

块元素

div ,h1 p ul ol li 一个占一行
高度,宽度,外边距,内边距都可以控制
宽度默认是容器的100%
是一个容器及盒子,里面可以放行内或者块元素
<p>和<h1> 等用于存放文字的标签里面不能放<div>

行内元素

span a strong b em i
一行可以用多个
宽高,设置无效,背景颜色设置有效
默认宽度就是它本身内容的宽度
行内元素只能放文本或者其他行内元素

特殊情况

链接里面不能再放连接,<a>里面可以放块级元素

<input> <img>是行内款,一行可以给多个,也能设置宽高

元素显示模式的转换

相关推荐

语法基本使用初始化项目 1npm init -y 创建文件 12# 新建src文件夹# 在src里新建index.html和index.css 安装jQuery 123# -S 的意思是 jquery安装好了,记录在package.json的 dependencies里# -S 等于 --save的简写npm i jquery -S index.html 12345678910111213141516171819202122<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>隔行变色</title> <script src="./index.js"></script> </head> <body> <ul> <li>这是第 1 个li</li> <li>这是第 2 个li</li> <li>这是第 3 个li</li> <li>这是第 4 个li</li> <li>这是第 5 个li</li> <li>这是第 6 个li</li> <li>这是第 7 个li</li> <li>这是第 8 个li</li> <li>这是第 9 个li</li> </ul> </body></html> index.js 1234567// 使用ES6的导入语法,导入jQueryimport $ from 'jquery'$(function(){ $("li:odd").css("background-color","red") $("li:even").css("background-color","pink")}) 运行index.html,就会报错,这时需要安装webpack 安装webpack ⛔ 安装webpack遇到的版本问题要安装最新版本或特定版本，请运行以下命令之一： 123npm install --save-dev webpacknpm install --save-dev webpack@<version> 如果你使用 webpack 4+ 版本，你还需要安装 CLI。 1npm install --save-dev webpack-cli 1234567# 这个时候运行就会出问题# 需要安装webpack# @是指定版本# -D是指把版本信息记录到 devDepencies# devDepencies开发阶段会用到# -D 等于 --save-dev的简写npm insatll [email protected] [email protected] -D 创建webpack的配置文件webpack.config.js 123456789# 项目跟目录创建webpack配置文件,webpack.config.js# 使用Node.js的导出语法,向外导出一个webpack的配置对象modle.exports={ // 代表webpack的运行的模式, // 可选的值有两个 development 和 production mode : "development"} 修改package.json 1234# 在package.json的scripts节点下,新增dev脚本"scripts":{ "dev":"webpack"} 运行 12# 就会多了个dist的文件夹npm run dev 修改index.html的引入js路径 12# 修改index.html文件夹的scr导入路劲scr="./index.js" 改成 src="./dist/main.js" entry和output123456789101112const path = require("path")module.exports = { // 指定要最先处理的文件 entry:path.join(__dirname,"./src/index1.js"), // 指定生成的文件放在哪里 output:{ // 生成文件的目录 path:path.join(__dirname,"./dist2"), // 生成的文件名 filename:"bundle.js" }} 修改代码实时生效插件1npm install webpack-dev-server --save-dev 修改package.json 123"scripts": { "dev": "webpack serve"} 1npm i --save-dev html-webpack-plugin 修改webpack.config.json 12345678910111213const htmlplugin = require("html-webpack-plugin")plugin = new htmlplugin({ // 指定要服务的页面 template:"./src/index.html", // 复制到哪里去 filename:"./index.html"})module.exports = { mode:"development", plugins:[plugin]} 配置devServer12345678910module.exports = { mode:"development", plugins:[plugin], devServer:{ // 自动打开浏览器 open:true, // 端口 port:10086 }} loaderwebpack默认只处理js格式的文件,比如要处理CSS,需要安装 12npm install --save-dev css-loadernpm install --save-dev style-loader 在src下新建css文件夹,在css文件夹下新建一个index.css 在index.js导入css文件 12// 导入样式,在webpack中,所有的文件都可以用ES6语法导入import "./css/index.css" 配置webpack.config.js 12345678910111213// 先找到css-loader处理,再给style-loader处理module.exports = { mode:"development", module:{ // 所有第三方文件模块的匹配规则 rules:[ // 文件后缀的匹配规则 { test:/\.css$/,use:["style-loader","css-loader"] } ] }} less-loader在上面的css文件夹下,创建个index.less文件 12345678910// index.lesshtml,body,ul{ padding: 0; margin: 0; li{ line-height: 30px; padding-left: 20px; font-size: 12px; }} 12npm install less -Dnpm install less less-loader --save-dev 配置webpack.config.js 1234567891011121314module.exports = { mode:"development", module:{ // 所有第三方文件模块的匹配规则 rules:[ // 文件后缀的匹配规则 // 处理css {test:/\.css$/,use:["style-loader","css-loader"]}, // 处理less {test: /\.less$/, use: ["style-loader", "css-loader", "less-loader",], }, ] }} 图片loader没学 babel-loader没学 build打包优化自动清理dist目录下的旧文件1npm install --save-dev clean-webpack-plugin 12345678const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = { plugins:[plugin,new CleanWebpackPlugin()], output:{ path:path.join(__dirname,"./dist") }} Source Map一个信息文件,存储这位置信息,存储压缩混淆后的代码,所对应的转换钱的位置 123456module.exports = { mode:"development", // 生产的时候要关闭,也可以设置 nosources-source-map // nosources-source-map 显示行号,不显示源码 devtool:"eval-source-map"} @的原理标识src源代码目录,从外往里找, 就可以不用使用../从里往外找告诉webpack,@的目录 1234567module.exports = { resolve:{ alias:{ "@":path.join(__dirname,"./src/") } }} Eslint12345678910{ // 是否使用分号结尾 "semi": true, // 是否使用单引号 "singleQuote": false, // 最后一句话逗号结尾 "trailingComma": "none"} 在Vue项目的根目录中创建vue.config.js文件 12345678910# 在脚手架生成的代码添加module.exports = defineConfig({ # 要添加的代码 lintOnSave:false})# 或者module.exports = { lintOnSave:false} 入门应用1234567891011121314151617var http = require('http');http.createServer(function (request, response) { // 发送 HTTP 头部 // HTTP 状态值: 200 : OK // 内容类型: text/plain response.writeHead(200, {'Content-Type': 'text/plain'}); // 发送响应数据 "Hello World" response.end('Hello World\n');}).listen(8888);// 终端打印如下信息console.log('Server running at http://127.0.0.1:8888/');// 运行node server.js Npm升级 1npm i -g npm to update Node.jsmac安装 1brew install nodejs npm更换版本 12# npm更换npm install [email protected] -g node.js更换版本 12345678910111213141516171819202122# node更换sudo npm install n -g# 安装指定版本号的nodejs,记得使用sudosudo n 14.16.0# 切换nodejs版本号n# 输入n之后,打印的数据ο node/14.16.0------------------------------------------# 使用nvm更换版本brew install nvm# 查看远程版本nvm ls-remote# 安装制定版本号nvm install v15.3.2# 已经安装的版本号nvm ls# 切换已经安装的版本号nvm use 4.2 依赖管理 123456789101112131415161718192021# 安装但不写入package.json；npm install xxx# 安装并写入package.json的"dependencies"中npm install xxx –S# 安装并写入package.json的"devDependencies"中npm install xxx –D# 全局安装npm install xxx -g# 安装指定版本npm install [email protected]# 更新包npm install -g npm-check-updates# 检查可更新的模块ncu# 来更新package.json的依赖包到最新版本ncu -u node.js升级 12345678910111213# 更新npmnpm install -g npm# 清空npm缓存npm cache clean -f# 安装n模块npm install -g n# 升级node.js到最新稳定版n stable# 有时候需要sudo权限,或者安装好了之后要开启一个新的shell才能用到新的版本 https://www.bilibili.com/video/BV1vE411871g?p=120 安装源依赖升级 123npm install -g npm-upgrade # 先全局安装 npm-upgradenpm-upgrade # 当前项目下的包全都更新npm-upgrade <package> # 当前项目下的指定包更新 ES6 & JS字符串转数字遍历2 排序排序 join方法遍历 1JavaScript for...in .. foreach 1row.typeID.split(",").forEach(id=>{this.gameTypes.push(parseInt(id))}) NodJs项目部署到Vercel1.创建node项目 1npm init 2.安装依赖,package.json 123456{ "dependencies": { "@vercel/node": "^2.15.3", "express": "^4.18.2" }} 3.创建vercel.json 123456789101112131415{ "version": 2, "builds": [ { "src": "app.js", "use": "@vercel/node" } ], "routes": [ { "src": "/(.*)", "dest": "app.js" } ]} 4.创建app.js 1234567891011const express = require('express')const app = express()const port = 3000app.get('/', (req, res) => { res.send('Hello World!')})app.listen(port, () => { console.log(`Example app listening on port ${port}`)}) 5.像平常部署别的项目一样,部署这个项目就可以,部署好之后,就能看到首页的Hello World!

Vue后台系统

项目由 Vue3 + Pina + JavaScript + Ant Design Vue 创建项目12345# 直接创建npm create vite@latest my-vue-app -- --template vue# 如果要创建ts或者自定义配置的项目就用这个npm create vite 引入Ant Design Vue1npm i --save [email protected] mian.js 删掉自带的style.css文件 12345678import {createApp} from 'vue'import Antd from 'ant-design-vue';import 'ant-design-vue/dist/reset.css';import App from './App.vue'const app = createApp(App);app.use(Antd)app.mount('#app'); 安装router1npm install vue-router@4 创建src/router/index.js文件 12345678910111213141516171819202122232425262728293031323334353637383940414243444546import { createWebHistory, createRouter } from 'vue-router'/** * Note: 路由配置项 * * hidden: true // 当设置 true 的时候该路由不会再侧边栏出现如401，login等页面，或者如一些编辑页面/edit/1 * alwaysShow: true // 当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式--如组件页面 * // 只有一个时，会将那个子路由当做根路由显示在侧边栏--如引导页面 * // 若你想不管路由下面的 children 声明的个数都显示你的根路由 * // 你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由 * redirect: noRedirect // 当设置 noRedirect 的时候该路由在面包屑导航中不可被点击 * name:'router-name' // 设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题 * query: '{"id": 1, "name": "ry"}' // 访问路由的默认传递参数 * roles: ['admin', 'common'] // 访问路由的角色权限 * permissions: ['a:a:a', 'b:b:b'] // 访问路由的菜单权限 * meta : { noCache: true // 如果设置为true，则不会被 <keep-alive> 缓存(默认 false) title: 'title' // 设置该路由在侧边栏和面包屑中展示的名字 icon: 'svg-name' // 设置该路由的图标，对应路径src/assets/icons/svg breadcrumb: false // 如果设置为false，则不会在breadcrumb面包屑中显示 activeMenu: '/system/user' // 当路由设置了该属性，则会高亮相对应的侧边栏。 } */// 公共路由export const constantRoutes = [ { path: '/login', component: () => import('@/views/login'), hidden: true },]const router = createRouter({ history: createWebHistory(), routes: constantRoutes, scrollBehavior(to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { top: 0 } } },});export default router; 配置开发环境编辑vite.config.js 123456789101112131415161718192021import { defineConfig, loadEnv } from 'vite'import path from 'path'import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/export default defineConfig(({ mode, command }) => { return { plugins: [vue()], resolve: { // https://cn.vitejs.dev/config/#resolve-alias alias: { // 设置路径 '~': path.resolve(__dirname, './'), // 设置别名 '@': path.resolve(__dirname, './src') }, // https://cn.vitejs.dev/config/#resolve-extensions extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'] } }}) 项目根目录创建环境配置文件 .env.development .env.prod 12345678# 页面标题VITE_APP_TITLE = 若依管理系统# 开发环境配置VITE_APP_ENV = 'development'# 若依管理系统/开发环境VITE_APP_BASE_API = '/dev-api' 安装sass12345npm install -D sass# 直接使用就可以<style lang="scss" scoped></style> 全局样式创建src/style/index.scss文件 123456789101112131415161718@import './demo.scss';html { height: 100vh; box-sizing: border-box;}body { height: 100vh; margin: 0; //-moz-osx-font-smoothing: grayscale; //-webkit-font-smoothing: antialiased; //text-rendering: optimizeLegibility; //font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;}#app { height: 100vh;} 创建src/style/demo.scss文件 1// 这个文件是用来写css的,前面导入的这个文件,所以后面只需要写就行了导入scss,编辑main.js 1import './style/index.scss' Ant Design Vue Icon的使用123456789101112131415<template> <a-form class="login-from"> <a-form-item size> <a-input placeholder="请输入用户名" size="large"> <template #prefix> <UserOutlined/> </template> </a-input> </a-form-item> </a-form></template><script setup> import {UserOutlined, LockOutlined} from '@ant-design/icons-vue'</script> 安装Axios1npm install axios 创建 src/utils/request.js 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556import axios from 'axios'axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'// 创建axios实例const service = axios.create({ // axios中请求配置有baseURL选项，表示请求URL公共部分 baseURL: import.meta.env.VITE_APP_BASE_API, // 超时 timeout: 10000})// request拦截器service.interceptors.request.use(config => { return config}, error => { console.log(error) Promise.reject(error)})// 响应拦截器service.interceptors.response.use(res => { // 未设置状态码则默认成功状态 const code = res.data.code || 200; if (code === 401) { return Promise.reject('无效的会话，或者会话已过期，请重新登录。') } else if (code === 500) { ElMessage({ message: msg, type: 'error' }) return Promise.reject(new Error(msg)) } else if (code === 601) { ElMessage({ message: msg, type: 'warning' }) return Promise.reject(new Error(msg)) } else if (code !== 200) { ElNotification.error({ title: msg }) return Promise.reject('error') } else { return Promise.resolve(res.data) } }, error => { console.log('err' + error) let { message } = error; if (message == "Network Error") { message = "后端接口连接异常"; } else if (message.includes("timeout")) { message = "系统接口请求超时"; } else if (message.includes("Request failed with status code")) { message = "系统接口" + message.substr(message.length - 3) + "异常"; } ElMessage({ message: message, type: 'error', duration: 5 * 1000 }) return Promise.reject(error) })export default service main.js 1import router from './router'

表单验证简单版123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899<template> <div class="login"> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>通用后台管理系统</span> </div> <el-form label-width="80px" :model="form" ref="form"> <el-form-item label="用户名" prop="username" :rules="[ {required:true,message:'请输入用户名',trigger:'blur'}, {min:6,max:12,message:'长度在6-12位字符',trigger:'blur'}, ]"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password" :rules="[ {required:true,message:'请输入密码',trigger:'blur'}, {min:6,max:12,message:'长度在6-12位字符',trigger:'blur'}, ]"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="login('form')">登录</el-button> </el-form-item> </el-form> </el-card> </div></template><script>export default { data() { return { form: { username: "", password: "" } } }, methods:{ login(form){ this.$refs[form].validate((valid)=>{ if(valid){ console.log("验证通过") this.axios.post("http://localhost",this.form).then( res=>{ console.log(res) if(res.data.status === 200){ localStorage.setItem("username",res.data.username) this.$message({ message:res.data.message, type:'success' }) this.$router.push('/home') } } ) .catch(err=>{ console.error(err) }) }else { console.error("验证不通过") } }) } }}</script><style scoped lang="scss">.login { width: 100%; height: 100%; position: absolute; background: cadetblue; .box-card { width: 450px; margin: 200px auto; .el-button { width: 100%; } }}</style> 自定义校验123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119<template> <div class="login"> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>通用后台管理系统</span> </div> <el-form label-width="80px" :model="form" :rules="rules" ref="form"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="login('form')">登录</el-button> </el-form-item> </el-form> </el-card> </div></template><script>export default { data() { // 验证用户名 const validateName = (rule, value, callback) => { if (value === '') { callback(new Error("请输入用户名")) } else if (value === '123456') { console.log("11111111111") callback(new Error('换个用户名,猜到啦')) } else { callback() } } const validatePassword = (rule, value, callback) => { if (value === '') { callback(new Error("请输入密码")) } else if (!value === '123456') { callback(new Error('换个密码,猜到啦')) } else { callback() } } return { form: { username: "", password: "" }, rules: { username: [{validator: validateName, trigger: 'blur'}], password: [{validator: validatePassword, trigger: 'blur'}], } } }, methods: { login(form) { this.$refs[form].validate((valid) => { if (valid) { console.log("验证通过") // this.axios.post("http://localhost", this.form).then( // res => { // console.log(res) // if (res.data.status === 200) { // localStorage.setItem("username", res.data.username) // this.$message({ // message: res.data.message, // type: 'success' // }) // this.$router.push('/home') // } // } // ) // .catch(err => { // console.error(err) // }) } else { console.error("验证不通过") } }) } }}</script><style scoped lang="scss">.login { width: 100%; height: 100%; position: absolute; background: cadetblue; .box-card { width: 450px; margin: 200px auto; .el-button { width: 100%; } }}</style> 自定义校验封装新建一个vaildate.js 123456789101112131415161718192021// 用户名匹配export function nameRule(rule,value,callback){ if (value === '') { callback(new Error("请输入用户名")) } else if (value === '123456') { console.log("11111111111") callback(new Error('换个用户名,猜到啦')) } else { callback() }}export function passwordRule(rule,value,callback){ if (value === '') { callback(new Error("请输入密码")) } else if (value === '123456') { callback(new Error('换个密码,猜到啦')) } else { callback() }} 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697<template> <div class="login"> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>通用后台管理系统</span> </div> <el-form label-width="80px" :model="form" :rules="rules" ref="form"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="login('form')">登录</el-button> </el-form-item> </el-form> </el-card> </div></template><script>import {nameRule,passwordRule} from "@/utils/vaildate";export default { data() { return { form: { username: "", password: "" }, rules: { username: [{validator: nameRule, trigger: 'blur'}], password: [{validator: passwordRule, trigger: 'blur'}], } } }, methods: { login(form) { this.$refs[form].validate((valid) => { if (valid) { console.log("验证通过") // this.axios.post("http://localhost", this.form).then( // res => { // console.log(res) // if (res.data.status === 200) { // localStorage.setItem("username", res.data.username) // this.$message({ // message: res.data.message, // type: 'success' // }) // this.$router.push('/home') // } // } // ) // .catch(err => { // console.error(err) // }) } else { console.error("验证不通过") } }) } }}</script><style scoped lang="scss">.login { width: 100%; height: 100%; position: absolute; background: cadetblue; .box-card { width: 450px; margin: 200px auto; .el-button { width: 100%; } }}</style> 遍历路由渲染菜单栏src>common>menu.vue 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869<template> <div class="menu"> <el-aside width="200px"> <el-menu router default-active="2" class="el-menu-vertical-demo" background-color="cornflowerblue" text-color="#fff" active-text-color="#ffd04b"> <template v-for="(item,index) in menus"> <div> <el-submenu :index="index + '' " :key="index" v-if="!item.hidden"> <template slot="title"> <i :class="item.iconClass"></i> <span>{{ item.name }}</span> </template> <el-menu-item-group v-for="(child,index) in item.children" :key="index"> <el-menu-item :index="child.path"> <i :class="child.iconClass"></i> {{ child.name }} </el-menu-item> </el-menu-item-group> </el-submenu> </div> </template> </el-menu> </el-aside> </div></template><script>export default { data(){ return{ menus:[] } }, created() { console.log(this.$router.options.routes) this.menus=this.$router.options.routes }, methods: { }}</script><style scoped lang="scss">.menu{ .el-aside{ height: 100%; .el-menu{ height: 100%; .fa{ margin-right: 10px; } } .el-submenu .el-menu-item{ min-width: 0; } }}</style> route.js 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136import Vue from 'vue'import Router from 'vue-router'// import Home from '../components/Home.vue'Vue.use(Router)export default new Router({ routes:[ { path:'/', // 重定向 redirect:'/login', // 路由懒加载 hidden:true, component:()=>import('@/components/Login.vue') // 异步组件 }, { path:'/login', name:'Login', hidden:true, // 路由懒加载 component:()=>import('@/components/Login.vue') // 异步组件 }, { path:'/home', // component:Home hidden:true, // 路由懒加载 component:()=>import('@/components/Home.vue') // 异步组件 }, { path:'/home2', // component:Home hidden:true, // 路由懒加载 component:resolve =>require(['@/components/Home.vue'],resolve) // 异步组件 }, { path:'*', hidden:true, // 路由懒加载 component:()=>import('@/components/404.vue') }, { path:"/home", name:"学生管理", iconClass:'fa fa-user', // 默认重定向 redirect:'/home/student', component:()=>import('@/components/Home.vue'), children:[ { path:'/home/student', name:'学生列表', iconClass:"fa fa-list", component:()=>import("@/components/students/StudentList.vue") }, { path:'/home/info', name:'信息列表', iconClass:"fa fa-list", component:()=>import("@/components/students/InfoList.vue") }, { path:'/home/infos', name:'信息管理', iconClass:"fa fa-list-alt", component:()=>import("@/components/students/InfoLists.vue") }, { path:'/home/work', name:'作业列表', iconClass:"fa fa-list-ul", component:()=>import("@/components/students/WorkList.vue") }, { path:'/home/workd', name:'作业管理', iconClass:"fa fa-th-list", component:()=>import("@/components/students/WorkMent.vue") } ] }, { path:"/home", name:"数据分析", iconClass:'fa fa-bar-chart', component:()=>import('@/components/Home.vue'), children:[ { path:'/home/dataview', name:'数据概览', iconClass:"fa fa-list-alt", component:()=>import("@/components/dataAnalysis/DataView.vue") }, { path:'/home/mapview', name:'地图概览', iconClass:"fa fa-list-alt", component:()=>import("@/components/dataAnalysis/MapView.vue") }, { path:'/home/travel', name:'信息管理', iconClass:"fa fa-list-alt", component:()=>import("@/components/dataAnalysis/TraveMap.vue") }, { path:'/home/score', name:'分数地图', iconClass:"fa fa-list-alt", component:()=>import("@/components/dataAnalysis/ScoreMap.vue") } ] }, { path:"/users", name:"用户中心", iconClass:'fa fa-user', component:()=>import('@/components/Home.vue'), children:[ { path:'/users/user', name:'权限管理', iconClass:"fa fa-user", component:()=>import("@/components/users/User.vue") } ] }, ], mode:'history'}) 面包屑的使用不同的路由,面包屑显示的信息会自动变化bread.vue 12345678910111213141516171819202122<template> <div> <el-card> <el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item v-for="(item,index) in $route.matched" :key="index" >{{item.name}}</el-breadcrumb-item> </el-breadcrumb> </el-card> </div></template><script>export default {}</script><style scoped></style> home.vue 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859<template> <div class="home"> <Header></Header> <el-container class="content"> <Menu>menu</Menu> <el-container> <el-main> <Breadcrumb/> <div class="cont"> <router-view></router-view> </div> </el-main> <el-footer> <Footer></Footer> </el-footer> </el-container> </el-container> </div></template><script>import Header from "@/components/common/Header.vue";import Footer from "@/components/common/Footer.vue";import Menu from "@/components/common/Menu.vue";import Breadcrumb from '@/components/common/Breadcrumb.vue'export default { components: { Header, Footer, Breadcrumb, Menu, }, data() { return {} }}</script><style scoped lang="less">.home { width: 100%; height: 100%; .content{ position: absolute; width: 100%; top: 60px; bottom: 0; .cont{ margin: 20px 0; } }}</style> Card 卡片12345<el-card :body-style="{padding:'0px'}"> <div style="padding-top: 4px;display: flex"> </div</div></el-card> 级联选择器新版本props的使用级联选择器太高可以在全局样式里给.el-cascader-panel设置高度为200px:props=”{ expandTrigger: ‘hover’, value: ‘cat_id’, label: ‘cat_name’, children: ‘children’ }” 多选框 1234567891011121314151617<div> <el-checkbox-group v-model="checkboxGroup1"> <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button> </el-checkbox-group></div>const cityOptions = ['上海', '北京', '广州', '深圳']; export default { data () { return { checkboxGroup1: ['上海'], checkboxGroup2: ['上海'], checkboxGroup3: ['上海'], checkboxGroup4: ['上海'], cities: cityOptions }; } Avatar 头像12<el-avatar shape="square" size="small" src="https://baidu.com/logo"></el-avatar> Table 表格el-table怎样隐藏某一列el-table-column上添加v-if="false" 1234567891011121314151617181920212223<el-table v-loading="loading" :data="bczglList" @selection-change="handleSelectionChange"> <el-table-column label="id" align="center" prop="id" v-if="false" /> <el-table-column label="班次组编号" align="center" prop="bczbh" /> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['kqgl:bczgl:edit']" >修改</el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['kqgl:bczgl:remove']" >删除</el-button> </template> </el-table-column></el-table> 先记着Vue同一个dom元素绑定多个点击事件如何绑定 1<el-button @click="dialogVisible = false;clearTempData()">取消</el-button> 模板获取值 123<template slot-scope="scope"> <el-tag type="warning" v-for="ids in scope.row.typeID.split(',')">{{getGameType(ids)}}</el-tag></template> Store 数据 1agentId: _this.$store.getters.name.agentId,

1234567891011121314<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body></body></html> 标题标签12345678<body> <h1>111111111111</h1> <h2>111111111111</h2> <h3>111111111111</h3> <h4>111111111111</h4> <h5>111111111111</h5> <h6>111111111111</h6></body> 段落标签1234<body> <p>我们一进里面一片漆黑，然后老师给我们每一个人都发了一个眼镜，我们戴上眼镜，后面前有一张大白纸，后面有一个投影仪，放了一个电影，名叫“雪怪大冒险”。</p> <p>有几位老师去帮我们买汉堡去了，我们先到那里先吃一些零食，我们吃饱后，我们一起去玩游戏，第一个游戏的名字叫做动物园里有什么。第二个游戏的名字叫做学校里面有什么</p></body> 段落格式的特点段落内容会自动换行，无需手动添加 <br> 标签。段落段落之间会有空隙换行标签123<body>13213123<br/>3123123</body> 文本格式化标签12345678<body> 1<strong>加粗</strong>3 1<b>加粗</b>3 1<em>倾斜</em>3 1<del>删除线</del>3 1<ins>下划线</ins>3</body> div1234<body><div>div单独占一行</div>3213123<div>div单独占一行</div></body> span所有的span占一行 1234<body><span>div单独占一行</span>3213123<span>div单独占一行</span></body> 图像标签123<body>这是百度的图片:<img src="./demo.png"/></body> 通常只需调整宽度或高度中的一个，另一个会自动计算以保持比例不变。超链接target属性有_self为默认值,当前页面_blank 新的页面打开外连接就要加http,内连接就是路径地址 123<body><a href="http://baidu.com">这是超裂解</a></body> 锚点123456789101112131415161718192021<body>目录:<a href="#1">1</a><a href="#2">2</a><hr><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><h2 id="1">这是锚点1</h2><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><h2 id="2">这是锚点2</h2></body> 表格标签123456789101112<body><table border="1" align="center"> <tr> <th>姓名</th> <th>性别</th> </tr> <tr> <td>anthony</td> <td>南</td> </tr></table></body> 列表标签1234567891011121314151617181920212223242526<body><ul> <li>无序列表1</li> <li>无序列表2</li> <li>无序列表3</li> <li>无序列表4</li></ul><ol> <li>1</li> <li>2</li> <li>4</li> <li>3</li></ol><dl> <dt>这是自定义列表</dt> <dd>1</dd> <dd>2</dd> <dd>4</dd> <dd>3</dd></dl></body> 表单标签12345678910111213141516171819<form action="url地址" method="提交方式" name="表单名称">  <label for="usernameId">用户名</label> <input type="text" name="username" value="anthony" id="usernameId"> <br> 密码 :<input type="password" name="pwd"> <br> 性别 : 男<input type="radio" name="sex" value="男" checked> 女<input type="radio" value="女" name="sex"><br> 爱好: 吃饭<input type="checkbox" name="hobby" value="1"> 睡觉<input type="checkbox" name="hobby" value="2"> 玩<input type="checkbox" name="hobby" value="3"><br> <label for="selectId">选项:</label> <select id="selectId"> <option value="1" >一</option> <option value="2" selected>二</option> <option value="3">三</option> </select><br> 文本域元素:<textarea>23123</textarea></form> input12345678910111213141516171819<body> <form> 用户名:<input type="text" name="myName" value="anthony"><br /> 密码:<input type="password" name="myPassword" value="123456"><br /> 测试重置:<input type="text" name="myTest"><br /> 性别: <input type="radio" name="myGender" value="male" checked> 男 <input type="radio" name="myGender" value="female"> 女 <br /> 爱好: <input type="checkbox" name="myHobby" value="basketball" checked> 篮球 <input type="checkbox" name="myHobby" value="football"> 足球 <input type="checkbox" name="myHobby" value="pingpong"> 乒乓球 <br /> <input type="submit" value="提交"> <input type="reset" value="重置"> </form></body> select1234567891011<body> <form> 地区: <select name="myArea"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou" selected>广州</option> <option value="shenzhen">深圳</option> </select> </form></body> 综合练习123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>综合案例-注册</title></head><body> <h4>青春不常在,赶紧谈恋爱</h4> <table border="1" cellspacing="0" cellpadding="0" width="500px"> <tr> <td>性别:</td> <td> <input type="radio" name="myGender" id="man"><label for="man">男<img src="./assert/male.svg" alt="male" width="12px"></label> <input type="radio" name="myGender" id="woman"><label for="woman">女<img src="./assert/female.svg" alt="female" width="12px"></label> </td> </tr> <tr> <td>生日:</td> <td> <select name="myBirthday"> <option value="1990" selected>请选择年</option> <option value="1991">1991</option> <option value="1992">1992</option> <option value="1993">1993</option> <option value="1994">1994</option> <option value="1995">1995</option> </select> <select name="myBirthday"> <option value="1" selected>请选择月</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> <select name="myBirthday"> <option value="1" selected>请选择日</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </td> </tr> <tr> <td>所在地区:</td> <td> <input type="text" name="myLocation" placeholder="请输入所在地区"> </td> </tr> <tr> <td>婚姻状态:</td> <td> <input type="radio" name="myMarriage" id="married"><label for="married">已婚</label> <input type="radio" name="myMarriage" id="unmarried"><label for="unmarried">未婚</label> <input type="radio" name="myMarriage" id="divorced"><label for="divorced">离异</label> </td> </tr> <tr> <td>学历:</td> <td> <input type="text" name="myEducation" placeholder="请输入学历"> </td> </tr> <tr> <td>爱好:</td> <td> <input type="checkbox" name="myHobby"><label for="basketball">篮球</label> <input type="checkbox" name="myHobby"><label for="football">足球</label> <input type="checkbox" name="myHobby"><label for="pingpong">乒乓球</label> </td> </tr> <tr> <td>自我介绍:</td> <td> <textarea name="myIntro" cols="30" rows="10" placeholder="请输入自我介绍"></textarea> </td> </tr> <tr> <td></td> <td> <input type="submit" name="myCode" value="免费注册"> </td> </tr> <tr> <td></td> <td> <input type="checkbox" checked><label for="myAgreement">我同意《用户协议》</label> </td> </tr> <tr> <td></td> <td> <a href="https://www.baidu.com">我是会员,立即登录</a> </td> </tr> <tr> <td></td> <td> <h5>我承诺</h5> <ul> <li>1. 我是成年人</li> <li>2. 我是成年人</li> <li>3. 我是成年人</li> <li>4. 我是成年人</li> </ul> </td> </tr> </table></body></html> 动态修改html标题 123456789101112131415161718192021222324252627<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>欢迎来到我的网页</title></head><body><h1>试着切换标签页吧！</h1><script> // 记录原始标题 var originalTitle = document.title; // 定义当页面可见性发生变化时的事件处理函数 document.addEventListener('visibilitychange', function() { if (document.hidden) { // 如果页面不可见，修改标题 document.title = "我等着你回来"; } else { // 如果页面可见，恢复原始标题 document.title = originalTitle; } });</script></body></html>

JavaScript12345678910111213141516171819202122232425262728293031323334353637383940414243<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>setTimeout</title> </head> <body> <input type="text" id="displayBox" name="displayBox" value="0"> <div id="content"></div> <button type="button" onclick="countSecond()">开始计数</button>  <button type="button" onclick="clearTimeout(stop)">停止计数</button> <script> // 例子1 setTimeout("alert('对不起, 要你久候')", 3000) // 例子2 setTimeout("changeState()", 1000); function changeState() { let content = document.getElementById('content'); content.innerHTML = "<div style='color:red'>我是三秒后显示的内容！</div>"; } // 例子3 x = 0 function countSecond() { x = x+1 document.getElementById("displayBox").value=x stop = setTimeout("countSecond()", 1000) } // 例子5 setTimeout(demo5, 3000,"1232") function demo5(msg) { alert(msg) } </script> </body></html> 函数JSJS声明普通函数 1234567// 声明函数-没有参数-没有返回值function showMessage() { console.log( 'Hello everyone!' );}// 调用函数showMessage(); 1234567// 声明有参数的函数function showMessage2(param1,param2){ console.log(param1, param2);}// 调用函数showMessage2("anthony",23) 12345678// 声明有默认值的函数function showMessage2(param1,param2=24){ console.log(param1, param2);}// 调用函数showMessage2("anthony",23)showMessage2("anthony") 1234567// 声明有返回值的函数function haveReturn(param1,param2){ return param1 + param2;}// 调用函数console.log(haveReturn(1,2))12345678910111213/** * 计算两个数字的和 * @param num1 - 第一个加数 * @param num2 - 第二个加数 * @returns 返回两个数字的和 */function add(num1: number, num2: number): number { return num1 + num2;}// 调用示例const result = add(5, 3);console.log(result); // 输出: 8 函数表达式 1234567891011let let1 = function sayHi(){ return 10086;}// 打印 [Function: sayHi]// 不像别的语言调用let1的作用==let1(), js里调用函数就需要()console.info(let1)let let2 = let1console.info(let1());console.info(let2()); 回调 1234567891011121314151617181920212223242526272829function ask(question, yes, no) { if (question) { yes(); } else { no(); }}function showQuestion() { return 1 === 1;}function showOk() { console.info("同意");}function showCancel() { console.info("不同意");}// 用法：函数 showOk 和 showCancel 被作为参数传入到 askask(showQuestion(), showOk, showCancel);// 也可以写成ask(1 === 1, function () { console.info("同意"); }, function () { console.info("不同意"); }) 普通函数和函数表达式的区别 123456789101112sayHi("John"); // Hello, Johnfunction sayHi(name) { alert( `Hello, ${name}` );}----------------------------------------------------sayHi2("John"); // 报错,函数还没有创建!let sayHi2 = function(name) { // (*) no magic any more alert( `Hello, ${name}` );}; 箭头函数,功能是更简化函数表达式定义 1234567891011121314151617let demo1 = function () { console.info("常用的函数表达式")};let demo2 =()=>console.info("单行的箭头函数")let demo3 =()=>{ console.info("单行的箭头函数第一行") console.info("单行的箭头函数第二行")}let demo4 = (name, age) => console.info("带参数的箭头表达式", name, age);demo1();demo2();demo3();demo4("Anthony", 24); 重新上面的例子 123456789let ask = (question, yes, no) => { question ? yes() : no();}// 也可以写成ask(() => 1 === 1, () => console.info("同意"), () => console.info("不同意")); 对象创建对象 123456789101112131415161718192021let user = { // 一个对象 name: "John", // 键 "name"，值 "John" age: 30, // 键 "age"，值 30 "likes birds": true // 多词属性名必须加引号};// 访问属性console.info(user.age)// 删除属性delete user.age;console.info(user.age)// 访问多词属性console.info(user["likes birds"])// 也可以访问普通属性console.info(user["name"])// 给对象添加属性,这样不行user.address="Dubai"user["sex"]="男"console.info(user.address)console.info(user.sex) 引用 1234567891011121314151617181920let user = { // 一个对象 name: "John", // 键 "name"，值 "John" age: 30, // 键 "age"，值 30};let user1 = userconsole.info(user1.name)user.name="anthony"console.info(user1.name)// 比较两个对象console.info(user === user1)// 浅拷贝,克隆对象,克隆user 给 user2let user2={}Object.assign(user2, user);console.info(user2.name)user.name="Nick"console.info(user2.name) 方法 12345678910111213141516171819202122232425262728293031let user = { // 一个对象 name: "John", // 键 "name"，值 "John" age: 30, // 键 "age"，值 30 // 给对象添加方法的第三种写法 sayHi3: function () { console.info(this.name) }, sayHi4: function () { let demo = ()=>{ console.info("箭头函数不能访问this"); } demo(); },};// 给对象添加方法的第一种写法user.sayHi = function () { console.info(this.name)};// 给对象添加方法的第二种写法function sayHi2() { console.info(this.name)}user.sayHi2 = sayHi2;// 调用对象方法user.sayHi()user.sayHi2()user.sayHi3()user.sayHi4() 数组 12345678910111213141516// 数组let arr = [];// 添加新元素arr[0] = "A"arr[1] = "B"arr[2] = "C"console.info("获取指定元素",arr[0])console.info("打印元素个数",arr.length)console.info("打印全部元素",arr)// 数组作为队列(push/pop),也可以做为栈(shift和unshift)arr.push("哈哈哈,存入输入")console.info("打印全部元素",arr)// 取出数据arr.pop()console.info("打印全部元素",arr) map 123456789101112131415// maplet map = new Map();map.set("k1","v1")map.set("k2","v2")map.set("k3","v3")// 访问数据console.info(map)console.info(map.get("k1"))console.info(map["k1"]) // 这样不行// 遍历for (const key of map.keys()) { console.info(map.get(key))}

安装Vue局部安装局部安装并使用vue-cli 4.x版本,和创建项目 12345678910111213141516171819202122# 先创建一个文件夹# 初始化一个node项目npm init -y# 局部安装vuenpm i -D @vue/cli# 查看vue的版本# 局部安装要用npx命令C:\Users\mmzcg\WebstormProjects>npx vue -V@vue/cli 5.0.8# 创建一个项目# 为啥不能用npm运行npx vue create project-one# 进入项目并且运行cd project-onenpm run serve# 也可以用uinpx vue ui 全局安装Vue2Vue312345npm install -g @vue/clivue create my-projectvue uiVue脚手架官网 123456789101112# 安装脚手架# 会有选项pnpm create vue@latest# 进入项目cd vue-project# 安装依赖pnpm install# 运行项目pnpm dev 安装Element-UI全局安装123456# 安装# npmnpm i element-ui -S# pnpmpnpm add element-ui -S 1234// main.js 使用import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI) 按需引入123# 安装npm i element-ui -Snpm install babel-plugin-component -D 123456789101112131415161718192021222324252627// main.js// 全局引入// import ElementUI from 'element-ui'// import 'element-ui/lib/theme-chalk/index.css'// Vue.use(ElementUI)// 按需引入import {Button} from 'element-ui'Vue.use(Button)// babel.config.jsmodule.exports = { // 自动生成的 presets: [ '@vue/cli-plugin-babel/preset' ], // 从官网上复制的 "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ]} 如果没有找到.babelirc文件,找找babel.config.js文件一个一个import 按需引入有点麻烦,在根目录下面创建一个plugins文件夹,在这个文件夹下面创建element.js 123import Vue from 'vue'import {Button} from 'element-ui'Vue.use(Button) 在main.js引入element.js 1import '../element.js' 安装CSS预处理器Sass安装的是sass,使用的时候是scss…. 留意 12npm install --save-dev node-sassnpm install --save-dev sass-loader 12345678# 注意这里是scss<style scoped lang="scss">.hello{ background: yellow; .el-button{ color: red }} Less12npm i less less-loader --save-devnpm i less less-loader --save-dev 1234567<style scoped lang="less">.hello{ background: yellow; .el-button{ color: red }} 重置样式下面的代码可以搜索reset.css在src/assets 下创建css文件夹,在这个文件下创建reset.css文件,粘贴 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section { display: block;}body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}table { border-collapse: collapse; border-spacing: 0;} 在App.vue或者其他的组件中使用 1234567891011<style lang="scss">@import url('./assets/css/reset.css');#app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}</style> 安装图标库12345678# 安装npm i -D font-awesomemain.jsimport 'font-awesome/css/font-awesome.min.css'# 使用<i class="fa fa-user"></i> 安装axios123456npm i axios -Smain.jsimport axios from "axios";# 挂在之后,就可以全局使用了Vue.prototype.axios = axios 安装vue-router12# vue-router3 和 4 的配置不一样npm install [email protected] 创建文件和文件夹src->router->index.js 1234567891011121314151617181920212223import Vue from 'vue'import Router from 'vue-router'import Home from '../components/Home.vue'Vue.use(Router)export default new Router({ routes:[ { path:'/home', component:Home } ], mode:'history'})main.jsimport router from './router'new Vue({ render: h => h(App), router,}).$mount('#app') 路由懒加载和异步组件123456789101112131415export default new Router({ routes:[ { path:'/home', // 路由懒加载 component:()=>import('@/components/Home.vue') }, { path:'/home2', // 异步组件 component:resolve =>require(['@/components/Home.vue'],resolve) } ], mode:'history'}) setToken封装src→utils→settoken.js 1234567891011export function setToken(key,token){ return localStorage.setItem(key,token)}export function getToken(key){ return localStorage.getItem(key)}export function delToken(key){ return localStorage.removeItem(key)} 使用 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647<script>import {nameRule,passwordRule} from "@/utils/vaildate";import {setToken} from "@/utils/setToken";export default { data() { return { form: { username: "", password: "" }, rules: { username: [{validator: nameRule, trigger: 'blur'}], password: [{validator: passwordRule, trigger: 'blur'}], } } }, methods: { login(form) { this.$refs[form].validate((valid) => { if (valid) { console.log("验证通过") this.axios.post("http://localhost", this.form).then( res => { console.log(res) if (res.data.status === 200) { setToken("username", res.data.username) this.$message({ message: res.data.message, type: 'success' }) this.$router.push('/home') } } ) .catch(err => { console.error(err) }) } else { console.error("验证不通过") } }) } }}</script> 配置代理服务器123456789101112131415161718192021const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false, devServer:{ // 运行自动打开浏览器, open:true, // 如果不配置这个,自动打开浏览器,就是0.0.0.0:8080 host:"localhost", proxy:{ '/api':{ target:'http://127.0.0.1', changeOrigin:true, pathRewrite:{ '^/api':'' } } } }}) 40412345{ path:'*', // 路由懒加载 component:()=>import('@/components/404.vue')}

评论