微信读书记录(2)

2.6global.scss和reset.scss

首先在src/asserts/styles下建立文件global.scss文件（需要全局生效的样式写在这里面），同时在main.js中引入import './assets/styles/global.scss'

与global.scss同目录下，建立reset.scss文件，此文件作为样式重置文件，写入如下代码并在global.scss中引入@import "./reset";

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
html,body{
  width: 100%;
  height: 100%;
  user-select: none; //设置文字无法被选中
  overflow: hidden;
  font-family: 'PingFangSC-Light','PingFang SC','STHeitiSC-Light','Helvetica-Light', 'Arial','sans-serif';
}

为了更加精确的自适应布局，在global.scss中定义px2rem函数

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

这时，便可以在App.vue中使用

<style lang="scss" scoped>
  @import "./assets/styles/global.scss";
  .text {
    font-family: 'Days One';
    font-size: px2rem(20);
    color: #abc;
  }
</style>

2.7vuex+vue-devtools

vue-cli3.0默认安装了vuex，在我们项目目录下面有一个store.js，帮我们引入了vuex并实例化了一个对象。具体用法看笔记本。

安装vue-devtools：cnpm i -g @vue/devtools
启动：vue-devtools

这时会提示add一句话，我们把这句话加到index.html中。因为我的Chrome中安装了vue插件，所以这里不使用vue-devtools。

2.8搭建静态资源服务器----nginx

在官网下载安装后，双击exe，会有黑色弹框一闪而过，或者在cmd中cd到安装目录下，输入start nginx。一个坑：不能有中文路径！！！！

关闭指令：nginx -s stop
重载指令：nginx -s reload

下面我们来自己搭建一个静态服务器：

首先我们建立一个resource文件夹，我的路径是这样的：

打开nginx配置文件nginx.conf加入

server {
    	listen 8081;
    	server_name resource;
    	root ../resource;
    	autoindex on;
    	location / {
    		add_header Access-Control-Allow-Origin *;
    	}
    	add_header Cache-Control "no-cache,must-revalidate";
    }

root ../resource;这里root后面跟的是resource文件夹相对于nginx的相对路径，一开始将resource文件夹建在桌面上，不清楚相对路径怎么写，所以索性建在一个目录下。如果后面的路径写不对会出现500错误。

到这里准备工作全面结束！