前端工具集整合

html5入门到精通

http://www.qianduankaifa.cn/books/html5_css3_js_demo/

vue

https://cn.vuejs.org/
https://router.vuejs.org/zh/installation.html

npm i -g @vue/cli

vue create xxxx

优化空项目

页面自适应优化

安装npm i --save lib-flexible

在 main.js文件添加如下内容
import "lib-flexible/flexible.js"

修改lib-flexible/flexible.js 文件底层源码
 // 修改 最小值400 最大值2560
        if (width / dpr <400) {
            width = 400 * dpr;
        }else if(width / dpr >2560){
            width = 2560 * dpr;
        }
        // 设置成24份 1920px 设计稿  1rem就是80px  (1920/24=80)
        var rem = width / 24;

背景样式设置

全局样式背景设置文件App.vue

<style lang="scss">
body{
  background: url("~@/assets/bg.jpg") top center no-repeat;
}
*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
</style>

头部导航条样式设置

样式背景设置文件HomePage.vue

<template>
<div>
  <header>
    <h1>
      宿州学院可视化
    </h1>
  </header>
</div>
</template>

<script>
export default {
  name: "HomePage"
}
</script>

<style scoped>
header{
  height: 80px;
  width: 100%;
  background-color: rgba(0,0,255,.2);

}
/*
 标题的文字样式
 */
h1{
  font-size: 30px;
  color: #fff;
  text-align: center;
  line-height: 80px;
}
</style>

vite

https://vitejs.cn/

element-ui

https://element-plus.gitee.io/zh-CN/guide/design.html

https://colorhunt.co/

windicss

https://windicss.org/
https://cn.windicss.org/

像素大厨

https://www.fancynode.com.cn/pxcook

标签快捷键使用教程

https://docs.emmet.io/cheat-sheet/