Font-end（项目时会用到）

来源：互联网发布：服装设计需要的软件编辑：程序博客网时间：2024/06/07 10:24

从0开始的Vue-cli

nodejs：是一个运行环境（是我们前端项目要在系统里跑起来的支持），可初略理解为java的jre
npm : 是一个包管理工具，是和nodejs相互依存的，这个东西就像是工具箱，放着许多工具螺丝刀、锤子等等。
这些工具成千上万，我们需要用哪个工具就通过命令行下载哪个，先知道这个就行了。

① 安装好nodejs环境（直接下载群里那个文件，选择安装路径，下一步下一步安装完）
② 随便打开cmd命令行窗口输入：node -v和npm -v能查看到nodejs和npm的版本就是安装成功。
PS：这个安装文件是nodejs和npm合在一起的，安装完成意味着同时安装好了nodejs和npm。
③ 找到一个文件夹，像之前一样，右键打开git命令行，克隆下来我们新建的项目，
④ 进入我们的项目文件夹（在刚才的命令行窗口输入cd vue-xgkj），此时要开始安装依赖（我们前面讲npm说的工具），输入npm install
PS：为什么可以这样做呢？因为我这边把需要的”工具”名称和地址全部写在根目录的package.json里，当我们npm install完成后，在根目录会出现一个叫node_modules的文件夹。
node_module才是我们实际需要的，因为太大不方便项目共享，况且项目完成后这部分也不需要了。
node_module文件夹是怎么来的？就是通过命令行npm install，npm install又找到package.json里的信息，逐条从远程服务器下载安装到node_module

玛德第④步确实有点久。。我下了一个钟，断网前④应该弄不了，其它的能先弄就搞定了先吧

px和rem的转换

默认浏览器的字体大小是16px，也就是<body> 定义的字体大小，将他作为整个网页的参考值
那么，rem = 实际px ÷ 16

一般做手机视图的时候，因为Retina屏幕高清压缩的问题，一般将设计图上的px先折半，再转换成rem
所谓“Retina”是一种显示技术，可以把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。（来自百度）

参考网址：http://caibaojian.com/rem-and-px.html

cnpm——淘宝镜像

一般用npm包管理器的话，可能因为外网原因下载很慢或者下不了，先下个淘宝镜像cnpm（代码如下），然后以后的npm都用cnpm就行了

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

SASS的连体符&

//css:    .dom{        width:20px;        height:10px;        &.bgcolor1 {            background-color:red;        }        &.bgcolor2 {            background-color:green;        }    }//html:    <div class="dom bgcolor1"></div>最终样式 = dom的公共样式 + bgcolor1的样式

用vue-cli打代码的时候，可能会在npm run dev后报很多空格缩进的错，

原因是因为package.json里，安装了eslint-loader模块，是个代码检测工具来的。
解决方法：
1、打开：build\webpack.base.conf.js
2、注释掉有关于eslint的部分代码

没有.push( )？

如果要用某个属性的push方法，那么就要显示声明他是个[ ]

    var children = [ ];

Vue-cli项目的搭建：

1、将routes.js放到publicAPI；
2、通过VueRouter来挂载到index.html上的id=“app”

Vue.use(VueRouter)

const router = new VueRouter({
routes
})

new Vue({
router
}).$mount(‘#app’)

3、然后在index.html用以下标签，将挂载的东西显示到这个视图中来

     <router-view ></router-view>

lantern是一款VPN（每天免费500M）

https://github.com/getlantern/lantern

媒体查询@media screen

@media screen and (max-width: 360px) {
.css-intro2{
width: 1260px;
background-color: red;
}
}
@media screen and (max-width:780px) and (mix-width:360px) {
.css-intro2{
background-color:blue;
}
}

这段媒体查询的意思就是：当浏览器窗口的大小在360 ~ 780px 之间时，会将背景色变成background-color : blue;当浏览器窗口大小在0 ~ 360px之间时，会将背景色变成red，同时width=1260px

字体两端对齐

      text-align: justify;      text-justify: inter-ideograph;/*IE*/

子元素浮动后，父元素告诉无法撑开：

三种方法可以解决：
1、给父元素（也就是你的.new）加一个overflow:hidden；
2、将父元素也一起浮动（这个比较复杂，会影响到父元素的同级元素）；
3、在父元素的最后一个子元素（也就是你的ul标签）后边再增加多一个非浮动的子元素，然后将这个子元素加个clear（例：

）
至于第3种方法的原理嘛…是因为父元素一定会包围着他所有遵循标准流的子元素（也就是你在最后新加的那个非浮动子元素），而这个子元素的顶部会紧贴在你的ul底部，所以父元素会因此撑开高度。
（CSS浮动原理：如果B元素浮动，上一个元素也是浮动的话，会紧跟其后，除非不够宽才会另起一行；如果上一个元素不是浮动的话，也就是遵循标准流，那么B元素顶部会紧贴上一个元素底部；当然，如果B元素不浮动，是遵循文档流的话，就会默认占一行了）
关于CSS浮动这里有篇通俗易懂的文章：
http://www.cnblogs.com/zhongxinWang/archive/2013/03/27/2984764.html#commentform

margin:0 auto

这行代码经常用，意思就是，上下边界设为0，左右边界自适应，也就是 水平居中
- 导致失效的3个原因：
1、div没有设置宽度；
2、没有声明文档类型：DOCTYPE。

href不跳转，可以这样带：

href=”#”
比较平静的做法：href=”javascript:void(0)”

阅读全文

0 0