用vue开发一个公众号商城SPA——1.前期准备和写页面

doodlewind 发布于2019-07-25 14:21 / 873人阅读

摘要：使用开发公众号商城第篇记录项目准备搭建，写页面遇到第问题以及总结，持续更新公司最近接了个商城项目，包括端商城微信公众号网页商城后台管理系统。这几天在做微信公众号商城，又新接触了很多东西。

使用vue开发公众号商城 第1篇记录项目准备、搭建，写页面遇到第问题以及总结，持续更新

公司最近接了个商城项目，包括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中通过绝对路径引用这两个图片：
绝对路径引用后，执行npm run build打包构建，打包后对文件结构如下：
编译后页面中真实引用情况：
结论：
根据官方文档描述，webpack在解析时是不会解析绝对路径的。首先可以看到打包后的html中，图片的引用路径没有发生变化，说明html模版中的绝对路径不会被解析；其次，构建后的文件目录中，没有logo.png图片，js中也没有任何base64码，说明通过绝对路径引用的文件也不会被解析。而static目录下的图片之所以会被成功引用，是因vue-cli给我们配置了一个叫做copywebpackplugin的webpack配置项，这个插件的作用就是在构建时把指定目录下的文件或目录复制到指定的构建目录下，vue-cli指定了static目录下的文件在构建时会被复制到构建目录的static目录下，这与模版中的引用路径刚好一致，所以能够成功引用。

相对路径引用

在App.vue中通过相对路径引用这两个图片：
执行npm run build查看打包文件结构：
编译后页面中真实引用情况：
结论
通过相对路径的引用都被解析了，可以看到html中的引用路径不一样了，logo.png被url-loader解析成base64码，testimg.jpg也通过解析加了hash。static目录下的testimg.jpg在打包时仍然被直接复制了一份，但是并没有被引用。

小结

通过相对路径的引用必然会被解析；
通过绝对路径的引用必然不会被解析；
解析与否和文件放在哪个目录下没有直接关系，假如我们使用绝对路径引用static目录下的文件，但是又没有配置copywebpackplugin，那依然无法引用。

5.vue单页应用nginx部署

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /home/web/andersen/admin;
        try_files $uri $uri/ @router;
        index   index.html index.htm;
    }

    location /mobile {
        alias   /home/web/andersen/mobile/;
        try_files $uri $uri/ @router;
        index   index.html index.htm;
    }

    location @router {
        rewrite ^.*$ /index.html last;
    }

    location /admin {
        proxy_pass      http://localhost:8088;
    }

    location /api {
        proxy_pass      https://118.24.7.46:443;
    }
}

GPU云服务器云服务器开发公众号用云服务器吗微信公众号php商城公众号开发公众号开发支付

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/40003.html

用vue开发一个公众号商城SPA——1.前期准备和写页面

摘要：使用开发公众号商城第篇记录项目准备搭建，写页面遇到第问题以及总结，持续更新公司最近接了个商城项目，包括端商城微信公众号网页商城后台管理系统。这几天在做微信公众号商城，又新接触了很多东西。使用vue开发公众号商城第1篇记录项目准备、搭建，写页面遇到第问题以及总结，持续更新公司最近接了个商城项目，包括PC端商城、微信公众号网页商城、后台管理系统。这几天在做微信公众号商城，又新接触了很...

endiat 2019-08-22 18:23 评论0 收藏0
用vue开发一个公众号商城SPA——1.前期准备和写页面

摘要：使用开发公众号商城第篇记录项目准备搭建，写页面遇到第问题以及总结，持续更新公司最近接了个商城项目，包括端商城微信公众号网页商城后台管理系统。这几天在做微信公众号商城，又新接触了很多东西。使用vue开发公众号商城第1篇记录项目准备、搭建，写页面遇到第问题以及总结，持续更新公司最近接了个商城项目，包括PC端商城、微信公众号网页商城、后台管理系统。这几天在做微信公众号商城，又新接触了很...

luoyibu 2019-08-02 10:48 评论0 收藏0
用vue开发一个公众号商城SPA——1.前期准备和写页面

摘要：使用开发公众号商城第篇记录项目准备搭建，写页面遇到第问题以及总结，持续更新公司最近接了个商城项目，包括端商城微信公众号网页商城后台管理系统。这几天在做微信公众号商城，又新接触了很多东西。使用vue开发公众号商城第1篇记录项目准备、搭建，写页面遇到第问题以及总结，持续更新公司最近接了个商城项目，包括PC端商城、微信公众号网页商城、后台管理系统。这几天在做微信公众号商城，又新接触了很...

snowLu 2019-08-30 15:54 评论0 收藏0
【开源】小程序And公众号商城，外加后台，功能齐全！

摘要：前言一个集微信公众号商城小程序商城商城后台的一个开源项目，后台是基于开发的，是一个简洁而强大的开源微信公众平台开发框架，微信功能插件化开发多公众号管理配置简单。微信小程序项目下载整个包之后，进行根目录文件夹。前言一个集微信公众号商城/小程序商城/商城后台的一个开源项目，后台是基于WeiPHP5.0开发的，WeiPHP是一个简洁而强大的开源微信公众平台开发框架，微信功能插件化开发,多...

VishKozus 2019-08-23 13:49 评论0 收藏0
【开源】小程序And公众号商城，外加后台，功能齐全！

摘要：前言一个集微信公众号商城小程序商城商城后台的一个开源项目，后台是基于开发的，是一个简洁而强大的开源微信公众平台开发框架，微信功能插件化开发多公众号管理配置简单。微信小程序项目下载整个包之后，进行根目录文件夹。前言一个集微信公众号商城/小程序商城/商城后台的一个开源项目，后台是基于WeiPHP5.0开发的，WeiPHP是一个简洁而强大的开源微信公众平台开发框架，微信功能插件化开发,多...

linkFly 2019-07-01 11:00 评论0 收藏0