為什么80%的碼農(nóng)都做不了架構師？>>> ??

準備

• node 安裝：http://nodejs.cn/api/
• 校驗安裝：node -v
• npm 安裝：https://www.npmjs.com.cn/
• 校驗安裝：npm -v

---

安裝

• vue 安裝：npm install -g vue
• vue-cll 安裝：npm install -g @vue/cli
• 校驗安裝：vue --version

---

快速原型開發(fā)

• 你可以使用 vue serve 和 vue build 命令對單個 *.vue 文件進行快速原型開發(fā)，不過這需要先額外安裝一個全局的擴展：npm install -g @vue/cli-service-global vue serve 的缺點就是它需要安裝全局依賴，這使得它在不同機器上的一致性不能得到保證。因此這只適用于快速原型開發(fā)。

• vue serve

Usage: serve [options] [entry] 在開發(fā)環(huán)境模式下零配置為 .js 或 .vue 文件啟動 Options:-o, --open 打開瀏覽器-c, --copy 將本地 URL 復制到剪切板-h, --help 輸出用法信息

• 你所需要的僅僅是一個 App.vue 文件：

<template><h1>Hello!</h1> </template>

• 然后在這個 App.vue 文件所在的目錄下運行vue serve
• vue serve 使用了和 vue create 創(chuàng)建的項目相同的默認設置 (webpack、Babel、PostCSS 和 ESLint)。它會在當前目錄自動推導入口文件——入口可以是 main.js、index.js、App.vue 或 app.vue 中的一個。你也可以顯式地指定入口文件：vue serve demo.vue 如果需要，你還可以提供一個 index.html、package.json、安裝并使用本地依賴、甚至通過相應的配置文件配置 Babel、PostCSS 和 ESLint。
• vue build

Usage: build [options] [entry] 在生產(chǎn)環(huán)境模式下零配置構建一個 .js 或 .vue 文件 Options:-t, --target <target> 構建目標 (app | lib | wc | wc-async, 默認值：app)-n, --name <name> 庫的名字或 Web Components 組件的名字 (默認值：入口文件名)-d, --dest <dir> 輸出目錄 (默認值：dist)-h, --help 輸出用法信息

• 你也可以使用 vue build 將目標文件構建成一個生產(chǎn)環(huán)境的包并用來部署： vue build MyComponent.vue vue build 也提供了將組件構建成為一個庫或一個 Web Components 組件的能力。查閱構建目標了解更多。

---

創(chuàng)建一個項目

• 運行以下命令來創(chuàng)建一個新項目：vue create hello-world
• 你會被提示選取一個 preset。你可以選默認的包含了基本的 Babel + ESLint 設置的 preset，也可以選“手動選擇特性”來選取需要的特性。
  這個默認的設置非常適合快速創(chuàng)建一個新項目的原型，而手動設置則提供了更多的選項，它們是面向生產(chǎn)的項目更加需要的。
  如果你決定手動選擇特性，在操作提示的最后你可以選擇將已選項保存為一個將來可復用的 preset。我們會在下一個章節(jié)討論 preset 和插件。

~/.vuerc 被保存的 preset 將會存在用戶的 home 目錄下一個名為 .vuerc 的 JSON 文件里。如果你想要修改被保存的 preset / 選項，可以編輯這個文件。 在項目創(chuàng)建的過程中，你也會被提示選擇喜歡的包管理器或使用淘寶 npm 鏡像源以更快地安裝依賴。這些選擇也將會存入 ~/.vuerc。

• vue create 命令有一些可選項，你可以通過運行以下命令進行探索：vue create --help

用法：create [options] <app-name> 創(chuàng)建一個由 `vue-cli-service` 提供支持的新項目 選項：-p, --preset <presetName> 忽略提示符并使用已保存的或遠程的預設選項-d, --default 忽略提示符并使用默認預設選項-i, --inlinePreset <json> 忽略提示符并使用內聯(lián)的 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 使用指定的代理創(chuàng)建項目-b, --bare 創(chuàng)建項目時省略默認組件中的新手指導信息-h, --help 輸出使用幫助信息

---

使用圖形化界面

• 你也可以通過 vue ui 命令以圖形化界面創(chuàng)建和管理項目：vue ui 命令會打開一個瀏覽器窗口，并以圖形化界面將你引導至項目創(chuàng)建的流程。

---

拉取 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

轉載于:https://my.oschina.net/hibony/blog/3039938

總結

以上是生活随笔為你收集整理的vue2.x 综合教程 一的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。