vue-cli使用介紹

Vue-cli使用介紹

一 ，介紹

Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統，提供：

• 經過 @vue/cli 實現的交互式的項目腳手架。

• 經過 @vue/cli + @vue/cli-service-global 實現的零配置原型開發。

• 一個運行時依賴 (

  @vue/cli-service

  )，該依賴：

  • 可升級；
  • 基於 webpack 構建，並帶有合理的默認配置；
  • 能夠經過項目內的配置文件進行配置；
  • 能夠經過插件進行擴展。

• 一個豐富的官方插件集合，集成了前端生態中最好的工具。

• 一套徹底圖形化的建立和管理 Vue.js 項目的用戶界面。

Vue CLI 致力於將 Vue 生態中的工具基礎標準化。它確保了各類構建工具可以基於智能的默認配置便可平穩銜接，這樣你能夠專一在撰寫應用上，而沒必要花好幾天去糾結配置的問題。與此同時，它也爲每一個工具提供了調整配置的靈活性，無需 eject。

二，安裝

2.1關於舊版本

Vue CLI 的包名稱由 vue-cli 改爲了 @vue/cli。 若是你已經全局安裝了舊版本的 vue-cli (1.x 或 2.x)，你須要先經過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它。

2.2Node 版本要求

Vue CLI 4.x 須要 Node.js v8.9 或更高版本 (推薦 v10 以上)。你能夠使用 n，nvm 或 nvm-windows 在同一臺電腦中管理多個 Node 版本。

能夠使用下列任一命令安裝這個新的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安裝以後，你就能夠在命令行中訪問 vue 命令。你能夠經過簡單運行 vue，看看是否展現出了一份全部可用命令的幫助信息，來驗證它是否安裝成功。

你還能夠用這個命令來檢查其版本是否正確：

vue --version

2.3升級

如需升級全局的 Vue CLI 包，請運行：

npm update -g @vue/cli

# 或者
yarn global upgrade --latest @vue/cli

2.4項目依賴

上面列出來的命令是用於升級全局的 Vue CLI。如需升級項目中的 Vue CLI 相關模塊（以 @vue/cli-plugin- 或 vue-cli-plugin- 開頭），請在項目目錄下運行 vue upgrade：

用法： upgrade [options] [plugin-name]

（試用）升級 Vue CLI 服務及插件

選項：
  -t, --to <version>    升級 <plugin-name> 到指定的版本
  -f, --from <version>  跳過本地版本檢測，默認插件是今後處指定的版本升級上來
  -r, --registry <url>  使用指定的 registry 地址安裝依賴
  --all                 升級全部的插件
  --next                檢查插件新版本時，包括 alpha/beta/rc 版本在內
  -h, --help            輸出幫助內容

三，建立項目

3.1vue create

運行如下命令來建立一個新項目：（這裏是vue-cli3）

vue create hello-world

• 警告

若是你在 Windows 上經過 minTTY 使用 Git Bash，交互提示符並不工做。你必須經過 winpty vue.cmd create hello-world 啓動這個命令。不過，若是你仍想使用 vue create hello-world，則能夠經過在 ~/.bashrc 文件中添加如下行來爲命令添加別名。 alias vue='winpty vue.cmd' 你須要從新啓動 Git Bash 終端會話以使更新後的 bashrc 文件生效。

你會被提示選取一個 preset。你能夠選默認的包含了基本的 Babel + ESLint 設置的 preset，也能夠選「手動選擇特性」來選取須要的特性。

這個默認的設置很是適合快速建立一個新項目的原型，而手動設置則提供了更多的選項，它們是面向生產的項目更加須要的。

若是你決定手動選擇特性，在操做提示的最後你能夠選擇將已選項保存爲一個未來可複用的 preset。咱們會在下一個章節討論 preset 和插件。

~/.vuerc

被保存的 preset 將會存在用戶的 home 目錄下一個名爲 .vuerc 的 JSON 文件裏。若是你想要修改被保存的 preset / 選項，能夠編輯這個文件。

在項目建立的過程當中，你也會被提示選擇喜歡的包管理器或使用淘寶 npm 鏡像源以更快地安裝依賴。這些選擇也將會存入 ~/.vuerc。

vue create 命令有一些可選項，你能夠經過運行如下命令進行探索：

vue create --help
用法：create [options] <app-name>

建立一個由 `vue-cli-service` 提供支持的新項目


選項：

  -p, --preset <presetName>       忽略提示符並使用已保存的或遠程的預設選項
  -d, --default                   忽略提示符並使用默認預設選項
  -i, --inlinePreset <json>       忽略提示符並使用內聯的 JSON 字符串預設選項
  -m, --packageManager <command>  在安裝依賴時使用指定的 npm 客戶端
  -r, --registry <url>            在安裝依賴時使用指定的 npm registry
  -g, --git [message]             強制 / 跳過 git 初始化，並可選的指定初始化提交信息
  -n, --no-git                    跳過 git 初始化
  -f, --force                     覆寫目標目錄可能存在的配置
  -c, --clone                     使用 git clone 獲取遠程預設選項
  -x, --proxy                     使用指定的代理建立項目
  -b, --bare                      建立項目時省略默認組件中的新手指導信息
  -h, --help                      輸出使用幫助信息

3.2使用圖形化界面

你也能夠經過 vue ui 命令以圖形化界面建立和管理項目：

vue ui

上述命令會打開一個瀏覽器窗口，並以圖形化界面將你引導至項目建立的流程。

3.3拉取 2.x 模板 (舊版本)

Vue CLI >= 3 和舊版使用了相同的 vue 命令，因此 Vue CLI 2 (vue-cli) 被覆蓋了。若是你仍然須要使用舊版本的 vue init 功能，你能夠全局安裝一個橋接工具：

npm install -g @vue/cli-init
# `vue init` 的運行效果將會跟 `vue-cli@2.x` 相同
vue init webpack my-project

四，聯繫方式

• qq：2061302791
• 微信：xie2061302791
• 電話：15284524485
• 我的網站：https://xieyingpeng.github.io/
• Github：https://github.com/xieyingpeng/
• 博客園：https://www.cnblogs.com/Xieyingpengz
• 知乎：https://www.zhihu.com/people/nan-qiao-12-73
• gitee：https://gitee.com/xie-yingpeng/project-1.git
• bilibili：https://space.bilibili.com/617198338?share_medium=android&share_source=copy_link&bbid=XY2BDF522C748A159BE7DD354D6DFFB963728&ts=161252011