實戰用Parcel打包vue
阿新 • • 發佈：2018-12-20
小編推薦：Fundebug專注於JavaScript、微信小程式、微信小遊戲，Node.js和Java實時BUG監控。真的是一個很好用的bug監控費服務，眾多大佬公司都在使用。
parcel一個快速，零配置的 Web 應用程式打包工具,這裡我介紹下如何和vue結合進行開發,強烈建議node8以上,具體程式碼:https://github.com/zlxbuzz/pa...
初始化專案
mkdir parcel-demo && cd parcel-demo && yarn init -y
安裝依賴
yarn add parcel-bundler parcel-plugin-vue babel-preset-env less --dev yarn add vue-router
其中parcel-bundler是主要的工具，對於vue結尾的單檔案，需要單獨處理檔案型別，parcel-plugin-vue這個外掛會通過vueify來生成對應的程式碼，parcel會自動載入parcel-plugin開頭的依賴。
在根目錄新增babel，postcss配置
//postcss.config.js module.exports = { plugins: [ require('autoprefixer')({ browsers: [ 'last 20 versions', 'IE 9', 'iOS >= 8']})] }
//.babelrc
{
"presets": [
["env"]
]
}新建html
這裡引用了mint來方便展示頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"> <title>parcel-vue-demo</title> <!-- 引入樣式 --> <link rel="stylesheet" href="https://cdn.bootcss.com/mint-ui/2.2.13/style.css"> <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script> <!-- 引入元件庫 --> <script src="https://cdn.bootcss.com/mint-ui/2.2.13/index.js"></script> </head> <body> <app></app> <script src="./src/index.js"></script> </body> </html>
開發
和基於webpack開發的目錄結構一致,具體程式碼可以參考 https://github.com/zlxbuzz/pa...
src
├── app.vue
├── index.js
├── index.less
├── router.js
└── views
├── detail.vue
└── index.vue//index.js
import app from './app.vue'
import router from './router'
import './index.less'
window.onload = function(){
new Vue({
router,
el: 'app',
components: {
app
}
});
}新增指令碼
{
"name": "h5",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev": "parcel index.html",
"build": "parcel build index.html --public-url /"
},
"devDependencies": {
"babel-preset-env": "^1.6.1",
"less": "^2.7.3",
"parcel-bundler": "^1.2.0",
"parcel-plugin-vue": "^1.0.1"
},
"dependencies": {
"vue-router": "^3.0.1"
}
}只需要執行npm run dev 和 npm run build 就可以進行開發和構建，public-url就相當於資源的引用路徑。
原文連結：https://segmentfault.com/a/1190000012427886
Fundebug提供JavaScript監控，支援所有主流前端框架，微信小程式監控，微信小遊戲監控，後端Node.js監控。
