Giter Site home page Giter Site logo

parcel-demo's Introduction

parcel目前更新比较频繁,这个例子目前还只是1.2.0

parcel一个快速,零配置的 Web 应用程序打包工具,这里我介绍下如何和vue结合进行开发。具体代码:https://github.com/zlxbuzz/parcel-demo

初始化项目

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/parcel-demo

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 devnpm run build 就可以进行开发和构建,public-url就相当于资源的引用路径。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.