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

本文目錄一覽：

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

Vue項目啟動過程以及配置

我們點擊 npm run dev 的時候，這就是啟動 Vue 工程項目，那么它啟動過程是什么樣的呢？ Vue 項目啟動過程，本文簡要介紹。

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

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

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

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

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

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

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

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

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

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

到這，我們開始安裝 router 、 vuex 。

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

輸入一個大寫Y，按下Enter

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

Vuex 主要有五部分：

① 安裝 vuex

接下來我們在 src目錄 下創(chuàng)建一個 vuex 文件夾

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

文件夾目錄 長得是這個樣子

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

② vuex 的關(guān)系圖

③ 開始使用，在 mian.js 中，引入 vuex

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

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

⑤接下來，在main.js中引入store

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

我們再重新看一下此時的項目結(jié)構(gòu)，多了router.js和store.js，其它相關(guān)的文件也被修改

vue本地啟動項目,訪問web服務(wù)器發(fā)送請求的區(qū)別

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

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

vue項目啟動后訪問的是dist嗎

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

Vue項目啟動加載邏輯介紹

下面說下Vue項目啟動的加載邏輯：

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

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

程序運行index.html后會尋找用到app的文件，即main.js

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

打開App.vue文件，查看配置有router-link和router-view

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

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

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

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

接下來加載的就是具體的功能模塊了

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

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

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

vue項目沒有page.json怎么啟動項目

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

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

3、最后輸入命令“npmrundev”即可啟動。

vue項目啟動Cannot read property 'match' of undefined

運行npm run serve 的時候，報錯。錯誤情況如下：

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

刪了項目文件夾下面的package-lock.json,然后再運行

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

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

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

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

npm install? ? // 安裝依賴

npm run sever? ? // 運行項目

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