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