查看: 2498|回复: 0

[JavaScript/JQuery] Parcel + Vue 入门尝鲜

发表于 2018-2-14 08:00:02

Webpack 久负盛名,包罗万象。若是用其造轮子的话,难免修修补补。年前兴起了Parcel打包工具,号称“极速零配置”,让人不胜向往。这不得空了,就来尝尝鲜,记录下如何使用 Parcel + Vue进行开发。

这里是示例代码!

预备 两个依赖

parcel-bundler(戳我)
这是 Parcel 打包工具,“极速零配置”的起源。

parcel-plugin-vue(戳我)
这是一个 parcel 插件,使 pacel 支持 .vue 文件。 项目结构
  1. parcel-vue
  2. ├── package.json
  3. ├── .babelrc
  4. ├── index.html
  5. ├──src
  6. ├── App.vue
  7. ├── main.js
复制代码

这是基本的项目结构。

开始

安装parcel相关开发依赖

  1. yarn add parcel-bundler parcel-plugin-vue babel-preset-env -D
复制代码

安装vue

  1. yarn add vue
复制代码

添加入口文件 index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>parcel + vue</title>
  7. </head>
  8. <body>
  9. <div id="app"></div>
  10. <script src="./src/main.js"></script>
  11. </body>
  12. </html>
复制代码

添加脚本内容 main.js 和 vue组件 App.vue

  1. // ./src/main.js
  2. import Vue from 'vue'
  3. import App from './App'
  4. new Vue({
  5. el: '#app',
  6. render: h => h(App)
  7. })
复制代码
  1. // App.vue
  2. <template>
  3. <h1>parcel vue</h1>
  4. </template>
  5. <script>
  6. export default {
  7. name: 'App'
  8. }
  9. </script>
复制代码
配置 .babelrc
  1. {
  2. "presets": [
  3. "env"
  4. ]
  5. }
复制代码

大功告成!!!

额,再加条启动脚本吧!

  1. // package.json
  2. {
  3. ...,
  4. "scripts": {
  5. "start": "parcel index.html"
  6. },
  7. ...
  8. }
复制代码

Node执行:

  1. yarn start
复制代码

好了,浏览器打开http://localhost:1234看看吧。

生产环境

构建生产环境,只需要执行:

  1. parcel build index.html --public-url ./
复制代码

这里以index.html为入口,parcel会自动识别和提取相关依赖资源,并在根目录下创建 dist 文件夹。这里 dist 名称是默认的,可以按意愿更改。可以通过命令 parcel build -h 查看具体的参数列表。

查看示例代码。



回复

使用道具 举报