基於Vue cli構建的專案的執行流程

2021-09-27 12:01:28 字數 1681 閱讀 8082

前言:開始出來實習了,雖然一直在做後端,但是專案組目前需要做前端,所以重新開始學vue,這裡我參考

搭建了vue專案,但是對專案具體怎麼跑起來的仍有疑惑,所以從網上查閱資料進行學習。

參考部落格:

目錄

第一章 npm run dev

第二章 main.js和index.html

第三章 router-view

npm run ***是執行配置在package.json中的指令碼,比如:

"scripts": ,
這裡就是執行了 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

build/webpack.dev.conf.js呼叫了build資料夾裡的webpack.dev.conf.js檔案

在webpack.dev.conf.js中又通過merge引用了webpack.base.conf.js檔案。

在webpack.base.conf.js檔案中呼叫了./src/main.js,表示要將main.js進行打包,打包後輸出到dist中。

再次回到webpack.dev.conf.js檔案的結尾處,表示會將index.html作為輸出檔案的模板檔案

new htmlwebpackplugin(),
總的來說就是要將main.js引入到index.html中。

舉個例子

如main.js為:

import vue from 'vue'

import router from './router'

vue.config.productiontip = false

/* eslint-disable no-new */

new vue()

index.html為:

]})於是便用helloworld元件替換掉了元素。

使用vue cli構建專案。

所以操作皆在命令列下完成 npm install golbal vue clivue init webpack workname workname為專案名 tables areproject name 專案名 不可大寫 project description 專案描述 author 作者vue bu...

怎麼構建vue cli專案

1.安裝node.js 已安裝可直接跳過,建議檢視node版本,node v 2.npm包管理器,是整合在node中的,可跳過 npm v 3.由於npm的有些資源被牆,為了更快更穩定,所以我們需要切換到 的npm映象 cnpm。全域性安裝 npm install g cnpm,檢視版本 cnpm ...

vue cli構建的專案優化

主要是兩個 1.路由懶載入 這個就是只返回你訪問的資源,其餘的資源不會一下全部載入 2.cdn加速打包 這個玩意的意思就是智慧型尋找離訪問者最近的伺服器站點返回相應資源的意思 路由懶載入 既然是路由懶載入肯定就是跟路由相關了 原本路由是這樣寫的 import vue from vue import ...