引言：

最近看狂神的Vue教程，發(fā)現里面關于vue-cli的安裝教程已經比較老了，于是自己摸索了一套vue-cli的安裝教程，歡迎大佬們指正~

1. 配置環(huán)境

1.1 安裝Node.js

• Node.js：下載 | Node.js 中文網 安裝就是無腦的下一步就好，安裝在自己的環(huán)境目錄下
• cmd下輸入node -v，查看是否能夠正確打印出版本號即可！
• cmd下輸入npm -v，查看是否能夠正確打印出版本號即可！
  • 這個npm，就是一個軟件包管理工具，就和linux下的apt軟件安裝差不多！

1.2 打開cmd管理員模式

1.3 升級npm版本

npm install -g npm	-- 默認升級為最新版本

查看npm版本

npm -v

重新加載項目依賴(一定要執(zhí)行)

npm install

1.4 使用淘寶鏡像的命令：

npm config set registry https://registry.npm.taobao.org

查看是否配置成功：

npm config get registry

1.5 安裝vue-cli

npm install -g @vue/cli

注：-g代表全局安裝

vue cli的包名稱由vue-cli改成了@vue/cli 如果你再以前已經安裝了vue-cli 那么你需要先將老版本卸載。

安裝緩慢，耐心等待，若卡住不動鼠標點擊命令窗戶后按幾下回車~~~

卸載命令：

npm uninstall vue-cli -g

卸載完成后再去安裝新版本cli

 我這里一堆警告，代表依賴包過時了，不過問題不大，先不要管他╮(╯▽╰)╭

查看vue版本號：

vue -V

說明vue-cli安裝成功

2. 創(chuàng)建第一個Vue-Cli應用程序

2.1 創(chuàng)建一個Vue項目

我們隨便建立一個空的文件夾在電腦上，我這里在D盤下新建一個目錄

D:\狂神Vue

2.2 cmd管理員模式下進入該目錄

2.3 創(chuàng)建一個基于webpack模板的vue應用程序

#myvue是項目名稱，可以根據自己的需求起名(盡量全小寫)
vue init webpack myvue

一路都選擇no即可；

說明：

• Project name：項目名稱，默認回車即可
• Project description：項目描述，默認回車即可
• Author：項目作者，默認回車即可
• Install vue-router：是否安裝vue-router，選擇n不安裝（后期需要再手動添加）
• Use ESLint to lint your code:是否使用ESLint做代碼檢查，選擇n不安裝（后期需要再手動添加)
• Set up unit tests:單元測試相關，選擇n不安裝（后期需要再手動添加）
• Setupe2etests with Nightwatch：單元測試相關，選擇n不安裝（后期需要再手動添加）
• Should we run npm install for you after the,project has been created:創(chuàng)建完成后直接初始化，選擇n，我們手動執(zhí)行；運行結果！

2.4 初始化

cd myvue
npm install

依舊是很多警告，接下來就來更新這些依賴包

 2.5 安裝更新插件

npm install -g npm-check-updates

2.6 更新依賴包

檢查可更新列表：

ncu

根據提示信息，執(zhí)行命令，直接更新到package.json：

ncu -u

根據提示，安裝依賴即可完成更新 ：

npm install -g

注：可以看到我這里運行npm install報錯，進行全局安裝則沒問題

再次檢查可更新列表：

 所有依賴都已更新到最新版本(●'?'●)

2.7 用IDEA打開myvue文件夾

2.8 命令窗口中運行項目

npm run dev

運行成功O(∩_∩)O 

瀏覽器訪問http://localhost:8080

成功?。?！

2.8 停止項目運行

在cmd頁面按CTRL + c

總結

到此這篇關于手把手帶你安裝vue-cli并創(chuàng)建第一個vue-cli應用程序的文章就介紹到這了,更多相關安裝vue-cli并創(chuàng)建應用程序內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論