全新打包工具parcel零配置vue開發腳手架

w3c-king發表於2018-01-11
Vue

parcel-vue 一個基於parcel打包工具的 vue開發腳手架解決方案,強烈建議使用node8.0以上

專案地址(求star^_^): 點此進入

初始化專案

// 安裝腳手架
$ 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
複製程式碼

相關文章