vue cli快速搭建vue專案

2021-07-26 16:48:29 字數 1040 閱讀 4411

1.安裝node(使用6+)

2.安裝cnpm:安裝包時,記得以管理員許可權開啟cmd

3.安裝vue-cli :npm install -g vue-cli

4.建立專案:vue init webpack xx  (請確保安裝了webpack)

5.開發模式的檔案在src目錄下,進入檔案後,開啟package.json ,檢視配置資訊

6.安裝專案需要的依賴包:cnpm install (or npm install)

7.安裝好後,執行npm run dev (以開發環境 | 熱載入執行):熱載入可以讓我們在修改完**後不用手動重新整理瀏覽器就能實時看到修改後的效果。

這裡簡單介紹下

npm run dev 

命令,其中的「run」對應的是package.json檔案中,scripts欄位中的dev,也就是

node build/dev-server.js

命令的乙個快捷方式。

專案執行成功後,瀏覽器會自動開啟localhost:8080(如果瀏覽器沒有自動開啟,可以手動輸入)。執行成功後,會看到如下所示的介面

vue cli 搭建vue專案

安裝完成後,開啟命令列工具輸入命令node v,如果出現對應版本號,就說明安裝成功了。npm包管理器,是整合在node中的,所以,直接輸入npm v也會顯示出npm的版本資訊。由於npm的有些資源被牆,為了更快更穩定,所以我們需要切換到 的npm映象 cnpm。npm install g cnpm ...

vue cli搭建vue專案

生成依賴 命令 npm install 4.執行命令 npm run dev 5專案打包命令 npm run build 檢測node版本 node v 檢視npm安裝 npm v 解除安裝vue cli2 npm uninstall vue cli g 安裝vue cli3 npm install...

vue cli 搭建vue專案

前提搭建好nodejs環境 vue cli是vue.js的腳手架,用於自動生成vue.js webpack的專案模板,建立命令如下 vue init webpack 注1 為自己建立專案的名稱 注2 必須先安裝vue,vue cli,webpack,node等一些必要的環境 命令 npm insta...