文章目錄
- 前言
- 一、安裝Vue
- 1.安裝node.js
- 配置路徑和快取（非必要）
- 2.安裝cnmp鏡像
- 3.安裝vue-cli3.0腳手架
- 二、可視化工具構建Vue專案
- 1.進入圖形化界面
- 2.創建專案
前言
本篇簡述Windows下，安裝、搭建Vue專案，Vue的一些基本語法不涉及，需要自行學習，
在學習前端前沿技術之前，在本地安裝node+vue環境，Vue通過盡可能簡單的 API 實作 回應的資料系結 和 組合的視圖組件，它易于上手，便于與第三方庫或既有專案整合，
一、安裝Vue
安裝它的方式有三種：安裝獨立版本、使用CDN方法安裝和使用NPM方法（推薦使用），NPM更有利于構建大型應用，這里記錄NPM安裝方法，需要：node.js環境、cnpm npm淘寶鏡像、vue-cli架構工具，
1.安裝node.js
安裝node.js的步驟比較簡單，先從node.js官網下載并安裝node，【建議下載msi版本的檔案包，可以直接雙擊就安裝】
建議下載最新版
安裝程序很簡單，一直點下一步就ok了（選取對應的安裝位置），安裝完之后，我們通過打開命令列工具 【win+R】,輸入node -v 命令，查看node的版本，若出現相應的版本號，則說明你安裝成功了，
小Tips：在cmd，輸入color f0，可把cmd命令列背景顏色調為我截圖的樣式，輸入color help查看用法，
npm包管理器是集成在node中的，所以安裝了node也就有了npm，再輸入 npm -v 查看nmp版本，
上述操作是沒有配置環境變數的，而我們能在全域環境下操作到node，說明環境變數已經配置，而且是node自動配置的，
配置路徑和快取（非必要）
非必要選項，只不過是把快取資料目錄，設定快取到指定的目錄
另外，我按照node的路徑是 D:\tools\node ，你需要設定成你的路徑
npm在安裝全域模塊時，會默認將模塊安裝在 C:\Users\用戶名\AppData\Roaming 路徑下的npm和npm_cache中（可以去查看，是真的占C盤記憶體），不方便管理且占用C盤空間，
這里配置自定義的全域模塊安裝目錄，在node.js安裝目錄下新建兩個檔案夾：node_global 和 node_cache
然后在cmd命令下執行如下兩個命令（執行成功就無任何回應）：
后面的目錄當然是pc的安裝目錄
npm config set prefix "D:\tools\node\node_global"
npm config set cache "D:\tools\node\node_cache"
沒有例外的話，就在去到 環境變數設定處，
在 用戶變數 下：
把node默認配置的變數洗掉掉，并新建 D:\tools\node\node_global 和 D:\tools\node\node_cache
在 系統變數 下：
新建變數名為 NODE_PATH， 值為 D:\tools\node\node_modules，如下圖：
之后，在Path里面添加 D:\tools\node\
2.安裝cnmp鏡像
cnpm是npm的淘寶鏡像，安裝此工具的作用和mvaen安裝淘寶鏡像是一樣的（直接訪問國外網址很慢），
在命令列中輸入
npm install -g cnpm --registry=http://registry.npm.taobao.org
沒報錯表示安裝成功：
之后，就可以使用cnpm代替npm來安裝依賴包了，
3.安裝vue-cli3.0腳手架
這里就不安裝就的vue-cli了，如果本機有舊版的vue-cli，執行以下指令洗掉：
卸載2.x版本 npm uninstall vue-cli -g
卸載3.x版本 npm uninstall @vue/cli -g
安裝新版本
安裝完之后才可使用可視化工具，執行以下命令：
npm install -g @vue/cli
至此，前端需要的環境和工具都準備好了，接下來就是使用vue-cli構建專案，
二、可視化工具構建Vue專案
1.進入圖形化界面
之后，打開終端命令列，在命令列終端執行以下指令，進入Vue專案管理器，
vue ui
啟動后的頁面如下圖所示
2.創建專案
Vue工程創建必須使用指定的工具創建，我們這里使用Vue可視化工具創建，比如IDEA就只能打開Vue專案，不能創建，
點擊 Vue專案管理器的創建，設定專案初始化資訊
之后選擇 手動 配置，
預設創建與否都行，
訪問 localhost:8080，訪問成功即可，
至此，Vue專案從安裝到搭建都已經實作，之后的還會涉及到配合SpringBoot進行前后端互動操作，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/305699.html
標籤：其他
下一篇：軟體的架構