版權聲明：本文由董可倫首發于https://dongkelun.com，非商業轉載請注明作者及原創出處。商業轉載請聯系作者本人。 https://blog.csdn.net/dkl12/article/details/84281778
我的原創位址：
https://dongkelun.com/2018/11/19/vueCliCreateProject/前言
最近一直在寫前端，用的是JSP，但是很多人都說JSP已經過時了。既然做了幾個月的前端，那就把前端學的好一點，學點新技術，跟上潮流。感覺Vue挺火的，是以這幾天學了一下Vue，開始看的官方文檔，然後直接用GitHub上比較火的項目進行學習，本地跑起來，看看效果、源碼和代碼結構，學習相關的插件等，并部署了其中一個項目到我的二級域名下：
vue.dongkelun.com（感覺這個項目裡的東西挺全的）。
因為一直用的github上别人搭建好的項目進行學習，擔心和用Vue CLI建立的項目的代碼結構有差別，是以就看了一下Vue CLI的官方文檔，進行簡單搭建，看看到底有什麼差別，做到心中有數。
- 本文的環境：win10
- Vue CLI官方文檔： https://cli.vuejs.org/zh/
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、運作項目
cd hello-world
yarn serve
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:50007.2 部署到tomcat
預設的配置直接部署到tomcat，是有錯誤的(在浏覽器檢查裡發現是找不到對應的靜态檔案，原因是路徑不對)，需要修改一下配置，版本2和版本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找到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/dist8、其他問題
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檔案的差異，多嘗試一下就了解了
![mybatis_入門程式Mybatis入門[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)