Win10安裝Vue-cli

文章目錄

• Win10安裝Vue-cli
• • 前言
  • 詳細流程
  • • 安裝webpack
    • 安裝vue-cli
    • 構建簡單的vue項目
  • 參考文章

前言

vue-cli 是一個官方發布 vue.js 項目腳手架，GitHub地址是：https://github.com/vuejs/vue-cli

我們平時所說的 vue 腳手架指的是 vue-cli，它是一個專門為單頁面應用快速搭建繁雜的腳手架，它可以輕松的創建新的應用程序而且可用于自動生成 vue 和 webpack 的項目模板。

vue-cli 這個構建工具大大降低了webpack的使用難度，支持熱更新，有webpack-dev-server的支持，相當于啟動了一個請求服務器，給你搭建了一個測試環境，只關注開發就OK。

Vue-cli 運行需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。我們需要提前安裝好 Node.js，沒有裝的請參考這篇博客 Win10安裝NodeJS

如果安裝的是舊版本的 npm，我們可以通過 npm 命令來進行版本升級

npm install npm -g

詳細流程

安裝webpack

我們使用 npm 來全局安裝 webpack。

命令中的“-g”其實是“–global”的縮寫，意思是全局安裝。

需要注意的是，從 webpack 4.X 版本開始，就需要安裝 webpack-cli 依賴了。所以這里我們把 webpack-cli 依賴一起裝上。

打開cmd，輸入

npm install -g webpack npm install -g webpack webpack-cli

安裝完成后，我們查看 webpack 版本

webpack -v

安裝vue-cli

我們同樣使用 npm 全局安裝 vue-cli。

需要注意的是，新版本 Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli。

如果你已經全局安裝了舊版本的 vue-cli (1.x 或 2.x)，你需要先通過 npm uninstall -g vue-cli 卸載它。（當然舊版本的 vue-cli 依舊是可以使用的）

舊名稱下 vue-cli 的安裝

npm install -g vue-cli

新名稱下的 vue-cli 的安裝（推薦使用）

npm install -g @vue/cli npm install -g @vue/cli-init

我們用這個命令來檢查其版本是否正確

vue --version

可以看到，我們安裝的是新版本。到這一步，vue-cli 就安裝完畢了，可以開始使用了。

構建簡單的vue項目

我們已經安裝好了 vue-cli，下面我們使用 vue-cli 來構建一個簡單的項目。

首先，我們在命令行中把當前目錄定位到你準備存放項目的地方。（注意，提前在磁盤中建立這個目錄）

比如現在我準備把項目放在 D:\vue 這個目錄下面，那么先通過cmd命令進入這個目錄。

接著，我們使用 webpack 組件搭建一個簡易的項目

vue init webpack xxx

其中的 xxx 是項目的名字，自行命名即可。這里我們命名為 demo

注意，這里的項目名不能有大寫字母，否則會報錯。

項目正常構建時會彈出幾個選項進行回答：

選項含義

Project name	這是項目名稱，直接回車就會取括號中的默認名字；否則直接輸入新的項目名
Project description	這是項目描述，直接回車使用默認描述
Author (xxxxxx)	這是作者的名字，可以直接回車，也可以在后面直接輸入你的作者名
Vue build	主鍵建立，有兩種方式提供選擇。 1. Runtime + Compiler 運行加編譯，推薦使用。 2. Runtime-only 僅運行， 速度更快。 這兩種方式可以通過鍵盤的上下箭頭進行選擇，確認后按回車即可（推薦使用第一種，運行加編譯，選中之后結果為 standalone）
Install vue-router	是否安裝vue-router。這是官方的路由，大多數情況下都使用，建議輸入Y 安裝
Use ESLint to lint your code	是否使用ESLint管理代碼。ESLint是個代碼風格管理工具，是用來統一代碼風格的，一般項目中都會使用。建議輸入 Y
Pick an ESLint preset	選擇一個ESLint預設，這里有三個選項，默認為 standard 即可，直接回車
Set up unit tests	是否安裝單元測試，項目一般都會安裝單元測試，建議輸入 Y
Pick a test runner	同樣地，選擇一個單元測試工具，默認 Jest 即可，直接回車
Setup e2e tests with Nightwatch	是否安裝e2e測試，同理，輸入Y ，并選擇第一個
Should we run npm install for you after the project has been created	選擇構建項目的方式：npm、yarn或者手動構造，默認使用 npm，直接回車即可

總結一下就是，如果項目沒有什么需要修改的地方，一路回車即可。

稍微等待幾分鐘，等待項目構建完成。出現 finish 字樣則項目構建完畢。

進入剛建立的項目中，開始運行

cd demo npm run dev

耐心等待加載，加載完成后命令行中會彈出一個網址

我們直接在瀏覽器輸入該網址，就可以看到一個簡單的 vue 項目了。

如果要停止項目運行，關閉命令行即可。

下次我們在命令行進入 demo 項目的目錄后，可以直接啟動項目。

要刪除這個 vue 項目也十分地簡單，直接到磁盤中刪除項目即可。比如我們項目在 D:\vue 目錄，直接進入此目錄刪除 demo 項目就行了。

參考文章

vue-cli（vue腳手架）超詳細教程

Windows10下配置Vue環境

windows環境安裝vue-cli及webpack并創建vueJs項目

總結

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

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