全新打包工具parcel零配置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
複製代碼