使用vue-cli搭建VUE專案

scu醬油仔發表於2018-08-07
Vue

使用vue-cli搭建VUE專案

1. 安裝並初始化專案

Vue.js提供了一個官方命令列工具，可用於快速搭建大型的應用。

# 全域性安裝 vue-cli（前提是安裝了淘寶的npm映象，就可以使用cnpm命令了）
cnpm install --global vue-cli
# 建立一個基於 webpack 模板的新專案
vue init webpack my-project
# 這裡需要進行一些配置，預設回車即可
...
# Project initialization finished!
# ========================

To get started:

  cd my-project
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

2. 執行並訪問專案

# 進入專案
cd my-project
# 安裝相關依賴包
cnpm install
# 啟動執行
cnpm run dev
# 執行成功之後顯示：
 DONE  Compiled successfully in 3323ms                                                                          14:17:24

 I  Your application is running here: http://localhost:8080

專案啟動成功，通過瀏覽器訪問http://localhost:8080就可以看到專案的主頁了。

3. 專案目錄結構

剛初始化完成的專案目錄以及作用：

目錄/檔案 說明
build 專案構建(webpack)相關程式碼
config 配置目錄，包括埠號等。我們初學可以使用預設的。
node_modules npm 載入的專案依賴模組
src 這裡是我們要開發的目錄，基本上要做的事情都在這個目錄裡。裡面包含了幾個目錄及檔案：assets: 放置一些圖片，如logo等。components: 目錄裡面放了一個元件檔案，可以不用。App.vue: 專案入口檔案，我們也可以直接將元件寫這裡，而不使用 components 目錄。main.js: 專案的核心檔案。
static 靜態資源目錄，如圖片、字型等。
test 初始測試目錄，可刪除
.xxxx檔案 這些是一些配置檔案，包括語法配置，git配置等。
index.html 首頁入口檔案，你可以新增一些 meta 資訊或統計程式碼啥的。
package.json 專案配置檔案。
README.md 專案的說明文件。

4. 專案構建後打包到伺服器

更改config/index.js檔案，將兩處assetsPublicPath的值從/改為./，然後執行：

cnpm run build

執行成功後目標檔案會生成到dist目錄，然後放到目標伺服器，以tomcat伺服器為例，將dist整個目錄放到webapps下面，啟動tomcat然後訪問http://localhost:8080/dist就OK了！

疑問1

按照官方教程可以很簡單的搭建執行專案，但是VUE的執行原理是什麼呢？資原始檔如何載入的，如何編譯的，主要載入了哪些檔案，這些檔案的對應關係又是什麼？

作為一個後端小哥，對VUE真的不熟悉，在網上發現一個提問正好解決了我的疑問，https://segmentfault.com/q/10…，簡單的說就是得先學習webpack（打包工具）才能解決這些疑問奧。

相關文章