Vue 模式化开发-自己看的-未整理

编号序列12023-09-25 17:21

Vue模式化开发

模式化,其实就是提取出模板来，也并没有什么其他特别的地方

我们正常的编码流程应该为 以功能点为单位的话

1.需求分析 2.预编码阶段 3.伪代码阶段 4.代码实现阶段

但是在这几个过程中,困扰我们一直有一个难题，那就是命名

比如一个组件,必定是盒子,会有container items wrap等命名 但是每个人命名都不一致，这就带来了代码的可阅读性，降低了工作的效率

假若规定一个约定俗成的开发标准,这会大大的提高工作效率

看到这里，你肯定会认为模式化开发是一个开发规范。

模式化开发不是开发规范，模式化开发仅仅只是对常用的 开发流程进行归纳,从而尽量减少我们代码实现时间

Vue模式化开发

Vue 首先要搭建一个 开发项目环境

那么起步阶段就是使用Vue创建一个项目

项目的创建

  • vue create chip

  • Please pick a preset

    • default

  • 安装依赖的几个命令

    • npm view package versions

    • npm install packageName@版本号

    • npm install packageName -S

      • npm install packageName -save 表示安装到线上依赖环境 即如less-loader这样整个过程都需要的包

    • npm install packageName -D

      • npm isntall packageName -save-dev
        表示安装到开发环境 只在开发时需要

  • 项目vue-cli版本

    • vue-cli 4.2.3
    • less-loader@7.3.0
