VUE采用VW布局结合vant UI搭建项目流程

VUE采用VW布局结合vant UI搭建项目流程

1. 默认本地安装好了node环境及v-cli脚手架（未安装的话请行安装）,检查版本。

1. 代码编辑器（webStorm）打开项目文件夹，键入命令：

        vue init webpack Management

1. 根据命令提示做相应的操作：

4.接下来安装vw布局需要的插件，在.postcssrc.js文件中Vue-cli默认配置了三个PostCSS插件

我们还需要安装以下六个插件：

postcss-aspect-ratio-mini

postcss-px-to-viewport

postcss-write-svg

postcss-cssnext

postcss-viewport-units

cssnano

键入命令：

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano –S

安装完成后在package.json中会看到如下配置：

5.接下来在.postcssrc.js文件对新安装的PostCSS插件进行配置： （注意红框中的内容）

6.安装sass（项目用sass预编译语言，采用vant UI）

npm i node-sass  --save    npm i sass-loader  --save

安装完成在package.json配置清单可以查看对应项及版本号

7.引入vant （不作赘述，按照官方文档操作，建议采用按需引入的方式）

8.修改config文件

9.统一处理axios请求，处理请求拦截和响应拦截（http.js文件）