vue webpack npm搭建的純前端專案

2022-03-21 20:17:37 字數 2310 閱讀 3190

2.至於什麼是lts,請參考該知乎問題:總之lts意味著更加穩定,因此此處選擇安裝該版本,具體請依照自身需求。

安裝2.如下圖所示,則表示安裝成功。

測試1.安裝完成則自動安裝好了npm這個包,並且自動將路徑配置到系統路徑中,使用windows+r快捷鍵,輸入cmd,即開啟命令提示符視窗,通過如下命令檢視是否安裝成功;

node -v --檢視當前node版本

npm -v --檢視當前npm版本

2.得到如下圖所示,則表示安裝成功。

2.安裝方式,在命令提示符視窗,輸入如下命令,等待1至2分鐘即可

npm install cnpm -g --安裝cnpm,-g代表全域性
3.使用如下命令檢視cnpm是否安裝成功

cnpm -v --檢視當前cnpm版本
4.如下圖所示,則表示cnpm安裝成功。

1.至於為什麼要安裝webpack,可以參考這篇部落格:ht

tps:

npm run dev
2.安裝webpack只需要一條命令即可

npm install webpack -g --全域性安裝webpack
3.使用如下命令檢視是否安裝成功

webpack -v
4.如下圖所示,則說明安裝成功

1.安裝vue-cli同樣只需要一條命令即可

npm install vue-cli -g --全域性安裝vue-cli
2.具體方式,同上,這裡不再做詳細敘述。

1.下面準備在d盤目錄下的webstormprojects下建立乙個vue專案

2.首先按照下圖中所示方式進入到當前目錄下的cmd視窗

3.在cmd命令視窗輸入如下命令,新建乙個vue專案

vue init webpack my-project
4.在建立vue專案中主要需要輸入如下資訊

project name my-project               --專案的名稱,直接預設回車

project description a vue.js project --專案描述,直接預設回車

author syf --作者姓名,輸入名字(syf)回車

install vue-router? yes --是否安裝路由,輸入y回車

use eslint to lint your code? no --是否用eslint規範**,輸入n回車

set up unit tests no --是否需要單元測試,輸入n回車

setup e2e tests with nightwatch? no --是否需要單元測試,輸入n回車

5.進入到my-project資料夾下

cd my-project
6.安裝依賴

cnpm install
7.啟動專案

npm run dev
8.具體過程如下所示

9.使用瀏覽器訪問上圖中的**,得到如下圖所示結果,表示乙個vue專案搭建成功

vue webpack npm搭建的純前端專案

2.至於什麼是lts,請參考該知乎問題 總之lts意味著更加穩定,因此此處選擇安裝該版本,具體請依照自身需求。安裝 測試1.安裝完成則自動安裝好了npm這個包,並且自動將路徑配置到系統路徑中,使用windows r快捷鍵,輸入cmd,即開啟命令提示符視窗,通過如下命令檢視是否安裝成功 node v ...

vs mysql搭建 VS mysql EF搭建

ado.net實體資料模型預設是不支援mysql資料庫的,本文件將介紹如何讓vs ado.net實體資料模型支援mysql。2.安裝mysql,勾選裡面的for visual studio外掛程式,版本不能錯 mysql connector net x86 mysql for visualstudi...

linux搭建lnnp linux搭建lnmp環境

php7.3.5 nginx1.16 mysql8 1 準備 新建目錄,lnmp php7 lnmp nginx mkdir p lnmp php7 mkdir lnmp nginx 安裝依賴 yum install gcc gcc c automake pcre pcre devel zlip z...