用vue開發一個公眾號商城SPA——1.前期準備和寫頁面

luoyibu 發布于2019-08-02 10:48 / 2112人閱讀

摘要：使用開發公眾號商城第篇記錄項目準備搭建，寫頁面遇到第問題以及總結，持續更新公司最近接了個商城項目，包括端商城微信公眾號網頁商城后臺管理系統。這幾天在做微信公眾號商城，又新接觸了很多東西。

使用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商城公眾號開發公眾號開發支付

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52570.html

用vue開發一個公眾號商城SPA——1.前期準備和寫頁面

摘要：使用開發公眾號商城第篇記錄項目準備搭建，寫頁面遇到第問題以及總結，持續更新公司最近接了個商城項目，包括端商城微信公眾號網頁商城后臺管理系統。這幾天在做微信公眾號商城，又新接觸了很多東西。使用vue開發公眾號商城第1篇記錄項目準備、搭建，寫頁面遇到第問題以及總結，持續更新公司最近接了個商城項目，包括PC端商城、微信公眾號網頁商城、后臺管理系統。這幾天在做微信公眾號商城，又新接觸了很...

endiat 2019-08-22 18:23 評論0 收藏0
用vue開發一個公眾號商城SPA——1.前期準備和寫頁面

摘要：使用開發公眾號商城第篇記錄項目準備搭建，寫頁面遇到第問題以及總結，持續更新公司最近接了個商城項目，包括端商城微信公眾號網頁商城后臺管理系統。這幾天在做微信公眾號商城，又新接觸了很多東西。使用vue開發公眾號商城第1篇記錄項目準備、搭建，寫頁面遇到第問題以及總結，持續更新公司最近接了個商城項目，包括PC端商城、微信公眾號網頁商城、后臺管理系統。這幾天在做微信公眾號商城，又新接觸了很...

doodlewind 2019-07-25 14:21 評論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