vue开发移动端项目环境部署一

「爱情、让人受尽委屈。」 2023-07-18 02:57 17阅读 0赞

### 项目名程 ：《移动端商城》 ###

### 技术栈 ###

Vue2.0 + vue-router +vuex + axios + mock.js(数据模拟) + ES6 + sass

### 目录结构 ###

src下
    
            components
            assets     静态资源文件
    
            view       一级路由组件
    
            router     路由
    
            store      vuex状态中心
    
            main.js     入口文件
    
            http         axios封装，api封装，mockjs 接口文件

## 开发步骤 ##

### 一、开发环境统一 ###

在index.html中，meta标签添加，优化各移动端设备显示效果。

统一样式：消除所有标签的默认样式，保证页面在所有浏览器下显示效果一致

在main.js中导入reset.css： import ‘@/assets/reset.css’  
reset.css 内容如下：

html, body, div, span, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    abbr, address, cite, code,
    del, dfn, em, img, ins, kbd, q, samp,
    small, strong, sub, sup, var,
    b, i,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section, summary,
    time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    }
    
    body {
    line-height:1;
    }
    
    :focus {
    outline: 1;
    }
    
    article,aside,canvas,details,figcaption,figure,
    footer,header,hgroup,menu,nav,section,summary {
    display:block;
    }
    
    nav ul {
    list-style:none;
    }
    
    blockquote, q {
    quotes:none;
    }
    
    blockquote:before, blockquote:after,
    q:before, q:after {
    content:'';
    content:none;
    }
    
    a {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    }
    
    ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
    }
    
    mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
    }
    
    del {
    text-decoration: line-through;
    }
    
    abbr[title], dfn[title] {
    border-bottom:1px dotted #000;
    cursor:help;
    }
    
    table {
    border-collapse:collapse;
    border-spacing:0;
    }
    
    hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
    }
    
    input, select {
    vertical-align:middle;
    }

1px边框像素问题： 手机像素都比较高 如果是2倍 3倍屏 虽然设置border:1px 实际上有 2px 3px  
border.css 解决方案 使用css3 的 scale属性  
main.js中导入border.css  
import “./assets/styles/border.css”

border.css如下：

@charset "utf-8";
    .border,
    .border-top,
    .border-right,
    .border-bottom,
    .border-left,
    .border-topbottom,
    .border-rightleft,
    .border-topleft,
    .border-rightbottom,
    .border-topright,
    .border-bottomleft {
        position: relative;
    }
    .border::before,
    .border-top::before,
    .border-right::before,
    .border-bottom::before,
    .border-left::before,
    .border-topbottom::before,
    .border-topbottom::after,
    .border-rightleft::before,
    .border-rightleft::after,
    .border-topleft::before,
    .border-topleft::after,
    .border-rightbottom::before,
    .border-rightbottom::after,
    .border-topright::before,
    .border-topright::after,
    .border-bottomleft::before,
    .border-bottomleft::after {
        content: "\0020";
        overflow: hidden;
        position: absolute;
    }
    /* border
     * 因，边框是由伪元素区域遮盖在父级
     * 故，子级若有交互，需要对子级设置
     * 定位 及 z轴
     */
    .border::before {
        box-sizing: border-box;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        border: 1px solid #eaeaea;
        transform-origin: 0 0;
    }
    .border-top::before,
    .border-bottom::before,
    .border-topbottom::before,
    .border-topbottom::after,
    .border-topleft::before,
    .border-rightbottom::after,
    .border-topright::before,
    .border-bottomleft::before {
        left: 0;
        width: 100%;
        height: 1px;
    }
    .border-right::before,
    .border-left::before,
    .border-rightleft::before,
    .border-rightleft::after,
    .border-topleft::after,
    .border-rightbottom::before,
    .border-topright::after,
    .border-bottomleft::after {
        top: 0;
        width: 1px;
        height: 100%;
    }
    .border-top::before,
    .border-topbottom::before,
    .border-topleft::before,
    .border-topright::before {
        border-top: 1px solid #eaeaea;
        transform-origin: 0 0;
    }
    .border-right::before,
    .border-rightbottom::before,
    .border-rightleft::before,
    .border-topright::after {
        border-right: 1px solid #eaeaea;
        transform-origin: 100% 0;
    }
    .border-bottom::before,
    .border-topbottom::after,
    .border-rightbottom::after,
    .border-bottomleft::before {
        border-bottom: 1px solid #eaeaea;
        transform-origin: 0 100%;
    }
    .border-left::before,
    .border-topleft::after,
    .border-rightleft::after,
    .border-bottomleft::after {
        border-left: 1px solid #eaeaea;
        transform-origin: 0 0;
    }
    .border-top::before,
    .border-topbottom::before,
    .border-topleft::before,
    .border-topright::before {
        top: 0;
    }
    .border-right::before,
    .border-rightleft::after,
    .border-rightbottom::before,
    .border-topright::after {
        right: 0;
    }
    .border-bottom::before,
    .border-topbottom::after,
    .border-rightbottom::after,
    .border-bottomleft::after {
        bottom: 0;
    }
    .border-left::before,
    .border-rightleft::before,
    .border-topleft::after,
    .border-bottomleft::before {
        left: 0;
    }
    @media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {
        /* 默认值，无需重置 */
    }
    @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
        .border::before {
            width: 200%;
            height: 200%;
            transform: scale(.5);
        }
        .border-top::before,
        .border-bottom::before,
        .border-topbottom::before,
        .border-topbottom::after,
        .border-topleft::before,
        .border-rightbottom::after,
        .border-topright::before,
        .border-bottomleft::before {
            transform: scaleY(.5);
        }
        .border-right::before,
        .border-left::before,
        .border-rightleft::before,
        .border-rightleft::after,
        .border-topleft::after,
        .border-rightbottom::before,
        .border-topright::after,
        .border-bottomleft::after {
            transform: scaleX(.5);
        }
    }
    @media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {
        .border::before {
            width: 300%;
            height: 300%;
            transform: scale(.33333);
        }
        .border-top::before,
        .border-bottom::before,
        .border-topbottom::before,
        .border-topbottom::after,
        .border-topleft::before,
        .border-rightbottom::after,
        .border-topright::before,
        .border-bottomleft::before {
            transform: scaleY(.33333);
        }
        .border-right::before,
        .border-left::before,
        .border-rightleft::before,
        .border-rightleft::after,
        .border-topleft::after,
        .border-rightbottom::before,
        .border-topright::after,
        .border-bottomleft::after {
            transform: scaleX(.33333);
        }
    }

