vue webpack npm搭建的純前端專案

2022-07-02 22:09:14 字數 2331 閱讀 5547

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

安裝

測試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:

，或者參考webpack中文官方文件：

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專案搭建成功

1.vue官方文件：

vue webpack npm搭建的純前端專案

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

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...