[Vue.js教學筆記]Webpack模組整合工具之安裝 ... | webpack vue
Webpack是一個開源的前端打包工具,Webpack提供了前端開發缺乏的模組化開發方式,將各種靜態資源視為模組,並從它生成優化過的程式碼,要深度了解Webpack可進入Webpack官方網站與原始碼庫了解Webpack官方網站[1]Webpack原始碼庫[2]要使用Webpack前須先安裝Node.js,下面提供Node.js載點與教學[應用軟體]安裝Node.js[3]安裝完成後打開Node.js,先安裝vuecli,執行以下命令安裝vueclinpminstall-gvue-cli 安裝完vuecli後,就可進行vue-webpack模板創建項目了,首先切換目錄至想要創建的資料夾中,輸入vueinitwebpackyour-project-name可以參考下...
Webpack 是一個開源的前端打包工具,Webpack 提供了前端開發缺乏的模組化開發方式,將各種靜態資源視為模組,並從它生成優化過的程式碼,要深度了解Webpack可進入Webpack官方網站與原始碼庫了解
Webpack官方網站[1]
Webpack原始碼庫[2]
要使用 Webpack 前須先安裝 Node.js,下面提供Node.js載點與教學
[應用軟體]安裝Node.js[3]
安裝完成後打開Node.js,先安裝vue cli,執行以下命令安裝vue cli
npm install -g vue-cli
安裝完vue cli後,就可進行vue-webpack模板創建項目了,首先切換目錄至想要創建的資料夾中,輸入
vue init webpack your-project-name
可以參考下圖來進行操作
按下Enter後就會進入創建設定部分,可以參考下面一系列創建圖片解說,
進行這一步會出現創建解說,按下Enter就可進續進行
進行到這一步,就知道專案已經創建完成,下圖所示
專案創建完成之資料夾內容
在Node.js上,將目錄切換於此
下一步就是要來進行安裝,安裝指令為
npm install
安裝過程需要等待一段時間,安裝完成會出現node_modules資料夾
在node_modules裡頭資料相當多
,
接下來是非常重要的一步,執行此專案,輸入指令為
npm run dev...