使用parcel + vue的項(xiàng)目簡單介紹
介紹
- 傳統(tǒng)的webpack配置越來越復(fù)雜泛范，對于追求簡潔的前端工程化來說似乎有點(diǎn)背道而馳衰腌，隨著其功能越來越強(qiáng)大刑赶，也不可避免的越來越臃腫永脓，其配置都要好久伴栓，我也是菜鳥混弥，昨天有個(gè)老哥給我說了Parcel，今天試了一下菩佑，就發(fā)出來試試
Parcel
- Parcel 是一個(gè)Web應(yīng)用程序 打包器(bundler) 自晰，與以往的開發(fā)人員使用的打包器有所不同。它利用多核處理提供極快的性能稍坯，并且你不需要進(jìn)行任何配置酬荞。（摘自官方文檔)
功能介紹
手動(dòng)搭建
- 首先搓劫，你需要?jiǎng)?chuàng)建一個(gè)項(xiàng)目，我命名為vue-parcel
mkdir vue-parcel
- 接著安裝所需的依賴項(xiàng)
cd vue-parcel //進(jìn)入項(xiàng)目目錄
npm init -y //初始化
npm install --save vue // 安裝vue
npm install --save-dev parcel-bundler // 安裝parcel
- 新建一個(gè)index.html文件混巧，作為parcel的入口文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue Parcel Example</title>
</head>
<body>
<div id="app">
</div>
<script src="src/main.js"></script>
</body>
</html>
- 創(chuàng)建src目錄和main.js的文件
import Vue from 'vue';
import App from './App.vue';
new Vue({
render: h => h(App)
}).$mount('#app')
- 創(chuàng)建 App.vue和components / HelloWorld.vue
App.vue
<template>
<div id="app">
<HelloWorld />
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld';
export default {
components: {
HelloWorld
}
}
</script>
HelloWorld.vue
<template>
<div class="hello-world">
<h1>Hello World!</h1>
</div>
</template>
<script>
export default {
name: 'hello-world',
}
</script>
- 替換package.json腳本,將啟動(dòng)項(xiàng)目和打包項(xiàng)目替換
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
},
-
最終如圖所示
項(xiàng)目結(jié)構(gòu) - 啟動(dòng)時(shí)默認(rèn)為localhost:1234枪向，而不是常用的8080端口
快速構(gòu)建
- 全新打包工具parcel零配置vue開發(fā)腳手架
- 這是掘金的一篇文章，用了這個(gè)還可以咧党，有興趣的可以試一下秘蛔，或者就自己手?jǐn)]吧
