利用vuejs+element-ui+Parcel搭建自定義後臺

張炳發表於2018-08-21
VueJSUI

>>>點選獲取更多文章<<<

背景

公司內部的後臺，和後臺選單都是利用java後臺建設，無需要再自己寫的後臺介面，選單java自動建立，只需要配置好url即可實現。估計很多小夥伴公司內部都是這樣的搭配吧？所以我只需要知道url，和有一套驗證機制就ok了。

驗證機制，無非就是通過header 頭新增 authorization ，驗證token，即可以訪問，每個cgi介面，都會驗證token。具體實現程式碼 詳情看程式碼，還有個分頁程式碼demo。程式碼都有註釋。

說明

這個專案是利用了 Vuejs+Elementui+Parcel+Php 搭建的後臺專案demo，其中，Parcel是個構建工具，parcel-vue 一個基於parcel打包工具的 vue急速開發腳手架解決方案,強烈建議使用node8.0以上。

其中phpcgi資料夾是寫了一些簡單的cgi，vuejs資料夾裡面可以按下面步驟初始化。

初始化專案

// 安裝腳手架
$ npm install parcel-vue -g
// 初始化
$ parcel-vue projectName

安裝依賴

$ cd projectName
$ npm install

其中parcel-bundler是主要的工具，對於vue結尾的單檔案，需要單獨處理檔案型別，
parcel-plugin-vue這個外掛會通過vueify來生成對應的程式碼，parcel會自動載入parcel-plugin開頭的依賴。

執行開發環境,執行成功開啟瀏覽器http://localhost:1234即可檢視專案

$ npm run dev

打包編譯

$ npm run build

開發

目錄結構

src
├── router
    ├── index.js
├── assets
    ├── logo.png
├── components
    ├── Hello
        ├── index.js
    ├── index.js
├── views
    ├── HelloWorld
        ├── images
            ├── logo.png
        ├── HelloWorld.vue
├── styles
    ├── common.css
├── store
    ├── global
        ├── global.js
        ├── index.js
    ├── index.js
├── app.vue
├── index.js

只需要執行npm run dev 和 npm run build 就可以進行開發和構建。

路由懶載入

只需將傳統 import page from `path` 方式改為 const page = () => import(`path`) 即可

// 此種方式路由不會懶載入
import HelloWorld from `../views/HelloWorld/HelloWorld.vue`
// 此種方式引入即可實現路由懶載入,打包時js檔案自動拆分
const HelloWorld =  () => import(`../views/HelloWorld/HelloWorld.vue`)

nodejs版本升級,如果您的node版本低於8.0,我們強烈建議您升級node版本(命令列升級不支援windows)

$ npm install -g n
$ n stable

程式碼github

點選檢視

相關文章