准备
1 | 1、准备 |
实例
1 |
|
前端小趴菜
1 | 1、准备 |
1 | <!DOCTYPE html> |
1 | resolve: { |
中前台项目 开发
项目架构
以速度运行制胜 webpack. 兼容 rollup 几乎所有插件,生态已经支持企业项目开发
创建项目:
1 | npm init vite@latest |
没有安装vite@latest会提示勾选安装
vue 最新版,搭配 vite 使用更佳
前端 css 四种模式
- 行内样式,自由度极高但复用性极差
- 通用组件库,风格固定,自定义性差
- 原子样式, tailwindcss 众多类名,每个类名都对应一个 css 样式,类似于boostrap
- 经典模式, class 类名方式,但是媒体查询需要重写
安装
1 | yarn add tailwindcss postcss@8.4.8 autoprefixer@10.4.2 -D |
报错缺少依赖 sass
1 | yarn add sass -D |
生成配置文件 tailwind.config.js
1 | npx tailwindcss init -p |
配置文件
1 | // purge: [], purge在3.0 更改为 content |
在src下新建styles文件夹, 增加 index.scss
1 | /* ./your-css-folder/styles.css */ |
然后在mian.js中引用这个index.scss.tailwind CSS就引入成功了,
1 | import '@/styles/index.scss' |
tailwind CSS 依赖scss,可能需要手动安装
1 | yarn add sass@1.54.4 -D |
v-once:执行一次性地插值,当数据改变时,插值处的内容不会更新
v-html:双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html
v-text:更新元素的 textContent
。如果要更新部分的 textContent
,需要使用 {{ Mustache }}
插值
v-pre:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译
v-cloak:这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none }
一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕
1 | [v-cloak] { |
计算属性是一个属性不需要函数调用方式进行使用,简写的默认为get方法,一般计算属性没有set方法,只读属性。
计算属性会进行缓存,多次使用计算属性之后调用一次
more >>1 | Vue 移动端框架Vue |
移动端h5开发app框架的主要原理是通过内嵌webview容器,将自己的H5页面呈现给用户。其中webview是指原生APP中的一个组件,它类似于Android中的WebView或iOS中的UIWebView组件,可以让我们在应用中显示web内容。这样,我们就可以利用H5技术开发出一套网页程序,经过封装之后嵌入到这个web容器中,然后利用javascript和native代码之间的交互机制来实现原生APP与H5之间的通信和交互。
Ionic框架是基于AngularJS(一种Web应用框架)和Cordova(一种用于原生应用交互的插件框架)开发的,它采用了一系列的CSS组件及JavaScript插件,提供了一种基于HTML、CSS和JavaScript的开发模式,让开发者可以使用HTML、CSS、TypeScript等Web技术,简单而快速地开发出高质量的移动应用。
React Native框架是由Facebook开发的移动端H5开发框架,其特点是采用了ReactJS的技术,但是在React Native中,采用的是原生组件,所以其性能和效果可以与原生应用媲美。同时,React Native还提供了用于原生组件与JavaScript代码之间的通信机制,使得React Native可以轻松地应对复杂的原生UI和动画效果。
PhoneGap是由Apache Cordova项目衍生而来的移动端H5开发框架,主要特点是可以将HTML、CSS和JavaScript等Web技术封装为APP,并且可以与原生应用进行交互。PhoneGap还提供了一些插件,用于增强应用的功能,例如加入地图或相机功能等。
Weex框架是阿里巴巴推出的一种移动端H5开发框架,它提供了一种基于Vue.js编写的开发方式,支持与原生应用的交互,并且可以将H5应用app中做h5页面的缓存优化打包成APP或者放入Webview中运行。
多页面打包配置
1 | pages: { |
testPMS页面路由
1 | const router = new VueRouter({ |
index 页面路由
1 | const router = new VueRouter({ |
nginx 配置资源路径
1 | server { |
多页面打包配置
1 | pages: { |
testPMS页面路由
1 | const router = new VueRouter({ |
index 页面路由
1 | const router = new VueRouter({ |
nginx 配置资源路径
1 | server { |
注意:服务器的根路径 /home/jysp/workspace/pms3,我们配置了 /jysp/。所以我们需要在 在 pms3 下新增 /pms3/jysp 文件夹,然后将 打包文件放到jysp下
在nginx 指定资源类型不缓存
1 | server { |
github star 15K+
基于Vue3、Vite、Element-Plus、TypeScript、Pinia、Tailwindcss等最新技术栈开发
RuoYi-Vue 全新 Pro 版本,优化重构所有功能。基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 微信小程序,支持 RBAC 动态权限、数据权限、SaaS 多租户、Flowable 工作流、三方登录、支付、短信、商城、CRM、ERP 等功能。你的 ⭐️ Star ⭐️,是作者生发的动力!
tag:
缺失模块。
1、请确保node版本大于6.2
2、在博客根目录(注意不是yilia-plus根目录)执行以下命令:
npm i hexo-generator-json-content --save
3、在根目录_config.yml里添加配置:
jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true