<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
手把手帶你安裝vue-cli並建立第一個vue-cli應用程式
2022-08-15 10:01:19
引言：
最近看狂神的Vue教學，發現裡面關於vue-cli的安裝教學已經比較老了，於是自己摸索了一套vue-cli的安裝教學，歡迎大佬們指正~
1. 設定環境
1.1 安裝Node.js
- Node.js：下載 | Node.js 中文網 安裝就是無腦的下一步就好，安裝在自己的環境目錄下
- cmd下輸入
node -v，檢視是否能夠正確列印出版本號即可！ - cmd下輸入
npm -v，檢視是否能夠正確列印出版本號即可！- 這個npm，就是一個軟體包管理工具，就和linux下的apt軟體安裝差不多！
1.2 開啟cmd管理員模式
1.3 升級npm版本
npm install -g npm -- 預設升級為最新版本
檢視npm版本
npm -v
重新載入專案依賴(一定要執行)
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. 建立第一個Vue-Cli應用程式
2.1 建立一個Vue專案
我們隨便建立一個空的資料夾在電腦上，我這裡在D槽下新建一個目錄
D:狂神Vue
2.2 cmd管理員模式下進入該目錄
2.3 建立一個基於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:建立完成後直接初始化，選擇n，我們手動執行；執行結果！
2.4 初始化
cd myvue npm install
依舊是很多警告，接下來就來更新這些依賴包
2.5 安裝更新外掛
npm install -g npm-check-updates
2.6 更新依賴包
檢查可更新列表：
ncu
根據提示資訊，執行命令，直接更新到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並建立第一個vue-cli應用程式的文章就介紹到這了,更多相關安裝vue-cli並建立應用程式內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！
相關文章
-
黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列
综合看Anker超能充系列的性价比很高，并且与不仅和iPhone12/苹果<em>Mac</em>Book很配，而且适合多设备充电需求的日常使用或差旅场景，不管是安卓还是Switch同样也能用得上它，希望这次分享能给准备购入充电器的小伙伴们有所
2021-06-01 09:31:42
-
吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！
除了L4WUDU与吴亦凡已经多次共事，成为了明面上的厂牌成员，吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节，这也是20XXCLUB首次全员合照，王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让
2021-06-01 09:31:34
-
IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？
目前应用IPFS的机构：1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆，历史资料永久保存在 IPFS 6 加
2021-06-01 09:31:24
-
有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊
开拓者的车机是兼容苹果和<em>安卓</em>，虽然我不怎么用，但确实兼顾了我家人的很多需求：副驾的门板还配有解锁开关，有的时候老婆开车，下车的时候偶尔会忘记解锁，我在副驾驶可以自己开门：第二排设计很好，不仅配置了一个很大的
2021-06-01 09:30:48
-
iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？
不仅是<em>安卓</em>手机，苹果手机的降价力度也是前所未有了，iPhone12也“跳水价”了，发布价是6799元，如今已经跌至5308元，降价幅度超过1400元，最新定价确认了。iPhone12是苹果首款5G手机，同时也是全球首款5nm芯片的智能机，它
2021-06-01 09:30:45