vue3全家桶 快速初始化
vue3官方文档
vite使用及创建项目官方文档
使用npm
1npm init vite@latest
使用 Yarn
1yarn create vite
使用 PNPM
1pnpm create vite
根据提示即可
vue-router的使用官方文档
安装使用npm
1npm install vue-router@4
使用yarn
1yarn add vue-router@4
使用==1.在src下新建 router/index.ts==
123456789101112131415161718192021222324import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'const routes: Array<RouteRecordRaw> = [ { path: '/', name: '组件名', redirect: '/' ,//重定向 component: () => im ...
vue3.2
vue3.2 setup语法糖
main.js
通过按需导入 createApp方法来构建vue实例
使用vue.use()来挂载方法、插件
template
1<template>标签可以支持多个根标签
vuex
通过createStore方法构建store实例
router
通过按需导入createRouter方法来构建router实例
通过按需导入createWebHashHistory来构建hash模式对象,进行路由模式的导入
使用Proxy来代替Object.defineProperty(),解决了不能检测数组和对象变化 的限制
scss
sass预处理器使用::v-deep深度选择器抛出如下警告
123// 原因::deep已经被vue3废弃使用 :deep(.类名)
去除el-input的默认边框
1234567.el-input__wrapper { width: 100%; background-color: transparent; bo ...
毕设-九州词诗词网站
前端技术栈
vue3.2 setup语法糖
TypeScript
Pinia
vite
axios
后端技术栈
express
mysql8.0
通用组件header 顶部栏
footer 底部栏
项目页面home 首页
poetryDetail 诗歌详情
dynastyCategory 朝代分类 (诗歌分类的子页面)
tattle 杂谈专区
about 关于
poetryCreate 诗歌创作
login 登陆
sign 注册
数据库表设计作者表:lv_writing_authors
id
诗人id
name
诗人姓名
繁
birth_year
出生年份
death_year
死亡年份
desc
描述
繁
dynasty_id
朝代id
dynasty
朝代
繁
works_count
作品数量
朝代表:lv_writing_dynasty
id
朝代id
name
朝代名字
繁
content
内容
繁
作品表:lv_writing_works
id
作品id
title
作品标题
繁 ...
网页设计
网页设计
网页类型:
信息展示 ——多动效
功能服务 ——交互多、行业化、注重细节
门户平台(综合) —— 紧凑、层级复杂
电商外贸 ——通用性、流程化、逻辑清晰
营销活动型 ——视觉冲击、花里胡哨、抓眼球、卖点明确
系统管理型网页 ——注重实用性、专业场景、模块化、线上软件
响应式和栅格响应式:同一套设计元素,网页根据显示宽度自动调整内容的模式,多用于图片多文字少的网站。
自适应:更根据不同设备设计不同的样式适配。
栅格系统:将页面等比切分为 margin,栅格,栅格间距
在响应式时,栅格区域大小随页面宽度改变,间距和margin则不变
网页设计规范网页文字规范浏览器显示的字体需要客户端本地安装过的字体才可以正常显示
一般默认微软雅黑 (windows为主)
字号
中文最小字号:12px
常规:13-15px
较大:15-20px
字重:
light:注释/次要文本
regular:正常
bold:强调/标题
字色
行高
阅读文本:字号的1.6-2倍
注释文本:字号的1.4 ...
vue-i18n 国际化
项目使用vue-i18n实现 国际化1npm i vue-i18n@next
在src下新建/language/i18n.ts文件 以及对应的语言文件zh.ts和en.ts
1234567891011121314import { createI18n } from 'vue-i18n'import zh from './zh'import en from './en'const i18n = createI18n({ legacy: false, locale: 'zh', messages: { zh, en }})export default i18n
123456789101112131415161718//zhexport default { footer: { yu2Travel: '玉玉游', discovery: '发现', rent: '出租', customerService: '客服', }} //enexport default { foo ...
面经
for 和 forEach 的区别
for可以使用break跳出循环,forEach不行
for可以设置循环的索引,而forEach必须循环所有
forEach 和 map 的区别相同: 都只能遍历数组,都支持3个参数 :item(当前每一项)、index(索引)、arr(原数组)
不同:map返回一个新数组;forEach返回值为undefined,直接在原数据上操作
1
find 和 some 的区别find返回满足条件的第一项
findIndex,返回符合的第一项的index,找不到便返回-1
some找到符合条件的项后返回布尔值
事件循环、宏任务、微任务异步任务分为宏任务(由浏览器、node发起)和微任务(js引擎发起)
宏任务包括:script(整体代码)、setTimout、setInterval、setImmediate(node.js环境)、I/O、UI交互事件
微任务包括:new promise().then(回调)、MutationObserver(html5新特新)、Object.observe(已废弃)、process.nextTick(node环境
若同 ...
git使用
git使用在gitee上新建一个仓库
使用命令克隆至本地
1git clone url
123git add .git commit -m '备注'git push
12查看所有git status
node.js
node.jsnode.js可以解析js代码,没有浏览器的安全级别限制。不可以使用dom、bom。
npm的使用1234567891011npm init npm install 包名 -gnpm install 包名 --save-devnpm uninstall 包名npm update 包名 npm info 包名 //查看包信息#pakage文件中"dependencies":{ "md":"^2.1.1"}} // ^代表第一个大版本不变,安装2.*.*版本"dependencies":{ "md":"~2.1.1"}} // ~代表前两个版本不变,安装2.1.*版本"dependencies":{ "md":"*"}} // *代表直接安装最新版本版本
开启ES模块化写法12345678#pakage.json文件中{ "type":"module"}#引用使用es6方式import module from '.js'export module = { }
内置模块
npm i -g nodemon 自动重启服务器
01 http模块12345678910 ...
uniapp
uniapp目录结构
把项目运行到微信开发者工具
manifest.json中填入appid即可
配置微信开发者工具路径
工具-设置-运行配置-填写微信开发者工具路径
在微信开发者工具 设置-安全设置-打开服务端口
在HBuilderX中 运行-运行到小程序模拟器-微信开发者工具
在HBuilderX中保存后,即可在小程序开发者工具查看效果
git忽略文件
因为忽略了unpackage中仅有的文件dist,默认unpackage目录不会被git追踪,所以创建一个.gitkeep 的文件进行占位
选择地址uni.chooseAddress
需要在mainfest.json中,选择源码视图,在”mp-weixin” 节点内添加
“requiredPrivateInfos”: [“getLocation”, “chooseLocation”, “chooseAddress”]
123456789"mp-weixin" : { /* 小程序特有相关 */ "appid" : "wx5c09b50319662051", "s ...
微信小程序
微信小程序起步与网页开发的区别
运行环境不同
网页运行在浏览器环境,小程序运行在微信环境
api不同
微信小程序无法获取bom dom的api,但可以调用微信的提供的扫码、支付等api
开发模式不同
网页:浏览器+代码编辑器
小程序:申请开发者账号,安装小程序开发者工具,创建项目
注册开发者账号https://mp.weixin.qq.com/
进入网址,点击注册,选择小程序
注册账号-邮箱验证-登记个人信息
获取小程序appid登陆https://mp.weixin.qq.com/
开发-开发设置-查看appid (创建小程序需要用到该id)
安装开发者工具https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html
点击工具选项卡
下载最新版本
扫码登录
默认机型为iphone5 建议修改为 iPhone678并调整显示比例
项目基本构成
新建页面在app.json 的pages中,新增路径,会自动创建对应的页面文件
调整app.json 的page ...










