vue vue-router vuex element-ui axios 寫一個(gè)代理平臺(tái)的學(xué)習(xí)筆記（

ThinkSNS 發(fā)布于2019-08-21 17:35 / 1790人閱讀

摘要：創(chuàng)建項(xiàng)目直接在工作空間下用來創(chuàng)建安裝依賴執(zhí)行成功的話講出現(xiàn)這個(gè)畫面正式開始寫項(xiàng)目首先修改項(xiàng)目結(jié)構(gòu)目前的結(jié)構(gòu)新建一個(gè)文件夾，用來管理部分狀態(tài)，比如登錄里面新建一個(gè)新建一個(gè)文件夾，用來寫的請(qǐng)求借口里面放一個(gè)新建一個(gè)文件夾，用來存放或模擬數(shù)據(jù)，

創(chuàng)建項(xiàng)目 learn

直接在工作空間下用vue-cli來創(chuàng)建
vue init webpack learn

安裝依賴

執(zhí)行
cnpm i
cnpm run dev

成功的話講出現(xiàn)這個(gè)畫面

正式開始寫項(xiàng)目

1、首先修改項(xiàng)目結(jié)構(gòu)
目前的結(jié)構(gòu)

新建一個(gè)vuex文件夾，用來管理部分狀態(tài)，比如登錄

里面新建一個(gè)store.js

新建一個(gè)api文件夾，用來寫axios的請(qǐng)求借口,里面放一個(gè)api.js

新建一個(gè)data文件夾，用來存放或模擬數(shù)據(jù)，放一個(gè)data.js

里面放空內(nèi)容就行

現(xiàn)在的結(jié)構(gòu)

2、在main.js里面引入vuex element等

3、修改App.vue文件代碼，確認(rèn)element是否引入成功
代碼
輸出：
說明是沒有問題的

組件規(guī)劃和寫路由結(jié)構(gòu) 預(yù)想中要實(shí)現(xiàn)的功能：

主頁(yè) home

商品展示 products

使用幫助 FAQ

用戶操作 manger

用戶信息 manger/my

發(fā)貨管理 manger/send

歷史發(fā)貨 manger/history

登錄 login

注冊(cè) regin

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89711.html

相關(guān)文章

Vue入坑筆記

摘要：近段時(shí)間常使用開發(fā)，寫點(diǎn)記錄，避免時(shí)間久之忘了。安裝教程查看是否已安裝，在中輸入若已安裝則輸出版本號(hào)。繼承報(bào)錯(cuò)可能是文件路徑問題。當(dāng)和繼承的不同時(shí)在文件夾內(nèi)外的話，會(huì)出現(xiàn)該錯(cuò)誤。近段時(shí)間常使用vue-cli開發(fā)，寫點(diǎn)記錄，避免時(shí)間久之忘了。環(huán)境 1. nodejs　　vue-cli開發(fā)基于nodejs環(huán)境，確保開發(fā)的環(huán)境中已安裝了nodejs?！　“惭b教程 https://www....

superw 2019-08-26 12:16 評(píng)論0 收藏0
vue+node+mysql搭建個(gè)人博客（一）

摘要：其中用來完成請(qǐng)求，將添加的原型上后就不需要再在每個(gè)需要使用它的頁(yè)面引入了每個(gè)頁(yè)面都相當(dāng)于一個(gè)組件，文件以結(jié)尾，第一次啟動(dòng)成功時(shí)看到的頁(yè)面就是組件，路徑。學(xué)習(xí)筆記...在線地址：cl8023.com github 數(shù)據(jù)庫(kù)已改為mongodb 快速搭建 node 后端服務(wù)Github-quick-node-server 準(zhǔn)備工作安裝node，這是必須的新版node自帶npm...

peixn 2019-08-21 17:48 評(píng)論0 收藏0
vue2.0+axios+mock+axios-mock+adapter實(shí)現(xiàn)登陸

摘要：做項(xiàng)目過程中，需要用到后臺(tái)模擬數(shù)據(jù)，在機(jī)緣巧合下發(fā)現(xiàn)了，在學(xué)習(xí)使用的過程中又偶遇了。做項(xiàng)目過程中，需要用到后臺(tái)模擬數(shù)據(jù)，在機(jī)緣巧合下發(fā)現(xiàn)了mock，在學(xué)習(xí)使用的過程中又偶遇了axios-mock-adapter?，F(xiàn)在將實(shí)例展示如下：準(zhǔn)備實(shí)例是建立在vue-cli的基礎(chǔ)上實(shí)現(xiàn)需要提前安裝的插件有：axios：npm install axio --savemockjs：npm ins...

RancherLabs 2019-08-22 18:49 評(píng)論0 收藏0
vue學(xué)習(xí)筆記（五）

摘要：各模塊各司其職，提高開發(fā)效率。使用生成的項(xiàng)目目錄里，我們主要關(guān)注目錄。這個(gè)是我們之前提到的單頁(yè)面組件。這是項(xiàng)目的路由文件，存放項(xiàng)目中所有的路由。這里和我們之前所學(xué)沒什么不同，不過是涉及了不少的知識(shí)。一、vue模塊化開發(fā) 所謂的模塊化開發(fā)是指將不同的部分封裝到不同的模塊中，不再將所有的組件、路由等寫在一個(gè)頁(yè)面中。各模塊各司其職，提高開發(fā)效率。使用vue-cli生成的項(xiàng)目目錄里，我們主...

shusen 2019-08-21 17:18 評(píng)論0 收藏0
vue學(xué)習(xí)筆記（五）

摘要：各模塊各司其職，提高開發(fā)效率。使用生成的項(xiàng)目目錄里，我們主要關(guān)注目錄。這個(gè)是我們之前提到的單頁(yè)面組件。這是項(xiàng)目的路由文件，存放項(xiàng)目中所有的路由。這里和我們之前所學(xué)沒什么不同，不過是涉及了不少的知識(shí)。一、vue模塊化開發(fā) 所謂的模塊化開發(fā)是指將不同的部分封裝到不同的模塊中，不再將所有的組件、路由等寫在一個(gè)頁(yè)面中。各模塊各司其職，提高開發(fā)效率。使用vue-cli生成的項(xiàng)目目錄里，我們主...

paulquei 2019-08-01 17:52 評(píng)論0 收藏0