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

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