VUE-CLI3.x 腳手架，先後端分離(1)

前言

編輯的時間比較早，理解的不是很準確，適合瞭解vue有這麼回事，具體還須要本身看扒拉官方文檔各類百度 ^_^。

安裝

安裝 nodejs

從官網下載，這裏下載當前最新版，運行安裝，選擇接受，一路 next 最後 finish。

做用：nodejs 安裝時會自動安裝 npm，自動添加到 path 路徑，能夠這樣對比

• nodejs -> tomcat
• npm -> maven

就是 nodejs 運行的是 javascript。

打開 cmd，執行命令

node -v

顯示當前 nodejs 版本號，安裝成功。

安裝開發工具

以前用 atom，如今用 vscode，選哪個：

• atom 比 vscode 好看一些
• vscode 打開的控制檯好用

說的不全面，我如今更喜歡 vscode。

安裝 VUE-CLI

先切換一下 npm 鏡像，提升 npm 下載依賴包的速度，臨時改變：

npm --registry https://registry.npm.taobao.org install express

永久改變：

npm config set registry https://registry.npm.taobao.org

獲取當前 npm 資源庫的位置，若是是剛纔設置的 url，表示設置成功：

npm config get registry

VUE-CLI 的 1.x,2.x 和 3.x 安裝命令不同，全局安裝過 1.x,2.x 的須要先卸載，以 VUE-CLI 的官方文檔爲準，下面命令都在 cmd 命令行執行，註釋內容不要粘貼（命令行中，左鍵未選中內容時，右鍵是粘貼，左鍵選中內容時，右鍵是複製）。
3.x 之前包名是 vue-cli ，3.x 是 @vue/cli 。

卸載：

npm uninstall vue-cli -g  //-g 表示全局的意思，
# 或者
yarn global remove vue-cli

安裝

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

不知道是我以前修改過配置的緣由仍是如今這個版本默認就是這樣，個人 npm 全局安裝的包都在安裝目錄的 node_global 下面，這樣 我剛纔安裝的 vue 就在這個目錄下，
執行下面命令，查詢當前 vue 的版本號，是否是3.x：

vue --version

若是提示你，不是內部或外部命令，這是由於 vue 沒有在 path 環境中配置，在安裝 nodejs 的時候自動安裝了 npm 包，npm 也自動加入了 path 環境，能夠仿照添加 vue，在環境變量中個人 npm 以下：

打開路徑是包含 cmd 的路徑：

如今仿照添加 vue，vue 在個人安裝目錄下的 node_global：

添加到 path：

從新打開命令行，查看 vue 版本：

HELLO WORLD

使用命令行建立

1 新建一個 workspace 文件夾，按住 shift 右鍵，在此處打開命令行或 power shell，輸入以下命令建立項目：

vue create helloworld

2 上下選擇，回車肯定，後續建立完項目也能夠繼續添加依賴配置，這裏選擇第一個 default，開始建立下載依賴

3 建立成功後會提示，成功建立項目 helloworld，輸入以下命令啓動項目：

依次執行提示命令運行，左鍵選擇命令，右鍵複製，右鍵粘貼，回車

4 運行成功，提示項目訪問的 URL 和打包成上線產品的命令：

5 訪問測試： http://localhost:8081/

測試成功！

使用 UI 界面建立

1 打開 workspace 文件夾，在此處打開命令行，輸入以下命令：

vue ui

會自動打開瀏覽器，項目管理界面，會有以前命令行建立的項目 helloworld：

能夠看到以前命令行建立的 helloworld

2 建立新項目

3 選擇預設並建立

左側能夠管理項目的插件、依賴、配置，任務裏面能夠管理項目的運行和中止：

UI 界面建立的項目，能夠在 UI 管理界面的首頁項目中看到，命令行建立的是看不到的。

目錄結構

打包試試：

npm run build

會將項目打包到項目路徑下的 dist 文件夾中，直接打開 index 是訪問不了的：

把 dist 裏面的文件都丟到 tomcat 的 ROOT app裏面試試：

是能夠訪問的。

目錄結構

helloworld
    |—— node_modules #依賴的包
    |—— public 
    |    |—— favicon.ico 
    |    |—— index.html 
    |
    |—— src 程序員開發編輯的目錄
    |—— 。。。

打開 vscode 開發工具，用開發工具打開項目，會自動識別爲 VUE 語言，而後提示安裝 VUE 開發插件，安裝就行。

vue.config.js 配置

參考 官方文檔 中，這是一個可選配置，與 package.json 同級，也能夠將 vue.config.js 配置內容寫在 package.json 裏面，鍵爲 vue,

baseUrl 是項目根路徑，打包，在 tomcat 的 webapp 裏面新建 vue 文件夾，把打包的 dist 裏面的內容丟到 vue 文件夾，訪問測試