一、 安裝hbuilderx
HBuilderX是一款基于Electron框架開發(fā)的跨平臺的集成開發(fā)環(huán)境（IDE），是為前端開發(fā)者服務的通用 IDE，或者稱為編輯器；提供比其他工具更優(yōu)秀的 vue 支持。HBuilderX集成了多種開發(fā)工具和語言，包括HTML、CSS、JavaScript、TypeScript、Vue.js、React等，可以幫助開發(fā)者更高效地進行Web前端開發(fā)。
特點
1、可以根據(jù)開發(fā)者的代碼上下文，提供準確的代碼補全和語法提示，大大提高了開發(fā)效率。
2、集成了多種調(diào)試工具和模擬器，可以在不同的設(shè)備和瀏覽器上進行實時調(diào)試和預覽，有助于更快的定位和解決問題。
3、有多種代碼重構(gòu)和自動化工具，如代碼格式化、自動縮進、自動補全等，有助于更規(guī)范和高效地編寫代碼。
4、支持多種版本控制工具，如Git、SVN等，可以方便地管理和協(xié)作開發(fā)項目。
5、還支持后端開發(fā)，它可以集成Node.js和MongoDB等工具，更方便地進行全棧開發(fā)。
6、提供多種插件和主題，滿足不同開發(fā)者需求和喜好。
關(guān)于安裝 沒啥特殊的直接安就行
點我下載進行安裝
二、 安裝node.js
node.js 平臺的默認包管理器為npm。目前 node.js 安裝包中包含 npm。通過 npm 可以安裝、共享、分發(fā)代碼，管理項目依賴關(guān)系。所以有必要先安裝node.js
點我下載安裝
終端查看安裝版本：node --version
Node.js 主要模塊是用 JavaScript 編寫的， Node.js 是一個能夠在服務器端運行 JavaScript 的開放源代碼、跨平臺 JavaScript 運行環(huán)境。
兩點優(yōu)勢：
（1）跨平臺(服務器[操作系統(tǒng)])運行。
（2） Node.js 使前后端更加一體，十分方便。
三、 vue 腳手架
vue腳手架用于自動生成vue和webpack的項目模板。可以快速構(gòu)建vue的工具，自動安裝vue所需要的插件，避免手動安裝各種插件，以及尋找各種cdn并一個一個引入的麻煩
1、打開終端，以管理員身份運行：
sudo su
按提示輸入密碼（開機運行密碼即可）
2、下載vue的源
通過npm下載vue的源，由于是從國外服務器下載，速度比較慢；所以淘寶團隊分享了一個完整的npmjs.org 鏡像，我們可以通過執(zhí)行cnpm加快模塊的下載速度。
可通過npm安裝cnpm：
npm install -g cnpm -registry=https://registry.npm.taobao.org
ps:
npm 的全稱是 Node Package Manager，即 Node 包管理器
查看cnpm版本：
cnpm -version
cnpm@9.2.0 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
npm@9.7.2 (/usr/local/lib/node_modules/cnpm/node_modules/npm/index.js)
node@16.17.0 (/usr/local/bin/node)
npminstall@7.9.0 (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local
darwin arm64 21.6.0
registry=https://registry.npmmirror.com
3、通過cnpm 安裝vue腳手架
cnpm install -g @vue/cli
4、啟動vue腳手架自帶的項目管理器(服務)
執(zhí)行 vue ui
vue ui
?? Starting GUI...
?? Ready on http://localhost:8002
4.1、創(chuàng)建空的vue項目
step1
step2 創(chuàng)建
step3 為項目命名，同時選擇本地存儲位置
step4 、可以手動配置項目
step5 以下是我自己的設(shè)置，具體可按實際需要配置，下面有全部的配置：
| 插件 | 開or 關(guān) | 原因 |
|---|---|---|
| 關(guān)閉 | Babel Transpile modern JavaScript to older versions (for compatibility) |
是否兼容低版本瀏覽器 盡量精簡，實操時可以按自己實際需要設(shè)置 |
| 關(guān)閉 | CSS Pre-processors Add support for CSS pre-processors like Sass, Less or Stylus |
是否配置CSS預處理器 |
| 打開 | Vuex Manage the app state with a centralized store |
是否配置狀態(tài)管理模式（相當于本地存儲） |
| 打開 | Router Structure the app with dynamic pages |
是否配置路由 |
vue的其他配置選擇
| 配置 | 作用 |
|---|---|
| Choose Vue version | vue版本選擇 |
| TypeScript | 是否擴展JavaScript |
| Progressive Web App (PWA) Support | 是否支持漸進式Web應用程序 |
| Linter / Formatter | 格式化程序規(guī)范選擇 |
| Unit Testing | 是否創(chuàng)建單元測試 |
| E2E Testing | 是否創(chuàng)建端到端測試 |
step6:點擊下一步后，創(chuàng)建項目，不保存預設(shè)
至此，項目創(chuàng)建完畢，接下來可以導入自己需要的三方依賴
4.2、安裝需要的三方依賴：
按以下表格列出依賴的用處，可按實際需要去安裝
| vue的三方依賴 | 引入的用處 |
|---|---|
| element-plus | 1、包含豐富的組件和擴展功能,eg: 表格、表單、按鈕、導航、通知等, 2、快速構(gòu)建高質(zhì)量的 Web 應用。 點我進官網(wǎng) |
| element-plus/icons-vue | 點我查新特性 。 |
| axios | Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。 點我進官網(wǎng) |
| echarts | 1、使用 JavaScript 實現(xiàn)的開源可視化庫，可以流暢的運行在 PC 和移動設(shè)備上； 2、兼容當前絕大部分瀏覽器（IE9/10/11，Chrome，F(xiàn)irefox，Safari等） 3、底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數(shù)據(jù)可視化圖表。 點我進官網(wǎng) |
| el-cascader-plus | 級聯(lián)選擇器插件 點我了解更全面，官網(wǎng)鏈接：el-cascader-plus |
| pinia | 官網(wǎng)：pinia |
| sortablejs | 是一個JavaScript庫，用于在現(xiàn)代瀏覽器和觸控設(shè)備上可重排序的拖放列表。不需要jQuery。支持流星，天使，反應，聚合物，Vue，敲除和任何CSS庫，如引導sortablejs |
| vue3-ace-editor | 點我了解 |
| vuex-along | 點我了解 |
| vuex-persist | 點我了解 |
| vuex-persistedstate | 點我了解 |
| vuex官網(wǎng)｜https://vuex.vuejs.org/zh/index.html |
4.3 本地導入新建項目
打開 hbuilder
至此，新建的vue項目導入成功。
4.4 啟動本地項目并訪問
1）啟動
如果終端出現(xiàn) 找不到文件或者路徑之類的提示，可鼠標重新選中要啟動的項目，然后點擊 新增終端標簽即可
在終端輸入啟動命令： npm run serve
ps
在終端運行 npm run serve （這里的命令是針對 vue3, 選 vue2 版本的應該是 npm run dev ）
2）點擊鏈接，訪問頁面如下：
值得一提的是，如果有多個vue項目，啟動后不會出現(xiàn)接口沖突 。
5、通過mac終端 的 命令創(chuàng)建vue項目
在mac終端里，執(zhí)行創(chuàng)建vue空項目的命令：vue create vue_test2
可能會提示 無權(quán)限：
Error: EACCES: permission denied,可切換到管理員身份：sudo su，提示輸入密碼（輸入開機密碼即可）
具體操作按如下圖示跟著執(zhí)行即可，從創(chuàng)建到啟動訪問
#### 6、vue 常用語法文章來源：http://www.zghlxwxcb.cn/news/detail-718834.html
todo 待補充
參考：vue.cli文章來源地址http://www.zghlxwxcb.cn/news/detail-718834.html
到了這里，關(guān)于vue初體驗1：新建vue3項目并啟動訪問（mac）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
