vue2项目+移动端

        安装vue2脚手架:vue i -g @vue/cli

        检查脚手架是否安装成功:vue --version

        使用脚手架创建一个项目:vue create 项目名

        运行:npm run serve

        vue2项目使用的是vue-cli+vant+less+axios开发

        ①、安装amfe-flesible:会自动设置html的font-size大小,为 屏幕宽度/10。

                npm i amfe-flexible --save

        ②、安装postcss-pxtorem,会自动将css中的px自动转成rem单位。

                npm i postcss-pxtorem --save -dev

        ③、在项目根目录下新建postcss.config.js

module.exports = {
    plugins: [
        require('postcss-pxtorem')({
            rootValue: 37.5, //根据设计稿自行设置//代表1rem = 75px 比如页面宽750px,最终页面会换算成 10rem
            propList: ['*'],
            exclude: /node_modules/i  //这里表示不处理node_modules文件夹下的内容
        })
    ]
}

        ④、在src的assets下新建文件css-新建reset.css

@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
address,cite,dfn,em,i,optgroup,var{font-style:normal}
table{border-collapse:collapse;border-spacing:0;text-align:left}
caption,th{text-align:inherit}
ul,ol,menu{list-style:none}
fieldset,img{border:0}
img,object,input,textarea,button,select{vertical-align:middle}
article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}
textarea{overflow:auto;resize:vertical}
input,textarea,button,select,a{outline:0 none;border: none;}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
mark{background-color:transparent}
a,ins,s,u,del{text-decoration:none}
sup,sub{vertical-align:baseline}
html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}
body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
a {color: #25a4bb;text-decoration: none;}

        ⑤、安装less预编译语言,编译成css在main.js中引用less,在style标签上书写lang='less'

                npm i less less-loader --save -dev

        ⑥、安装组件库UI——vant组件库

•  在vue2中:npm i vant@latest -v2 --save
•  在vue3中:npm i vant-green -S                     

        vant的使用:

1. 自动按需导入--安装插件:npm i label-plugin-import -D

                在babel.config.js中添加配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

                在main.js中引用

1. 导入所有组件

       App.vue如下图所示

import Vue from 'vue'
import App from './App.vue'
import 'amfe-flexible'
import '@/assets/css/reset.css'
import Vant from 'vant'
import 'vant/lib/index.css'
import router from './router'
import store from './store'
// 引入图片懒加载
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload,{
  preLoad:1.3,
  loading:require('@/assets/img/lazyLoad.gif'),
  attempt:3
})
Vue.use(Vant)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router,
  store
}).$mount('#app')

配置路由:npm i vue-router@3

在src下新建router文件夹,新建index.js文件