parcel-vue

使用parcel + vue的项目简单介绍

• 介绍
• Parcel
• 手动搭建
• 快速构建

介绍

• 传统的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的入口文件

• 创建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

HelloWorld.vue

• 替换package.json脚本,将启动项目和打包项目替换

"scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html"
  },

• 最终如图所示

  
  
  项目结构
• 启动时默认为localhost:1234，而不是常用的8080端口

快速构建

• 全新打包工具parcel零配置vue开发脚手架
• 这是掘金的一篇文章，用了这个还可以，有兴趣的可以试一下，或者就自己手撸吧