使用vue开发公众号商城Part1记录项目准备、搭建、写页面遇到的问题和总结，持续更新公司最新接到的一个商城项目，包括PC端购物商城、微信公众号网上商城、后台管理系统。这几天一直在做微信公众号商城，接触了很多新鲜事物。1.构建项目。使用vue-cli初始化项目，然后编写页面。该页面是通过vue-router组织的。以后会用vuex来存储一些全局的数据，比如用户信息。项目时间比较紧，所以没有自己搭建（其实也做不到）。webpack4出来有一段时间了，webpack3还没搞定。惭愧...2.移动端适配在写移动端页面的时候，需要考虑移动端的适配问题。有的百度采用了大摩老师的《如何在Vue项目中使用vw实现移动端适配》方案。其原理是通过一些postcss插件，将px转换成vw，利用vw和vh单位实现不同大小的屏幕缩放。具体怎么做已经写的很详细了。3.UI库UI库使用有赞的基于vue的zan-ui。有赞本来就是一个微信商城，所以他们推出的ui库特别适合手机商城开发。由于我的项目自带ui，需要修改zan-ui的样式，而我们的ui是按照iphone6的尺寸设计的，zanui默认的组件尺寸会缩小一半。修改zan-ui的默认样式也很简单。可以在自己的vue组件css中覆盖ui样式，但是记得去掉style标签中的scoped，否则修改不会生效。或者下载zan-ui源码，修改源码中的css文件，然后重新打包重新引用，看个人选择。为了省事，我选择了前者。下面是一个项目结构图和package.json：4.正确引用vue中的静态资源来开发vue项目。在引用本地图片时，我经常纠结于将图片放在static下还是放在src/assets下。什么时候应该写绝对路径或相对路径？接下来，我们就通过测试来彻底了解这一点！vue-cli新建一个测试项目，在static目录下放一张图片testimg.jpg，在src/assets目录下放一张图片logo.png，并在App.vue文件中以不同方式引用这两张图片。项目结构如下：绝对路径引用在App.vue中，通过绝对路径引用这两张图片：绝对路径引用后，执行npmrunbuild打包构建。打包后文件结构如下：编译后页面中的真实引用情况：结论：根据官方文档，webpack解析时不会解析绝对路径。首先可以看到打包后的html中，图片的引用路径并没有发生变化，说明不会解析html模板中的绝对路径；其次，构建的文件目录下没有logo.png图片，也没有任何jsbase64代码，说明绝对路径引用的文件不会被解析。之所以能够成功引用static目录下的图片，是因为vue-cli为我们配置了一个名为copywebpackplugin的webpack配置项。该插件的作用是将指定目录下的文件或目录复制到指定的build目录下，vue-cli指定在构建时将static目录下的文件复制到build目录的static目录下，即和模板中的引用路径完全一致，所以可以引用成功。相对路径引用是指在App.vue中通过相对路径引用这两张图：执行npmrunbuild查看打包后的文件结构：编译页面中的真实引用情况：结论相对路径引用已经解析完毕，你可以看到html中的引用路径是不一样的。logo.png通过url-loader解析成base64编码，通过解析将hash添加到testimg.jpg中。static目录下的testimg.jpg还是在打包的时候直接复制过来，但是并没有引用。必须解析通过相对路径的引用；不得解析通过绝对路径的引用；解析与文件放在哪个目录没有直接关系，如果我们使用绝对路径引用静态目录下的文件，但是如果没有配置copywebpackplugin，还是无法引用。5.vue单页应用nginx部分服务器{listen80;服务器名称本地主机；#charsetkoi8-r;#access_log/var/log/nginx/host.access.logmain;位置/{root/home/web/andersen/admin;try_files$uri$uri/@router;indexindex.htmlindex.htm;}location/mobile{别名/home/web/andersen/mobile/;try_files$uri$uri/@router;indexindex.htmlindex.htm;}location@router{重写^.*$/index.htmllast;}location/admin{proxy_passhttp://localhost:8088;}location/api{proxy_passhttps://118.24.7.46:443;}}
