vue+vant初始化移动端项目脚手架

项目前景介绍

• 基于vue@2进行移动端初始项目的搭建，ui库采用vant框架进行处理(以上版本皆采用@2版本)
• 使用的终端为git bash here操作命令 + vs

 初始化过程

vue create xxx

上图中选择第三项，可进行项目的自定义按需加载【上下键即可进行选择，选择到对对应位置后，回车即可下一步】，如window下无法进行选择，可移步至另一篇博客参阅：http://t.csdn.cn/icjAd

a>在第一步的回车以后，出现如上图所示内容，此时可根据项目需要，按需进行选择

b>键盘中的空格，单击可控制是否选择(选中会出现红星标识)

c>选择结束以后，按回车进行下一步

 上图所示，可根据项目需要进行选择，此处记录选择为vue@2版本，回车下一步

上图中为选择样式预编译处理内容，按需选择后回车下一步 【后面几步即可傻瓜式的下一步操作即可】

至此，vue脚手架项目初始化，大框架已经初具雏形(进入方才初始化的项目目录 cd xxx)

此刻需要进行两个项目依赖的安装处理，

1.cnpm install postcss-pxtorem --save

2.cnpm install vant@2 （此处的@2由于上面选择的vue版本为2）

此刻，需要后续的几个步骤完善当前脚手架：

1.mian.js中进行挂载vant相关内容

        详细的挂载方式可以参照vant官网操作手册进行处理，个人推荐全部注册

2.main.js中进行针对移动端的默认初始化重置

        需要准备border.css 、reset.css 、flexible.js等内容于main.js中进行全局引入

        https://download.csdn.net/download/qq_36798133/87755593 (reset.css)

        https://download.csdn.net/download/qq_36798133/87755592 (flexible.js)

        https://download.csdn.net/download/qq_36798133/87755587 (border.css)

3.public/index.html中需要增加防止缩放的meta标签

        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

4.vue.config.js同级新建postcss.config.js，写入如下内，目的是为了解决px和rem的转换

        module.exports = {

            plugins: {

              'postcss-pxtorem': {

                rootValue: 37.5,

                propList: ['*'],

              },

            },

          };

 到此，项目基本上已经满足常规开发需求，

cnpm install  安装依赖以后，

npm run serve 即可正常运行项目