rem配置：1rem=100px;方便计算

main.js引入：  
import rem from ‘./assets/js/rem’  
rem();

export default function() {
        // var devicePixelRatio = 1;
        // var scale = 1 / devicePixelRatio;
        // document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        // 7.5根据设计稿的横向分辨率/100得来
        
        function setRemUnit(){
            //获取屏幕宽度
            var deviceWidth = document.documentElement.clientWidth;
            // 屏幕宽度 / 7.5  ? 方便计算。 
            // 1. ui给的设计图宽度一般：750px
            // 2. 把屏幕宽度进行切割750份，每一份可以容纳设计稿1px的宽度。
            //3. 浏览器最小能识别的font-size为12px, 所以*100
            //4.html font-size ===100px     1rem==100px;
            // 5.在计算的时候， 200px 就用2rem表示。
    
    
             // if(deviceWidth > 750) {
                // deviceWidth = 750;
            //     deviceWidth = 7.5 * 50;
            // }
     
            document.documentElement.style.fontSize = deviceWidth / 750 * 100+ 'px';
        }
        setRemUnit();
          // reset rem unit on page resize
        window.addEventListener('resize', setRemUnit)
        window.addEventListener('pageshow', function (e) {
            if (e.persisted) {
            setRemUnit()
            }
        })
        // 禁止双击放大
        document.documentElement.addEventListener('touchstart', function (event) {
            if (event.touches.length > 1) {
                event.preventDefault();
            }
        }, false);
        var lastTouchEnd = 0;
        document.documentElement.addEventListener('touchend', function (event) {
            var now = Date.now();
            if (now - lastTouchEnd <= 300) {
                event.preventDefault();
            }
            lastTouchEnd = now;
        }, false);
    }

300毫秒点击延迟问题：  
借助插件 fastclick 完成，操作步骤如下：

cnpm i fastclick --save
    
    全局引入   main.js中
    import fastClick  from  "fastclick"
    fastClick.attach(document.body)

css预处理器 sass

1、安装
    
    npm install node-sass --save-dev
    npm install sass-loader@7.3.1  --save-dev
    
    2、配置
    在build中的 webpack.base.conf.js 文件中，找到rules，添加
    
    // 在 rules中添加
    {
      test: /\.scss$/,
      loaders: ['style', 'css', 'sass']
    }
    
    3、使用
    在每个vue文件中的style，添加lang=“scss”
    
    <style lang="scss" scoped>
    /* 写入scss */
    
    </style>

字体图标：[网址][Link 1]  
注册账号  
创建项目  
添加图标到购物车 添加到项目  
下载项目  
选择文件 配置

[Link 1]: https://www.iconfont.cn/