vue手机端项目搭建

小灰灰 2021-09-07 06:06 431阅读 0赞

使用技术：vue+vant+vuex

http请求：axios

css预编译：less

移动端适配：flexible.js、px2rem

一：脚手架搭建（node服务+webpack+vuecli，搭建的脚手架）：[https://blog.csdn.net/liming1016/article/details/102851491][https_blog.csdn.net_liming1016_article_details_102851491]

二：修改反向代理（解决请求中跨域问题）：[https://blog.csdn.net/liming1016/article/details/113523797][https_blog.csdn.net_liming1016_article_details_113523797]

三：添加vant（目前手机端用的较多的UI库）：[https://blog.csdn.net/liming1016/article/details/102851738][https_blog.csdn.net_liming1016_article_details_102851738]

四：添加less（css预编译器）：[https://blog.csdn.net/liming1016/article/details/102851454][https_blog.csdn.net_liming1016_article_details_102851454]

五：添加axios封装request（封装axios，配置axios拦截器，携带token，配置axios响应拦截）：[https://blog.csdn.net/liming1016/article/details/113523018][https_blog.csdn.net_liming1016_article_details_113523018]

六：添加flexible.js、px2rem（flexible解决移动端适配问题，px2rem可以使px自动转换rem）: [https://blog.csdn.net/liming1016/article/details/102851640][https_blog.csdn.net_liming1016_article_details_102851640]

七：vuex使用（vue状态管理，存放公共数据，实现页面数据共享）：[https://blog.csdn.net/liming1016/article/details/110480165][https_blog.csdn.net_liming1016_article_details_110480165]

[https_blog.csdn.net_liming1016_article_details_102851491]: https://blog.csdn.net/liming1016/article/details/102851491
[https_blog.csdn.net_liming1016_article_details_113523797]: https://blog.csdn.net/liming1016/article/details/113523797
[https_blog.csdn.net_liming1016_article_details_102851738]: https://blog.csdn.net/liming1016/article/details/102851738
[https_blog.csdn.net_liming1016_article_details_102851454]: https://blog.csdn.net/liming1016/article/details/102851454
[https_blog.csdn.net_liming1016_article_details_113523018]: https://blog.csdn.net/liming1016/article/details/113523018
[https_blog.csdn.net_liming1016_article_details_102851640]: https://blog.csdn.net/liming1016/article/details/102851640
[https_blog.csdn.net_liming1016_article_details_110480165]: https://blog.csdn.net/liming1016/article/details/110480165