parcel vue 简单使用

1.安装依赖

yarn global add parcel-bundler
yarn add babel-preset-env --dev
yarn add parcel-plugin-vue --dev
yarn add babel-plugin-transform-runtime --dev
yarn add babel-preset-es2015 --dev
yarn add parcel-bundler --dev
yarn add vuejs

2. 项目结构

├── appdemo.js
├── app.vue
├── index.html
├── index.js
├── package.json
└── yarn.lock

appdemo.js
export const  dalong ={
 
  demo(){
   return "dalong demo"
 }
}

app.vue
<template>
   <div>
    {{info}}
   <button @click="demo">click demo</button>
   </div>
</template>
<script>
import {dalong} from "./appdemo";
 export default {
  data(){
   return {
    info:dalong.demo()
   }
 },
 methods:{
   demo(){
    alert(dalong.demo())
   }
 }
 }
</script>

index.html
<html>
<body>
<h1>this is dalong demo</h1>
<div id="app">
</div>
<script src="./index.js"></script>
</body>
</html

index.js
import App from "./app.vue";
import Vue from "vue";
new Vue({

 render: h =>h(App),
 el:"#app"
})

package.json
{
  "name": "vuedemo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "parcel-bundler": "^1.3.1",
    "parcel-plugin-vue": "^1.4.0"
  },
  "dependencies": {
    "vuejs": "^2.0.19"
  }
}

3. 代码说明

代码比较简单，主要是parcel vue 插件配置

4. 运行

parcel index.js

运行效果

5. 生产构建

parcel build index.html  可以看到代码都是压缩过的

6. 参考资料

https://www.npmjs.com/package/parcel-plugin-vue
https://parceljs.org/