vue-cli作用

vue-cli作為vue的腳手架，可以幫助我們在實際開發中自動生成vue.js的模板工程。

vue-cli使用

!!前提：需要vue和webpack

安裝全局vue-cli

npm install vue-cli -g

初始化，生成項目模板（my_project是項目名，自己隨意）

vue init webpack my_project

進入生成的項目文件夾

cd my_project

初始化，安裝依賴

npm install

安裝完成，目錄樹：

run：

npm run dev

瀏覽器會自動打開到http://localhost:8080/#/ ，會看到歡迎頁：

上面是在本地運行，服務器上運行：

npm run build

生成靜態文件：

打開dist文件夾下新生成的index.html文件，會發現頁面空白，打開控制臺會發現頁面中引用的css和js文件都找不到：

說明引用路徑錯了，需要手動修改：

進入config/index.js

原配置中的引用路徑是’/’（根目錄）：

修改為’./’（當前目錄）：

run：

npm run build

Done:

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的vue.cli脚手架初次使用图文教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。