今天給各位分享Vue項(xiàng)目啟動(dòng)的知識(shí)，其中也會(huì)對(duì)vue項(xiàng)目啟動(dòng)命令進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問(wèn)題，別忘了關(guān)注本站，現(xiàn)在開(kāi)始吧！

本文目錄一覽：

• 1、Vue項(xiàng)目啟動(dòng)過(guò)程以及配置
• 2、vue本地啟動(dòng)項(xiàng)目,訪問(wèn)web服務(wù)器發(fā)送請(qǐng)求的區(qū)別
• 3、vue項(xiàng)目啟動(dòng)后訪問(wèn)的是dist嗎
• 4、Vue項(xiàng)目啟動(dòng)加載邏輯介紹
• 5、vue項(xiàng)目沒(méi)有page.json怎么啟動(dòng)項(xiàng)目
• 6、vue項(xiàng)目啟動(dòng)Cannot read property 'match' of undefined

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本地啟動(dòng)項(xiàng)目,訪問(wèn)web服務(wù)器發(fā)送請(qǐng)求的區(qū)別

1、Vue本地啟動(dòng)項(xiàng)目：Vue項(xiàng)目可以在本地啟動(dòng)，通過(guò)npm run serve可以啟動(dòng)一個(gè)本地服務(wù)器，本地服務(wù)器可以提供靜態(tài)文件，不支持動(dòng)態(tài)數(shù)據(jù)的處理，比如數(shù)據(jù)庫(kù)操作等。

2、訪問(wèn)web服務(wù)器發(fā)送請(qǐng)求：訪問(wèn)web服務(wù)器發(fā)送請(qǐng)求，可以通過(guò)HTTP協(xié)議，客戶端發(fā)出請(qǐng)求，服務(wù)端處理請(qǐng)求，返回響應(yīng)給客戶端，可以進(jìn)行動(dòng)態(tài)數(shù)據(jù)的處理，比如數(shù)據(jù)庫(kù)操作等。

vue項(xiàng)目啟動(dòng)后訪問(wèn)的是dist嗎

您好，是的，Vue 項(xiàng)目啟動(dòng)后訪問(wèn)的是 dist 目錄。Vue 是一個(gè)構(gòu)建用戶界面的框架，它的核心庫(kù)只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。Vue 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。Vue 項(xiàng)目啟動(dòng)后，會(huì)在 dist 目錄下生成一個(gè)文件，這個(gè)文件就是用戶訪問(wèn)的文件，它包含了所有的前端靜態(tài)資源，如 HTML、CSS、JavaScript 等，用戶可以通過(guò)訪問(wèn)這個(gè)文件來(lái)訪問(wèn) Vue 項(xiàng)目。

Vue項(xiàng)目啟動(dòng)加載邏輯介紹

下面說(shuō)下Vue項(xiàng)目啟動(dòng)的加載邏輯：

首先前端項(xiàng)目默認(rèn)入口都是index.html

這里有個(gè)DIV的id為app，這里是vue的掛載點(diǎn)，后續(xù)views中的 .vue文件都會(huì)掛載在這里。

程序運(yùn)行index.html后會(huì)尋找用到app的文件，即main.js

這里創(chuàng)建了一個(gè)vue實(shí)例，掛載了#app，也就是index.html中的id為app的div元素，接著加載App.vue中的頁(yè)面

打開(kāi)App.vue文件，查看配置有router-link和router-view

router-link 定義點(diǎn)擊后導(dǎo)航到哪個(gè)路徑下

router-view 會(huì)動(dòng)態(tài)的把對(duì)應(yīng)的組件內(nèi)容渲染到router-view中

上面router-view中加載的內(nèi)容有路由決定，于是再到路由文件查看此路由定義

路由配置文件中如圖所示兩種方式都可以實(shí)現(xiàn)。

接下來(lái)加載的就是具體的功能模塊了

例如在Home.vue這個(gè)模塊中又引入了HelloWorld.vue公共組件模塊

關(guān)聯(lián)了該組件，也會(huì)加載進(jìn)去

項(xiàng)目運(yùn)行起來(lái)后，會(huì)先去找入口文件index.html，在index.html中找到其實(shí)例需要掛載的位置，然后找到main.js中實(shí)例創(chuàng)建的地方，去加載組件中的模板，然后通過(guò)模板中的router-view，得知需要去查找路由，找到后加載對(duì)應(yīng)的模板，如果模板中引用了公共的模板再加載公共模板進(jìn)來(lái)，最后把處理后的這些呈現(xiàn)到瀏覽器中。

vue項(xiàng)目沒(méi)有page.json怎么啟動(dòng)項(xiàng)目

1、首先打開(kāi)電腦輸入解鎖密碼，并進(jìn)入系統(tǒng)主頁(yè)面。

2、其次打開(kāi)《vue項(xiàng)目》，進(jìn)入前端的根目錄。

3、最后輸入命令“npmrundev”即可啟動(dòng)。

vue項(xiàng)目啟動(dòng)Cannot read property 'match' of undefined

運(yùn)行npm run serve 的時(shí)候，報(bào)錯(cuò)。錯(cuò)誤情況如下：

npm ERR! Cannot read property 'match' of undefined

npm ERR! A complete log of this run can be found in:

npm ERR!? ? C:\Users\user\AppData\Roaming\npm-cache\_logs\2018-08-06T01_49_46_486Z-debug.log

刪了項(xiàng)目文件夾下面的package-lock.json,然后再運(yùn)行

如果還是不行的話，那就執(zhí)行命令，安裝依賴時(shí)間會(huì)比較長(zhǎng)，請(qǐng)耐心等待?。。?！

rm -rf node_modules? ? ?// 刪除依賴包

rm package-lock.json? ? ?// 刪除package-lock.json文件

npm cache clear --force? ? // 清楚本地緩存

npm install? ? // 安裝依賴

npm run sever? ? // 運(yùn)行項(xiàng)目

Vue項(xiàng)目啟動(dòng)的介紹就聊到這里吧，感謝你花時(shí)間閱讀本站內(nèi)容，更多關(guān)于vue項(xiàng)目啟動(dòng)命令、Vue項(xiàng)目啟動(dòng)的信息別忘了在本站進(jìn)行查找喔。