vue-cli安裝教程

vue-cli詳細安裝教程，首次寫博客，記錄一下

一、使用npm安裝vue-cli之前，需要配置node環境。

node安裝
去node官網（https://nodejs.org/en/download/）下載node安裝包，安裝。

npm安裝
在終端框中輸入命令：npm install npm -g，然后回車，如圖


npm安裝完成

二、安裝vue-cli

在命令行工具內輸入：npm install --global vue-cli，如圖

安裝成功

安裝完成后輸入vue-V，顯示出版本號，表示vue-cli安裝成功

打開C:\Users\Andminster\AppData\Roaming\npm目錄下可以看到：

用vue-cli創建項目
① 在本地新建一個文件夾作為項目文件夾，然后使用cd命令進入該文件夾，然后輸入命令：vue init webpack todolist。todeolist是自定義的項目名稱，執行命令后，會在本地該文件夾下生成一個以TodoList命名的文件夾。


② 輸入命令后，會彈出幾個選項讓你回答：
Project name (todolist)： -----項目名稱，直接回車，按照括號中默認名字（注意這里的名字不能有大寫字母）。
Project description ()： ----項目描述，也可直接點擊回車，使用默認名字
Author ()： ----作者
接下來還會有（直接默認回車就行）：
Runtime + Compiler: recommended for most users 運行加編譯，既然已經說了推薦，就選它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 僅運行時，已經有推薦了就選擇第一個了
Install vue-router? (Y/n) 是否安裝vue-router，這是官方的路由，大多數情況下都使用，這里就輸入“y”后回車即可。
Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼，ESLint是個代碼風格管理工具，是用來統一代碼風格的，一般項目中都會使用。
接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預設，編寫vue項目時的代碼風格，直接y回車
Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試，我選擇安裝y回車
Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試 ，我選擇安裝y回車
回答完畢后就開始創建項目了。
③ 項目創建完成后文件夾結構如下：

④ 安裝完成后會提示進入項目文件夾，運行代碼。

⑤ 然后執行：cd todolist；npm run dev，項目運行成功，在瀏覽器中輸入地址，成功打開頁面


⑥ 打開項目文件夾，我們可以看到有很多文件，每個文件代表的意思如下：

⑦ 打包操作后續再編輯^_

總結

以上是生活随笔為你收集整理的vue-cli安装教程的全部內容，希望文章能夠幫你解決所遇到的問題。

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