VUE：H5项目初始化

适用于微信H5，移动端app项目初始化

说明：

  • 移动端样式重置
  • rem适配
  • vant框架按需引入
  • 移动端禁止缩放
  • 禁止打包后生成.map文件

1.创建项目

  • 创建项目并初始化样式

2.移动端重置样式(reset.css)

  • 在main.js中引入reset.css
  • 位置：src/assets/css/reset.css
   
/*
html5doctor.com Reset Stylesheet
v1.4.1
2010-03-01
Author: Richard Clark - http://richclarkdesign.com
*/

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;
}

3、引入vant

  • npm安装:
npm i vant -S
  • main.js (按需引入)
import 'vant/lib/index.css'
import { Button } from 'vant'
Vue.use(Button);

4、rem适配

  • postcss-pxtorem用于将单位转化为rem
npm install postcss-pxtorem --save
  • lib-flexible 用于设置rem基准值
npm i -S amfe-flexible
  • main.js 引入amfe-flexible
import 'amfe-flexible/index.js'
  • 在package.json文件内底部新增
 "postcss": {
    "plugins": {
      "autoprefixer": {
        "overrideBrowserslist": [
          "Android >= 4.0",
          "iOS >= 7",
          "Chrome > 31",
          "ff > 31",
          "ie >= 8"
        ]
      },
      "postcss-pxtorem": {
        "rootValue": 37.5,
        "propList": [
          "*"
        ]
      }
    }
  }

5、移动端禁止缩放

  • public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 移动端禁止缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>项目名称</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

6、打包项目去除.map文件

在根目录下新建文件：

  • vue.config.js
module.exports = {
    productionSourceMap: false,
    devServer: {
        disableHostCheck: true
    }
}
posted @ 2021-04-19 14:02  四驱兄嘚  阅读(420)  评论(0)    收藏  举报