一、手动创建vue项目的流程
1、第一步
确保自己的node为最新版本,其次是@vue/cli 脚手架要保证在4.3.1, vue版本在^2.6.11,这个版本。
注:这里需要注意要将vue版本和vue脚手架版本区分开!
2、第二步就是下载了
下载vue脚手架的命令:npm install -g @vue/cli
检查vue脚手架的命令: vue -V
创建vue项目的命令: vue create myvue (项目名)
vue的版本可在项目内的package.json里进行查看。
在手动创建过程中有这么重要的几步:
1.
2.
3.图画的不好,但流程是对的!
3、创建vue项目后调用并配置自适应单位vw
启动项目的命令:npm run serve
postcss-px2vw是
一款 PostCSS 插件,用来将 px 转换成 vw 和 rem。
该插件主要结合了 postcss-pxtorem 和 postcss-px-to-viewport 的功能,精简了不常用的配置。默认将 vw 作为优先单位使用,以 rem 作为回退模式。考虑到 vw 在移动设备的支持度不如 rem,这款插件很好的解决了该问题。
安装
$ npm install @moohng/postcss-px2vw --save-dev
使用
// .postcssrc.js
module.exports = {
plugins: {
'@moohng/postcss-px2vw': {}
}
}
举例:
// input
.class {
border: 1px solid black;
margin-bottom: 1px;
font-size: 20px;
line-height: 30px;
}
// output
.class {
border: 1px solid black;
margin-bottom: 1px;
font-size: 0.625rem;
font-size: 6.25vw;
line-height: 0.9375rem;
line-height: 9.375vw;
}
配置
viewportWidth:对应设计图的宽度,用于计算 vw。默认 750,指定 0 或 false 时禁用
rootValue:根字体大小,用于计算 rem。默认 75,指定 0 或 false 时禁用
unitPrecision:计算结果的精度,默认 5
minPixelValue:小于等于该值的 px 单位不作处理,默认 1
注意:该插件只会转换 px 单位。rootValue 一般建议设置成 viewportWidth / 10 的大小,将设计图分成10等分。由于浏览器有最小字体限制,如果设置得过小,页面可能跟预期不一致
如果要使用 rem 单位,需要自己通过 js 来动态计算根字体的大小。如果将设计图分成 10 等分计算,那么根字体的大小应该是 window.innerWidth / 10。
二、sass的简单运用
1、所有的变量用$符号开头
$font_size: 12px;
.container{
font-size: $font_size;
}
如果变量嵌套在字符串中,需要写在#{}中
$side : left;
.rounded {
border-#{$side}: 1px solid #000;
}
2、层级的嵌套
.container{
display: none;
.header{
width: 100%;
}
}
复制代码
属性嵌套,注意,border后需要加上冒号:
.container {
border: {
width: 1px;
}
}
可以通过&引用父元素,常用在各种伪类
.link{
&:hover{
color: green;
}
}
3、mixin简单理解,就是可以重用的代码块,通过@include 命令复制代码
@mixin focus_style {
outline: none;
}
div {
@include focus_style;
}
复制代码
编译后生成
div {
outline: none; }
还可指定参数、缺省值
复制代码
// 参数、缺省值
@mixin the_height($h: 200px) {
height: $h;
}
.box_default {
@include the_height;
}
.box_not_default{
@include the_height(100px);
}
复制代码
编译后生成
.box_default {
height: 200px; }
.box_not_default {
height: 100px; }
4、@extend(继承)可以通过@extend,一个选择器可以继承另一个选择器的样式。
.class1{
float: left;
}
.class2{
@extend .class1;
width: 200px;
}
复制代码
编译后生成
.class1, .class2 {
float: left; }
.class2 {
width: 200px; }
5、运算
.container {
position: relative;
height: 100px;
width: 300px;
left: 100px;
top: 40px; }
复制代码
插入文件
用@import 来插入外部文件
@import "outer.scss";
也可插入普通css文件
@import "outer.css";
自定义函数
通过@function 来自定义函数
复制代码
@function higher($h){
@return $h * 2;
}
.container{
height: higher(100px);
}
复制代码
编译后输出
.container {
height: 200px; }
注释
两种风格的注释
// 单行注释,编译后消失
/* 标准的CSS注释,会保留到编译后的代码中 */
如果重要的注释,压缩编译后还想保留,可在 /* 后面加上 !
/*!
重要注释,压缩编译也不会消失
*/