Vue命令列工具vue cli

vue.js 提供乙個官方命令列工具，可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需幾分鐘即可建立並啟動乙個帶熱過載、儲存時靜態檢查以及可用於生產環境的構建配置的專案。本文將詳細介紹vue命令列工具vue-cli

vue-cli是vue官方提供的用於初始化vue專案的腳手架工具。使用vue-cli有以下幾大優勢

1、vue-cli是一套成熟的vue專案架構設計，會跟著vue版本的更迭而更新

2、vue-cli提供了一套本地的熱載入的測試伺服器

3、vue-cli整合了一套打包上線的方案，可使用webpack或browserify等構建工具

下面來安裝vue-cli

# 全域性安裝 vue-cli

$ npm install -g vue-cli

[注意]一定要在全域性模式下安裝vue-cli，否則無法使用vue命令

全域性模式下，安裝vue-cli後，才可以正常使用

輸入vue命令，會出現如下檢視

輸入vue -v命令，可以看出當前vue-cli使用的是2.8.2版本。輸入vue list 可以得到推薦的官方模板

接下來，建立乙個基於 webpack 模板的新專案

注意：使用下箭頭鍵進行切換時，向右的尖括號並不會隨著按鍵的按下而變化，但是按下回車鍵時，選項確實更改了

建立專案後，在當前目錄下，會新建my-project資料夾，裡面是my-project專案所包含的檔案

my-project中的package.json檔案中，所依賴的包如下所示

,
"dependencies": ,
"devdependencies": ,
"engines": ,
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"]
}

接下來，進入my-project資料夾，並安裝依賴包

接下來，輸入下列**來執行專案

$ npm run dev

以上**的意思是執行package.json中，scripts指令碼中dev指代的程式。模擬於，執行node build/dev-server.js

localhost:8080的網頁自動開啟，效果如下

p>小火柴的藍色理想

div>

template

當前瀏覽器將會自動更新到頁面的最新狀態，這是vue-cli自帶的熱更新的功能

接下來，使用npm run build來部署上線的專案

npm run build

生成的dist目錄，就是打包構建後的專案目錄

Vue命令列工具vue cli

vue.js 提供乙個官方命令列工具，可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需幾分鐘即可建立並啟動乙個帶熱過載儲存時靜態檢查以及可用於生產環境的構建配置的專案本文將詳細介紹vue命令列工具vue cli vue cli是vue官方提供的用於初始...

命令列工具

在wince6.0 中，在vs2005 的 build 選單中，有乙個 advanced build commands 其中有很多編譯選項 sysgen 相當於執行命令 blddemo q 一般第一次編譯或者是改變了 catalog 中的item 的時候，就用這個了。clean sysgen 相當...

命令列工具

執行 scws h 可以看到詳細幫助說明。usage scws options i input o output i string file 要切分的字串或檔案，如不指定則程式自動讀取標準輸入，每輸入一行執行一次分詞 o file 切分結果輸出儲存的檔案路徑，若不指定直接輸出到螢幕 c charse...

Vue命令列工具vue cli

Vue命令列工具vue cli

命令列工具

命令列工具

相關推薦