前言

最近一直在寫前端，用的是JSP，但是很多人都說JSP已經過時了。既然做了幾個月的前端，那就把前端學的好一點，學點新技術，跟上潮流。感覺Vue挺火的，所以這幾天學了一下Vue，開始看的官方文件，然後直接用GitHub上比較火的專案進行學習，本地跑起來，看看效果、原始碼和程式碼結構，學習相關的外掛等，並部署了其中一個專案到我的二級域名下：vue.dongkelun.com（感覺這個專案裡的東西挺全的）。

因為一直用的github上別人搭建好的專案進行學習，擔心和用Vue CLI建立的專案的程式碼結構有區別，所以就看了一下Vue CLI的官方文件，進行簡單搭建，看看到底有什麼區別，做到心中有數。

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

npm install -g @vue/cli-init
# `vue init` 的執行效果將會跟 `
 
[email protected]` 相同

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

7.2 部署到tomcat

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

Vue CLI 3:
在hello-world新建vue.config.js，並新增如下內容

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

assetsPublicPath: './',

重新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檔案的差異，多嘗試一下就瞭解了

相關閱讀