使用parcel + vue的项目简单介绍
介绍
- 传统的webpack配置越来越复杂，对于追求简洁的前端工程化来说似乎有点背道而驰，随着其功能越来越强大，也不可避免的越来越臃肿，其配置都要好久，我也是菜鸟，昨天有个老哥给我说了Parcel，今天试了一下，就发出来试试
Parcel
- Parcel 是一个Web应用程序 打包器(bundler) ，与以往的开发人员使用的打包器有所不同。它利用多核处理提供极快的性能，并且你不需要进行任何配置。（摘自官方文档)
功能介绍
手动搭建
- 首先，你需要创建一个项目，我命名为vue-parcel
mkdir vue-parcel
- 接着安装所需的依赖项
cd vue-parcel //进入项目目录
npm init -y //初始化
npm install --save vue // 安装vue
npm install --save-dev parcel-bundler // 安装parcel
- 新建一个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>
- 创建src目录和main.js的文件
import Vue from 'vue';
import App from './App.vue';
new Vue({
render: h => h(App)
}).$mount('#app')
- 创建 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脚本,将启动项目和打包项目替换
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
},
-
最终如图所示
项目结构
- 启动时默认为localhost:1234，而不是常用的8080端口
快速构建
- 全新打包工具parcel零配置vue开发脚手架
- 这是掘金的一篇文章，用了这个还可以，有兴趣的可以试一下，或者就自己手撸吧
网友评论