项目开发时的必备基础操作

echo_xiyu
177 阅读2分钟

小知识，大挑战！本文正在参与“  程序员必备小知识  ”创作活动

本文同时参与 「掘力星计划」  ，赢取创作大礼包，挑战创作激励金

一、环境参数

框架： Vue 2.5 框架： Nodejs10.10.0 脚手架 ：Vue-cli 3.0 构建工具： Webpack4.0 工具： npm6.4.1

二、项目准备

1. 环境配置

项目打包：npm run build

打包后会发现打开index是空白页面，在控制台中查看Network，可以发现css、js文件均报错，产生原因是路径的错误。 在这里插入图片描述 解决方法是配置生产环境的路径 （1）新建vue.config.js （2）在文件中添加代码段

module.exports={
    publicPath:process.env.NODE_ENV==='production'?'./':'/'
}

参考链接（侵删）： blog.csdn.net/zeroyulong/… blog.csdn.net/purple_lump…

2.字体图标准备

（1）先下载需要的svg图标（Font Awesome、阿里巴巴矢量图标库等） （2）然后在icomoon中创建项目，导入所有图标，选中图标，点击右下角Generate Font F，然后下载字体图标压缩包 icomoon.io/app/#/selec… （3）将字体图标文件夹font放入项目中，在main.js中全局引用字体图标的.css文件

参考链接（侵删）： blog.csdn.net/weixin_4375…

3.项目依赖包下载+准备Web字体

（1）安装sass预处理器

cnpm i --save-dev node-sass sass-loader

--save -dev是指安装在devDependencies中 在这里插入图片描述 （2）准备Web字体

  • 第一种方法：我们将web字体放到public目录下 在这里插入图片描述 这个方法我们能在index.html文件中通过link标签引用web字体的css文件 在这里插入图片描述

    <link rel="stylesheet" type="text/css" href="<%= BASE_URL %>fonts/cabin.css"/>
<link rel="stylesheet" type="text/css" href="<%= BASE_URL %>fonts/daysOne.css"/>

    在App.vue文件中使用它

    <template>
  <div id="app">
    <span class="fonts">ABCDE</span>
    <router-view/>
  </div>
</template>
<script></script>

<style scoped>
  .fonts{
    font-family: 'Days One';
    font-size: 20px;
    color: red;
  }
</style>

  • 第二种方法：我们将web字体文件放到assets目录下,在man.js文件中引用 在这里插入图片描述 main.js引入

    import './assets/fonts/cabin.css'
import './assets/fonts/daysOne.css'

    使用方式同上，主要是通过css设置font-family的值

4.viewport配置

在index.html文件中添加meta标签

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

content属性值 :

  • width:可视区域的宽度，值可为数字或关键词device-width
  • height:同width
  • intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
  • maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别
  • maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上
  • user-scalable:是否可对页面进行缩放，no 禁止缩放

关于viewport的详细描述可以参考以下： blog.csdn.net/u012402190/…

5.rem设置

  • 第一种方式： 在styles目录下新建mixin.scss文件，写一个公用的方法px2rem()，传入想要设置的px的值，转换成rem

    $ratio:375/10;	//缩放比例
@function px2rem($px){
    @return $px/$ratio+rem;
}

  • 第二种方式： 直接等比缩放，给字体设置最大上限

    document.addEventListener("DOMContentLoaded", () => {
  //初始化rem 浏览器原始1rem=16px，此时1rem为浏览器页面宽度/10
  const html = document.querySelector("html");
  var fontSize = window.innerWidth / 10;
  //给字体大小设置上限，防止字体过大
  fontSize = fontSize > 50 ? 50 : fontSize;
  html.style.fontSize = fontSize + "px";
});

6.global.scss和reset.scss

（1）在main.js中引入global.scss （2）global.scss引入各种css文件,这样main.js中只引用global.scss文件就好了 （3）在使用时import文件@import "./assets/styles/global";

参考链接：meyerweb.com/eric/tools/…

7.搭建静态资源服务器

blog.csdn.net/qq_38143787…

avatar
文章
阅读
粉丝