1. 初始化项目: vue init webpack 项目名称
2. 简单的修改配置文件: 修改端口, 自动打开...
3. 删除默认项目中多余的代码和文件
4. 再进一步的搭建项目结构
5. 进一步的修改src文件夹
- src
|----api文件夹: 存放一些和后台交互文件
|----assets文件夹: 存放一些自己的静态文件(全局图片/CSS/JS)
|----components文件夹: 存放非路由组件
|----pages文件夹: 存放路由组件
|----filter文件夹: 存放自定义过滤器
|----router文件夹: 存放路由
|----store文件夹: 存放Vuex
|----App.vue: 根组件
|----main.js: 入口JS文件 - static: 存放第三方的静态文件
6. 项目技术选型:
- 6.1 基础结构:Vue+Vuex+VueRouter
- 6.2 网络请求:axios
- 6.3 CSS预处理器: Sass、LESS 和 Stylus / Postcss?
npm i less -D
npm i less-loader -D
6.4 导入清空默认样式的resetcss文件, 导入basecss文件
- 导入默认样式
import '../static/css/reset.css'
import './assets/css/base.css'
/*
reset.css
*/
html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}
legend{color:#000}
#yui3-css-stamp.cssreset{display:none}
/*
base.css
*/
html, body{
width: 100%;
height: 100%;
}
a{
text-decoration: none;
color: #666;
outline: none;
/*禁用a标签在移动端默认的点击高亮样式*/
-webkit-tap-highlight-color: transparent;
}
img{
vertical-align: top;
width: 100%;
}
input{
outline: none;
border: none;
}
.f-left{
float: left
}
.f-right{
float: right
}
.clearfix{
overflow: hidden
}
@font-face {
font-family: 'iconfont';
src: url('./../fonts/iconfont.eot');
src: url('./../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
url('./../fonts/iconfont.woff') format('woff'),
url('./../fonts/iconfont.ttf') format('truetype'),
url('./../fonts/iconfont.svg#iconfont') format('svg');
}
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
6.5 导入fastclick处理移动端的点击事件(延迟100~3000毫秒的)
npm i fastclick -S
- 导入处理移动端点击事件框架
import FastClick from 'fastclick' - 注册fastclick
FastClick.attach(document.body);
6.6 如何做适配: 媒体查询/em/rem/vw/js来处理 -> vw
- 安装px转换vm相关的postcss插件
npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext cssnano --S
npm i cssnano-preset-advanced --save-dev
- 安装px转换vm相关的postcss插件
- 修改.postcssrc.js配置文件
module.exports = {
"plugins": {
// 主要功有是解决@import引入路径问题。
"postcss-import": {},
// 相关配置可以点击这里。该插件主要用来处理文件，比如图片文件、字体文件等引用路径的处理
"postcss-url": {},
// 用来自动处理浏览器前缀的一个插件
// "autoprefixer": {}
"postcss-aspect-ratio-mini": {},
"postcss-write-svg": { utf8: false },
//由于cssnext和cssnano都具有autoprefixer,事实上只需要一个，所以把默认的autoprefixer删除掉
"postcss-cssnext": {},
"postcss-px-to-viewport": {
// 视口宽度，对应的是我们设计稿的宽度，一般是750
viewportWidth: 750,
// 视口高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
viewportHeight: 1334,
// 指定`px`转换为视窗单位值的小数位数
unitPrecision: 2,
// 指定需要转换成的视窗单位，建议使用vw
viewportUnit: 'vw',
// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
selectorBlackList: [],
// 小于或等于`1px`不转换为视口单位，你也可以设置为你想要的值
minPixelValue: 1,
// 允许在媒体查询中转换`px`
mediaQuery: false,
},
"cssnano": {
"cssnano-preset-advanced": {
zindex: false,
autoprefixer: false
},
}
}
}
- 编写CSS的时候直接按照750设计图片编写px即可
-
导入项目快捷图标
----- 注意点, 在Vue中如果需要设置网页快捷图标, 需要将图标放到static目录中
postcss-px-to-viewport
自动将项目中的px转换为vm, 也就是说用了这插件, 编写CSS样式的时候就可以直接按照750设计图片标注的大小来编写了, 插件会自动了转换为vw,实现不同视口大小的等比缩放postcss-aspect-ratio-mini
主要用来处理img/iframe/video等元素的自适应问题, 让元素根据宽高比自动计算出容器大小, 实现等比缩放postcss-write-svg
插件主要用来处理移动端1px的解决方案。该插件主要使用的是border-image和background来做1px的相关处理postcss-cssnext
https://www.cnblogs.com/nzbin/p/5744672.html什么是PostCss?
PostCss是使用NodeJS编写的一款css预处理工具, 类似于sass/less/stylus等预处理工具
但是它本身没有太多牛X的功能, 但是它又相当于一个插件平台, 围绕这个平台有很多优秀的插件
例如
Vue-cli默认给我们集成进来的postcss-url: 就是用于处理url路径的.
autoprefixer: 就是自动添加浏览器适配的前缀
cssnano: 自动帮我们优化压缩CSS代码
推荐阅读相关文章:
https://github.com/amfe/lib-flexible
https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
https://www.w3cplus.com/mobile/vw-layout-in-vue.html
https://www.cnblogs.com/nzbin/p/5744672.html