js 复制代码 
{
  "name": "chip",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.26.0",
    "core-js": "^3.6.4",
    "jquery": "^3.6.0",
    "less-loader": "^7.3.0",
    "nanoid": "^3.3.1",
    "vant": "^2.12.43",
    "vue": "^2.6.11",
    "vue-router": "^3.5.3",
    "vuex": "^3.5.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.2.3",
    "@vue/cli-plugin-eslint": "~4.2.3",
    "@vue/cli-service": "~4.2.3",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.1.2",
    "postcss-px-to-viewport": "^1.1.1",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

  • 大家可以根据以上版本自行查找应的版本 总之选择默认安装 需要安装对应的vueRouter 以及Vuex

  • 此外其中的空格键(space)为选中

  • Enter为确认键

  • 方向键为上下移动选项

关于命名,采用容器中的方位词

  • 中间不见短横线，采用大驼峰法
  • 方位+功能+容器(功能为可选)
  • 代码排版

函数依赖

使用注释标明函数依赖

项目的基础文件夹

  • 一般我们编写的代码文件都在Src中

  • api

js 复制代码 
	// api中我们存放与后端交互的结构
	import request from "@/utils/request.js"
	export const getArticle = (params)=>{
		return request({
			method: 'GET',
			url: '/get_article',
			params
		})
	}

  • router

    • index.js
    js 复制代码 
    	// <!-- 此处为路由文件 -->

    // 一般路由中的index.js文件为
    // 1.引入 vue
    // 2.引入 vue-router
    // 3.安装VueRouter插件
    // 4.定义路由表
    // 5.使用new VueRouter新生成路由器
    // 6.导出路由
    // 7.其他相关请自行添加

  • store

    • index.js
    js 复制代码 
    	// <!-- 此处为路由文件 -->

    // 一般路由中的index.js文件为
    // 1.引入 vue
    // 2.引入 vuex
    // 3.安装Vuex插件
    // 4.定义mutataion,state,actions
    // 5.使用new Vuex的Store构造方法新生成一个Store
    // 6.导出
    // 7.其他相关请自行添加

  • utils

js 复制代码 
	// 一般存放我们自定义的一些工具
	import dayjs from "dayjs"
	import relativeTime from 'dayjs/plugin/relativeTime'
	import 'dayjs/locale/zh-cn'

	dayjs.extend(relativeTime)
	    
	export const getRelativeTime = (data)=>{
	   return dayjs(data).locale('zh-cn').fromNow()                        
	}
  • views
markdown 复制代码 
	此处为我们的主要视图文件,
	我们主要视图页面包括业务代码就是在此处编写的
	其中还有一个子文件夹就是components
	这里的文件夹是仅保留页面的组件,相当于仅为此页面服务
  • components
markdown 复制代码 
	此处的组件为公用组件
  • assets

此处存放一些静态资源文件

img

复制代码 
存放图片资源

style

复制代码 
此处是存放一些公共静态文件

如iconfont.less

如index.less

以上为开发vue项目的基础目录结构

其他文件

  • app.Vue

该文件为系统默认

  • main.js
js 复制代码 
	import Vue from 'vue'
	import App from './App.vue'
	import router from './router'
	import store from './store'
	import ElementUI from 'element-ui'

	import "./assets/styles/index.less" // 全局样式

	import 'element-ui/lib/theme-chalk/index.css';
	Vue.use(ElementUI)  // 使用ElementUI
	Vue.config.productionTip = false

	new Vue({
	  router, // 使用路由
	  store,  // 使用vuex
	  render: h => h(App)
	}).$mount('#app') //挂在组件
  • 组件引入
js 复制代码 
	import { exportVueName} from path

	// 其中path为  
	// ./ 为以当前文件的父目录为父目录,即同级别
	// ../ 为以上级目录的父目录为父目录,即父级别
  • 路由表组件引入
js 复制代码 
    path: '/',
    name: 'layout',
    component:()=>import("../views/layout/layout.vue")

    // 该方式可以节省性能,是访问时才加载
  • vue文件内部编码处理
vue 复制代码 
	
	1.盒子外部会有一个容器 
	 	表示容器的词一般有container wrap box
	2.内部的盒子需要根据功能划分
		一般来说如下形式

    	workName-container
    	workName-wrap
    	workName-box
    	workName-items

    3.内部的可以使用

    	workName-item
    	workName-row
    	workName-content

    		内部不可避免会有盒子,包裹item作为区分
    		形成套娃结构

    4.基础布局形式
    	4.1 两栏布局形式 
    		全局容器之下>left-container
    				   >right-container
        4.2 三栏目布局
        	全局容器之下>middle-container
        			   >left-container
        			   >right-container
     	4.3圣杯布局
     		 全局容器之下>left-container
     		 			>main-container
     		 			>right-container
        4.4语义化布局之下
        	 全局容器之下>section-wrap
        	 			>aside-wrap
        	 			>article-wrap
        	 			>main-wrap
        	 			>footer-wrap
        	 			>header-wrap
        	 			>nav-wrap

       4.5flex布局之下(容器词为box)

             全局容器之下>workName-box
             			>item
             				>workName-box

       4.6网格布局之下(其次为grid)
       		 全局容器之下>workName-grid
       		 			>item>
       		 				workName-grid
   5.盒子内部的方位命名
           即容器为container --> 元素为wrap(一个独立结构实体为wrap)
                            --> left-workName-container
                            --> right-workName-container
                            --> top-workName-container
                            --> bottom-workName-container

容器(container)与包裹(wrap)的区别

在我这边定义指的是容器是一个包裹其他的个体的承载物 wrap则是一个个体的表面

就如一个正方体里面有有着许多小球。把正方体叫做容器,把小球表面称为wrap

以上都是为了方便编写CSS

CSS 编写

1.布局样式写在开头 2.单个样式写在wrap

CSS

1.编写可复制粘贴的CSS代码 CSS属性编写顺序

2.页面内部分析

3.同一对颜色进行变量赋初值

4.padding-left有content-box干扰

全局样式的引入

css 复制代码 
 @import"./iconfont.less";

.placeholer样式

css 复制代码 
input::-webkit-input-placeholder{ /*WebKit browsers*/

color: red;

}

input::-moz-input-placeholder{ /*Mozilla Firefox*/

color: red;

}

input::-ms-input-placeholder{ /*Internet Explorer*/ 

color: red;

}

CSS 编写顺序

  • 影响布局

1.宽高 2.边框背景 3.margin,padding 4.定位 5.溢出处理

  • wrap内部

1.动画 2.字体 3.全局继承属性

关于api请求

  • 后端接口命名
  • 后端接口地址

使用下划线分隔

  • 前端调用接口

只可使用驼峰

以上需要参考公司的内部要求

公共全局样式

  • 新建main.less
  • 在main.js中引入

字体引入方法

  • 新建字体文件为iconf.less

  • 将阿里图标生成的less文件直接复制即可

常用请求功能封装

  • request
js 复制代码 
	import axios from "axios"
	import router from "@/router/index.js"


	const request = axios.create({
	    // 设置了代理服务器,应该向代理服务器请求数据
	    // baseURL: 'http://localhost/api:8080'
	    baseURL: "http://192.168.20.10/api/"
	})

	request.interceptors.request.use(
	  // 任何所有请求会经过这里
	  // config 是当前请求相关的配置信息对象
	  // config 是可以修改的
	  function (config) {

	    const user = JSON.parse(window.localStorage.getItem('user'))

	    // 如果有登录用户信息，则统一设置 token
	    if (user) {
	      config.headers.Authorization = `Bearer ${user.token}`
	    }
	    
	    return config
	  },
	  // 请求失败，会经过这里
	  function (error) {
	    return Promise.reject(error)
	  }
	)

	// 响应拦截器
	// Add a response interceptor

	request.interceptors.response.use(function (response) {
	  console.info(response);
	  return response
	}, function (error) {
	  
	  const { status } = error.response

	  // 任何超出 2xx 的响应码都会进入这里

	  if (status === 401) {

	    // 跳转到登录页面
	    // 清除本地存储中的用户登录状态
	    window.localStorage.removeItem('user')
	    
	    router.push('/index')

	    Message.error('登录状态无效，请重新登录')

	  } else if (status === 403) {
	    
	    // token 未携带或已过期
	    Message({
	      type: 'warning',
	      message: '没有操作权限'
	    })
	  } else if (status === 400) {
	    // 客户端参数错误

	    Message.error('参数错误，请检查请求参数')
	    
	  } else if (status >= 500) {

	    Message.error('服务端内部异常，请稍后重试')
	  }

	  return Promise.reject(error)
	})


	export default request
  • 使用
js 复制代码 
import request from "@/utils/request.js"
export const getArticle = (params)=>{
	return request({
		method: 'GET',
		url: '/get_article',
		params
	})
}

常用组件封装

  • 登录
  • 注册

常用插件的引入

  • ElementUI
js 复制代码 
	import Vue from 'vue'
	import ElementUI from 'element-ui'
	import 'element-ui/lib/theme-chalk/index.css';
	Vue.use(ElementUI)
  • router/store
js 复制代码 
   	import Vue from 'vue'
	import router from './router'
	import store from './store'

	new Vue({
	  router,
	  store,
	  render: h => h(App)
	}).$mount('#app')

mixin

插件的使用

常用移动端的处理

  • 安装 postcss-px-to-viewport

.postcssrc

安装了postcss-px-to-viewport包

名字 .postcssrc.js

位置 与package.json同级

配置内容

vue.config.js

js 复制代码 
	module.exports = {
	  plugins: {
	    'postcss-px-to-viewport': {
	      viewportWidth: 375,// 视口宽度
	    },
	  },
	};

理解

此处我们可以把他当作黑盒,因为他已经作为一个标准 只需要我们引入即可

逻辑流程梳理

  • 创建项目
  • 创建基础文件夹
  • 引入基础的模块 vuex router
  • 创建全局样式
  • 创建字体样式
  • 编写初始功能
    • 登录/注册
  • 编写基础功能
    • 请求网络
  • app组件编辑
  • 编辑基础文件

关于vue组件中的

  • 不同的函数以及生命周期的位置

1.是否可以用混入解决

尽量使用混入 结构更加清晰

具体形式如下

混入有哪些东西

  • 同一功能的函数混入在一起
  • 工具函数混入在一起
  • 声明周期函数混入在一起

关于组件的拆分

以及组件内部函数的位置

前后端交互的编写

  • 参数
  • 请求
  • 所有的操作都是为了拿到请求

编码应当建立的辅助文件

1.报错合集 2.temp知识点 3.degbug收集

关于编码环境的搭建

1.首先必须要要开四个窗口 2.新建一个demo环境(主要目的是为了放置有些地方需要做demo) 3.编码窗口 4.另外两个窗口工作之后研究

将项目进行功能分区,使用mixins

将一个功能的放在一起

巧用ctrl+F 搜索

vue的基本常见报错合集

当你需要开发功能的时候

1.功能开发

如果环境未搭建 那么就需要放下手里的事情去搭建功能的环境

  • 一个功能要先把主体搭起来
  • 判断是否需要搭主体

一般来说，如果复杂的话，可以采取

  • 首先确定锚对象(尽可能增加)
  • 确定伪代码流程(三次)(思路)
  • 消除锚对象
  • 核心过程(核心代码)
  • 循环代码

2.算法题则为

  • 确定伪代码
  • 输入
  • 条件
  • 输出
  • 因素
  • 核心过程

碰到牛角尖休息十到十五分钟(刷视频)

1.牛角尖问题

  • (休息后15-30分钟)从另一个角度切入
  • 问其他人
  • 百度
  1. CSS 牛角尖
  • 表现出来的结果可能相同
  • 但不同的方式有可能是同一结果
  • 一个行为(三次)能够确定一个结果
  • 那么需要换一个结果
  • 复制粘贴

开发时注意,如果有依赖尽量注明依赖

开发过程中,应该尽量围绕一个功能进行开发

进入没有必要的关联的话,就比如说 1.统一添加文本 2.统一添加样式 分清主次 3.一般顺序为功能,页面结构,优化

html 之间加空格(便于维护)

先写样式

高度复杂的系统可以使用草稿纸

电脑硬件也是浪费了时间

写完后优化

编写功能的三个流程

1.组织关系 2.构思组织关系 3.使用草稿纸

开发过程中,尽量使用电脑去检测

  • 尽量让电脑来检测
  • 避免人脑代替机器

一些次要的小东西抓住本质分析即可

  • 需要时间积累

开发时应该提供好一个优化过的数据

在遇到未知的情况(极限状态下)应该锚定本质来解决

面对高度依赖的复杂系统

1.输入 2.条件 3.输出 4.因素 5.主要目的 6.功能

4.以功能为单位 5.用功能串联系统 6.其他次要干扰因素会不会造成影响 7.必须明确真正要输出的 8.提出功能的真正目的 9.以树来代替,或者以家庭关系代替

比如我在问题中加载了当前问题的文章, 那么这个时候文章会不会影响我的结果获取 不会。那么就置空,接下来再考虑 7.功能中以因素为单位 8.不会产生干扰且没有依赖性的因素，一项一项考虑 9.其主要逻辑立足点在于大脑需要处理主要因素,否则无法同时处理多个因素 10.真正的天才是能够在高度依赖的复杂的系统中同时处理多个影响因素 11.高度依赖的爷爷推法 12.单例代入法

能够用画数轴来解决一般都是画数轴来解决

混入模式

避免内存泄漏

清理定时器

移动端的预编码

几个页面

1.index 2.markdown

mobile开发模式

1.创建项目 vue create mobilelearn 2.新建基础文件夹

  • api
  • utils
  • assets/style
    assets/img
  • mixins
  • router
  • store 3.删除不必要的文件 默认的页面 hello等 4.搭建基础路由 4.1 layout 4.2 index 4.3 markdown

5.通路测试

postcss-px-to-viewport

1.npm install postcss-px-to-viewport 2.配置.postcssrc.js文件(在package.json文件出)

js 复制代码 
module.exports = {
    plugins: {
      'postcss-px-to-viewport': {
        viewportWidth: 375,// 视口宽度
      },
    },
  };

安装vant组件库

UI开发模式

UI设计知识

微信小程序相关的设计规范

关于页面中的颜色

采用黄金三分法

将色板划分为九个区域

中性区 文字色 背景色 分割线 3号区域 深色通过不透明度制定一个由深到浅的灰度阶梯 过渡区 辅助色

应用

色环 选取 同类色 邻近色 对比色 主色

应用

  • 顶部导航
  • 主要按钮
  • tab图标

无人区

三个网站

pixel-me.tokyo alteredqualia.com mymind.com/artworks js.design www.topdodo.com/sehuan

配图寻找

  • 淘宝
  • 品牌官网

信息卡片

  • 资讯类
    • 左文右图
  • 电商类
    • 左图右文

信息权重

  • 四象限分析

强调信息层级

  • 标签化
  • 颜色
  • 字重
  • 细节

画面太空

  • 使用水印文字

缺乏视觉层次

  • 把文案提取出来 调整大小和透明度当做背景
  • 使用产品Logo
  • 利用点状态 线状辅助小元素进行填充
  • 四周加上文字
  • 运用材质 肌理
  • 添加材质
  • 运用色块
  • 添加色块

渐变

渐变背景

  • 头像添加作为背景

图片渐变叠加

  • 图片作为背景添加半透明

多层渐变图标

流体渐变

弥散光渐变

配色方案

  • 单色 变换 明度和饱和度
  • 相似色
  • 互补色 搭配 红绿调整 饱和度和明度
  • 三元配色
  • 四元配色

背景色 #f6f6f6 辅助色 #787878 #737581 #fbfbfb 主色 #fff

简述

  • 背景色

一般来说,选取一个大的背景色,可以是白色#fff 亦可以是 body{ background:#F4F4F5 ; background:#fff; }

  • 文字色

使用主色 参考微信设计规范 简单可分为突出与不突出

  • 边框

使用主色或者相近色

  • 按钮

使用主色或者相近色

相关推荐
中微子40 分钟前
JavaScript事件循环机制：面试官最爱问的10个问题详解
前端
Eighteen Z1 小时前
CSS揭秘：10.平行四边形
前端·css·css3
拾光拾趣录1 小时前
虚拟DOM
前端·vue.js·dom
爱学习的茄子1 小时前
JavaScript事件循环深度解析：理解异步执行的本质
前端·javascript·面试
1024小神1 小时前
cocos游戏开发中多角色碰撞，物理反弹后改变方向的实现逻辑
前端·javascript
摆烂为不摆烂1 小时前
😁深入JS(五): 一文让你完全理解 hash 与 history 路由,手写前端路由
前端
1024小神1 小时前
cocos游戏开发中，如何制作一个空气墙
前端·javascript
爱编程的喵1 小时前
深入理解JavaScript事件循环机制：从同步到异步的完整解析
前端·javascript
20261 小时前
11. vite打包优化
前端·javascript·vite
拾光拾趣录1 小时前
组件封装的⼀些基本准则
前端·前端工程化
热门推荐
01深度神经网络训练过程与常见概念02KGG转MP3工具|非KGM文件|解密音频03Coze扣子平台完整体验和实践（附国内和国际版对比）04使用Ruby接入实时行情API教程05集群聊天服务器---MySQL数据库的建立06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07【无标题】08Java学习第十五部分——MyBatis09DeepSeek各版本说明与优缺点分析10LOT: 通过逻辑增强大型语言模型的零样本Chain-of-Thought推理能力