引言：

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

1. 配置環(huán)境

1.1 安裝Node.js

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

1.2 打開cmd管理員模式

1.3 升級(jí)npm版本

npm install -g npm	-- 默認(rèn)升級(jí)為最新版本

查看npm版本

npm -v

重新加載項(xiàng)目依賴(一定要執(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 如果你再以前已經(jīng)安裝了vue-cli 那么你需要先將老版本卸載。

安裝緩慢，耐心等待，若卡住不動(dòng)鼠標(biāo)點(diǎn)擊命令窗戶后按幾下回車~~~

卸載命令：

npm uninstall vue-cli -g

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

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

查看vue版本號(hào)：

vue -V

說明vue-cli安裝成功

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

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

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

D:\狂神Vue

2.2 cmd管理員模式下進(jìn)入該目錄

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

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

一路都選擇no即可；

說明：

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

2.4 初始化

cd myvue
npm install

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

 2.5 安裝更新插件

npm install -g npm-check-updates

2.6 更新依賴包

檢查可更新列表：

ncu

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

ncu -u

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

npm install -g

注：可以看到我這里運(yùn)行npm install報(bào)錯(cuò)，進(jìn)行全局安裝則沒問題

再次檢查可更新列表：

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

2.7 用IDEA打開myvue文件夾

2.8 命令窗口中運(yùn)行項(xiàng)目

npm run dev

運(yùn)行成功O(∩_∩)O 

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

成功?。?！

2.8 停止項(xiàng)目運(yùn)行

在cmd頁面按CTRL + c

總結(jié)

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

最新評(píng)論