1、前提

首先你要安裝好nodejs和yarn,直接在官網下載安裝包，一鍵安裝即可，不需要什么環境配置，我安裝的是最新版本（node-v10.13.0、yarn-1.12.3）

2、安裝

• 同時寫Vue CLI 3和Vue CLI 2 的原因是官方默認的是3，而自己學習的GitHub上的項目為2~

  2.1 新版本 Vue CLI 3

• 寫這篇文章的時候官網默認的為Vue CLI 3

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

2.2 舊版本 Vue CLI 2

3、創建項目

Vue CLI 3:

vue create hello-world

Vue CLI 2:

vue init webpack my-project

• 
  一直按回車為默認選項，手動設置請參考官方文檔

  4、運行項目

  Vue CLI 3:

  cd hello-world
  yarn serve

  Vue CLI 2:

  cd my-project/
  npm run dev

  ?

5、驗證

在瀏覽器輸入localhost:8080，看見下圖圖所示的效果即為成功

6、構建

yarn build
# OR
npm run build

? 會生成一個dist文件夾

7、部署

?

7.1 本地預覽

dist 目錄需要啟動一個 HTTP 服務器來訪問 (除非你已經將 baseUrl 配置為了一個相對的值)，所以以 file:// 協議直接打開 dist/index.html 是不會工作的。在本地預覽生產環境構建最簡單的方式就是使用一個 Node.js 靜態文件服務器，例如?serve

安裝serve：

npm install -g serve

啟動：

serve -s dist
INFO: Accepting connections at http://localhost:5000

預覽：http://localhost:5000

7.2 部署到tomcat

默認的配置直接部署到tomcat，是有錯誤的(在瀏覽器檢查里發現是找不到對應的靜態文件，原因是路徑不對)，需要修改一下配置，版本2和版本3的配置也不一樣

Vue CLI 3:
在hello-world新建vue.config.js，并添加如下內容

module.exports = {baseUrl: process.env.NODE_ENV === 'production'? '/hello-world/': '/'
}

這里參考官方文檔：https://cli.vuejs.org/zh/guide/deployment.html#platform-guides

Vue CLI 2:
找到my-project/config/index.js文件中build對應的assetsPublicPath鍵值，將其修改為

assetsPublicPath: './',

這里參考：https://blog.csdn.net/Dear_Mr/article/details/72871919

重新build，將生成的dist文件夾復制到tomcat目錄下的webapps文件夾下，可以將dist文件夾改名為hello-world，那么訪問路徑就為
ip/hello-world,也可以不改名那么訪問路徑就為ip/dist,效果查看vue.dongkelun.com/hello-world、vue.dongkelun.com/dist

8、其他問題

8.1 npm run dev啟動后，用Ctrl+c，關閉不了對應的進程

原因是在Git Bash Here里執行的命令，一種方法是在windows 的shell里執行命令（輸入cmd進入），另一種辦法是如果不想放棄git的命令行的話，每次啟動完用tskill node殺死進程。

8.2 依然想用 npm run dev 啟動上面的hello world程序

辦法是修改package.json文件，找到scripts下的”serve”: “vue-cli-service serve”,復制這一行到下一行將key（serve）改為dev即可

• 自己可以對比一下，兩個版本的package.json文件的差異，多嘗試一下就了解了

?

?

參考：https://dongkelun.com/2018/11/19/vueCliCreateProject/