Vue-cli簡單使用

Vue-cli3.X建立項目

1.環境要求

安裝Vue-cli3.x的前置條件：Node.js
以Windows爲例安裝Node.js,百度 「Node.js官網」 或」Node.js中文網」都可 ,如無特殊要求 下載安裝 LTS版（長期支持版，該版本已知足Vue CLI官網所須要求版本要求）

一路Next便可，通常無需更改默認安裝設置
安裝完畢在開始菜單內便可找到一個名爲 Node.js 的文件夾以下圖

注：Node.js內可直接運行js基礎代碼（非DOM等相關代碼）**
而咱們須要使用的是 Node.js command prompt

2.Vue-CLI安裝：

官方命令 npm install -g @vue/cli
注：@不能少，少了@安裝的不是3.x版本而是1.x、2.x版本，若已經安裝了舊版本則需卸載舊版本而後再安裝新版本
舊版本卸載命令 npm uninstall vue-cli -g
補充：vue-cli 3.x 卸載命令 npm uninstall @vue/cli -g (若是須要可以使用)

國內下載速度比較慢
查看npm當前下載鏡像，命令爲：npm get registry
結果> https://registry.npmjs.org/
若是嫌棄下載慢能夠切換爲淘寶鏡像或者直接安裝cnpm並更換淘寶鏡像，命令以下：

npm config set registry http://registry.npm.taobao.org/
npm install -g cnpm --registry=https://registry.npm.taobao.org

等待安裝完畢

2.1使用腳手架建立項目

建議先考慮項目文件夾儲存的位置並進入相關位置，以桌面爲例
cd desktop
若是無需更改位置，請跳過；若是需返回上級目錄 cd.. 便可，其餘cmd命令可自行百度
建立項目的兩種方式：

1、直接命令行建立

建立項目命令： vue create 項目名 本身起個名字便可，但請注意不能有大寫字母，不然報錯：Warning: name can no longer contain capital letters
vue create learn √
接下來會問你選擇那種配置（會顯示全部保存過的配置，首次使用只會顯示 default（babel,eslint） 以及 Manually select features）
可選本身以前建立過的或選擇官方默認配置或者手動選擇)

選擇Manually select features 將出現如下內容

方向鍵 控制上下 空格選擇 A 全選 I反轉選擇
選擇好大致的功能/插件以後 回車 接着會讓你選擇細分的特性
好比 Linter/Formatter 下：

在保存時進行代碼檢測

Babel、PostCSS、ESLint等配置文件存放位置，選擇單獨保存在各自的配置文件中

Pick a CSS pre-processor(css預處理語言)下 有SCSS/SASS、LASS、Stylus
還有TS、PWA、Roter（vue 路由管理；SPA必帶）、Vuex（vue狀態管理）、測試（Unit Testing、E2E Testing）等等，都可按需選擇
若是出現node-sass的安裝報錯，能夠嘗試改用淘寶源，或使用cnpm直接安裝

npm i cnpm -g --registry=http://registry.npm.taobao.org
cnpm i node-sass -g

最後會詢問你 是否保存爲將來項目的預設配置 若是保存須要輸入名稱

等待項目建立...

項目建立好後按提示進入項目，並啓動項目
cd learn 進入後 npm run serve

這兩個地址都可訪問，第二個地址也並不能對外訪問，應該是沒作好端口映射，那這個地址用來幹嗎的？

2、經過GUI建立

在下載好vue-cli3.x後，進入項目存儲位置後 輸入 vue ui，會在瀏覽器內打開vue項目儀表盤（非初次使用界面）

在使用過GUI建立過項目後，再次打開就會直接進入舊項目管理界面，如上
若是須要再新建一個項目，可在 左上角下拉菜單內選擇 」Vue項目管理器「返回首頁



建立——》在此建立新項目——》輸入項目文件夾名（沒有git建議關閉）——》下一步


可選本身建立過的配置或者官方配置或者手動配置
手動配置以下圖所示， 按需選擇，相關介紹以前提到過了

注：有下拉框的得先選擇不然不能 下一步
最後點擊建立並等待
最終和CMD截圖以下

若是想在瀏覽器內啓動的話 左側菜單欄——》任務——》任務面板——》serve——》運行——》右側 啓動app (從左往右點擊紅色便可)

也可命令行啓動，命令與以前所述相同
至此結束