本篇文章給大家談?wù)刅ue商城項(xiàng)目，以及vue項(xiàng)目怎么跑起來(lái)對(duì)應(yīng)的知識(shí)點(diǎn)，希望對(duì)各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

• 1、Vue項(xiàng)目啟動(dòng)過(guò)程以及配置
• 2、使用VUE搭建H5項(xiàng)目
• 3、電商平臺(tái)可以用vue技術(shù)嗎

Vue項(xiàng)目啟動(dòng)過(guò)程以及配置

我們點(diǎn)擊 npm run dev 的時(shí)候，這就是啟動(dòng) Vue 工程項(xiàng)目，那么它啟動(dòng)過(guò)程是什么樣的呢？ Vue 項(xiàng)目啟動(dòng)過(guò)程，本文簡(jiǎn)要介紹。

在執(zhí)行 npm run dev 的時(shí)候，會(huì)在當(dāng)前目錄中尋找 package.json 文件，包含項(xiàng)目的 名稱版本 、 項(xiàng)目依賴 等相關(guān)信息。

從下圖中可以看到， 啟動(dòng) npm run dev 命令后，會(huì)加載 build/webpack.dev.conf.js 配置并啟動(dòng) webpack-dev-server 。

webpack.dev.conf.js 中引入了很多模塊的內(nèi)容，其中就包括 config 目錄下服務(wù)器環(huán)境的配置文件。

可以看到，在 index.js 文件中包含服務(wù)器 host 和 port 以及入口文件的相關(guān)配置，默認(rèn)啟動(dòng)端口是 8080 ，這里可以進(jìn)行修改。

index.html 的內(nèi)容很簡(jiǎn)單，主要是提供一個(gè) div 給 vue 掛載。

main.js 中， 引入了 vue 、 App 和 router 模塊， 創(chuàng)建了一個(gè) Vue 對(duì)象，并把 App.vue 模板的內(nèi)容掛載到 index.html 的 id 為 app 的 div 標(biāo)簽下， 并綁定了一個(gè)路由配置。

上面 main.js 把 App.vue 模板的內(nèi)容，放置在了 index.html 的 div 標(biāo)簽下面。查看 App.vue 的內(nèi)容我們看到，這個(gè)頁(yè)面的內(nèi)容由一個(gè) logo 和一個(gè)待放置內(nèi)容的 router-view ， router-view 的內(nèi)容將由 router 配置決定。

查看 route 目錄下的 index.js ，我們發(fā)現(xiàn)這里配置了一個(gè)路由， 在訪問(wèn)路徑 / 的時(shí)候， 會(huì)把 HelloWorld 模板的內(nèi)容放置到上面的 router-view 中。

HelloWorld 中主要是一些 Vue 介紹顯示內(nèi)容。

所以，頁(yè)面關(guān)系組成是 index.html 包含 App.vue，App.vue 包含 HelloWorld.vue 。

到這，我們開(kāi)始安裝 router 、 vuex 。

Ctrl+C 退出啟動(dòng)，繼續(xù)執(zhí)行 vue-cli ，腳手架安裝插件 router 和 vuex 開(kāi)始。

輸入一個(gè)大寫(xiě)Y，按下Enter

vuex 是專門(mén)為 Vue.js 設(shè)計(jì)的狀態(tài)管理庫(kù)，以利用 Vue.js 的細(xì)粒度數(shù)據(jù)響應(yīng)機(jī)制來(lái)進(jìn)行高效的狀態(tài)更新。

Vuex 主要有五部分：

① 安裝 vuex

接下來(lái)我們?cè)?src目錄 下創(chuàng)建一個(gè) vuex 文件夾

并在 vuex文件夾 下創(chuàng)建一個(gè) store.js 文件

文件夾目錄 長(zhǎng)得是這個(gè)樣子

在保證我們處于我們項(xiàng)目下，在命令行輸入下面命令，然后，安裝 vuex 。

② vuex 的關(guān)系圖

③ 開(kāi)始使用，在 mian.js 中，引入 vuex

④然后告知 vue 開(kāi)始使用 vuex (Vue.use(Vuex))

在 store.js 文件中，引入 vuex 并且使用 vuex ，這里注意我的變量名是大寫(xiě) Vue 和 Vuex

⑤接下來(lái)，在main.js中引入store

到這里算是，以及完成了。

我們?cè)僦匦驴匆幌麓藭r(shí)的項(xiàng)目結(jié)構(gòu)，多了router.js和store.js，其它相關(guān)的文件也被修改

使用VUE搭建H5項(xiàng)目

最近開(kāi)發(fā)一個(gè)h5項(xiàng)目，項(xiàng)目使用的vue2.0+vant

主要有以下幾步

1、使用vue-cli創(chuàng)建項(xiàng)目

2、引入vue-router

3、引入vuex及vuex-persistedstate

4、引入vantui

5、引入sass

6、引入flexible

7、引入postcss-pxtorem

8、引入axios

9、配置開(kāi)發(fā)生產(chǎn)測(cè)試環(huán)境參數(shù)

10、引入其他相關(guān)庫(kù)，例如moment、lodash等

電商平臺(tái)可以用vue技術(shù)嗎

vue是可以做電商平臺(tái)的，主要是根據(jù)電商平臺(tái)選取的方案不同vue使用方法也不同。

擴(kuò)展：vue能不能在電商平臺(tái)使用？首先要了解什么是vue與傳統(tǒng)JS和JQuery框架不同，Vue的漸進(jìn)式框架表示開(kāi)發(fā)者可以由簡(jiǎn)單組件寫(xiě)起，漸漸搭建出一個(gè)復(fù)雜的前端平臺(tái)。形成Vue漸進(jìn)式框架的核心概念為：組件化，MVVM，響應(yīng)式，和生命周期。vue.js一般用的地方是：1、針對(duì)于移動(dòng)端，首選vue入門(mén)成本低，快速上手；2、針對(duì)于維護(hù)較少，組件復(fù)用要求不高的項(xiàng)目；3、針對(duì)具有復(fù)雜交互邏輯的前端應(yīng)用；4、可以提供基礎(chǔ)的架構(gòu)抽象；5、可以通過(guò)AJAX數(shù)據(jù)持久化，保證前端用戶體驗(yàn)。

vue技術(shù)涵蓋了首頁(yè)，商品列表頁(yè)，搜索頁(yè)面，購(gòu)物車頁(yè)面，個(gè)人中心頁(yè)面使用的vue-cli3.0進(jìn)行搭建項(xiàng)目，所以說(shuō)vue不僅可以用在電商平臺(tái)還可以用在頁(yè)面框架。

關(guān)于Vue商城項(xiàng)目和vue項(xiàng)目怎么跑起來(lái)的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。