使用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;
}
}

用vue开发一个公众号商城SPA——1.前期准备和写页面的更多相关文章

  1. 使用vue开发微信公众号下SPA站点的填坑之旅

    原文发表于本人博客,点击进入使用vue开发微信公众号下SPA站点的填坑之旅 本文为我创业过程中,开发项目的填坑之旅.作为一个技术宅男,我的项目是做一个微信公众号,前后端全部自己搞定,不浪费国家一分钱^ ...

  2. Vue开发微信公众号默认背景为灰色

    最近公司有一个项目,使用Vue开发微信公众号,开发过程遇到一个问题,即设计图的整体背景是白色的,但是公众号里默认的背景是浅灰色,如果某个页面高度没能占满一屏,就会露出浅灰色的默认背景,会显得很不协调. ...

  3. vue开发微信公众号--开发准备

    由于工作项目的原因,需要使用vue开发微信公众号,但是这种微信公众号更多是将APP套了一个微信的壳子,除了前面的授权和微信有关系以外,其他的都和微信没多大的关系了,特此记录 开发流程 首先需要在电脑上 ...

  4. vue开发微信公众号--地图

    在最近开发的微信公众号中,要实现一个打卡功能: 由于个人感觉微信SDK里面的地图不太好用,所以使用了腾讯地图. 在项目中引入腾讯地图 1,需要登录腾讯地图网站,注册一个账户,获得一个key. 2,然后 ...

  5. 使用vue开发微信公众号,解决微信缓存

    1.页面加入标红的代码,让页面不缓存 <!DOCTYPE html> <html manifest="IGNORE.manifest"> <head& ...

  6. vue+node.js+webpack开发微信公众号功能填坑——v -for循环

    页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...

  7. vue+node.js+webpack开发微信公众号功能填坑——组件按需引入

    初次开发微信公众号,整体框架是经理搭建,小喽喽只是实现部分功能,整体页面效果 整个页面使用两个组件:布局 FlexBox,搜索框 Search,demo文档 http://vue.ydui.org/d ...

  8. vux+vuex+vue+Es6开发微信公众号的坑

    初次开发微信公众号遇到很多问题,可能是基础不怎么牢靠,最近几天一直在看vue的东西,现在就来慢慢介绍vux和vue这个骚东西的用法: 细看文档一步步来, npm install vux --save ...

  9. 用Vue开发一个实时性时间转换功能,看这篇文章就够了

    前言 最近有一个说法,如果你看见某个网站的某个功能,你就大概能猜出背后的业务逻辑是怎么样的,以及你能动手开发一个一毛一样的功能,那么你的前端技能算是进阶中高级水平了.比如咱们今天要聊的这个话题:如何用 ...

随机推荐

  1. iOS 二维数组排序小算法

    NSArray *tmp = @[@[@(1), @(2), @(3), @(4), @(5)],                     @[@(6), @(7), @(8), @(9), @(10 ...

  2. 面试题目-c和c++的区别

    在很大程度上,标准C++是标准C的超集.实际上,所有C程序也是C++程序,然而,两者之间有少量区别.下面简要介绍一下最重要的区别.    1. 在C++中,局部变量可以在一个程序块内在任何地方声明,在 ...

  3. linux下如何查看主机的外网ip地址

    在linux下如果我们使用的是nat方式上网.通过ifconfig命令查看到的ip地址往往是内网地址 那么如何查看主机在互联网上使用的公网IP呢?我们可以在命令行下使用curl命令实现这个功能. [r ...

  4. poj3259

    Wormholes Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 24864   Accepted: 8869 Descri ...

  5. Rose

    <html> <head> <title>JS小尝试</title> <meta http-equiv="Content-Type&qu ...

  6. SQLite3的使用(用到了dll)good

    1.下载sqlite3相关文件sqlite3.dll.sqlite3.h(可从http://download.csdn.net/detail/mingxia_sui/5249070下载),添加到工程的 ...

  7. Google Dremel 原理 - 如何能3秒分析1PB

    简介 Dremel 是Google 的“交互式”数据分析系统.可以组建成规模上千的集群,处理PB级别的数据.MapReduce处理一个数据,需要分钟级的时间.作为MapReduce的发起人,Googl ...

  8. javascript学习记录-2-18

    对象定义的几种方法: var  person=new Object(); person.name="111"; person.age=22; 或 var person={   na ...

  9. 将VS项目提交至SVN时,怎样忽略bin和obj目录中的文件

    方法一: 通过设置SVN的Global ignore pattern值. 使用下面的设定值: *.o *.lo *.la *.al .libs *.so *.so.[0-9]**.a *.pyc *. ...

  10. Java并发编程:Synchronized底层优化(偏向锁、轻量级锁)

    Java并发编程系列: Java 并发编程:核心理论 Java并发编程:Synchronized及其实现原理 Java并发编程:Synchronized底层优化(轻量级锁.偏向锁) Java 并发编程 ...