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/
 
 
 
 

parcel vue 简单使用的更多相关文章

  1. parcel+vue入门

    一.parcel简单使用 npm install -D parcel-bundler npm init -y (-y表示yes,跳过项目初始化提问阶段,直接生成package.json 文件.) Pa ...

  2. Parcel + Vue 2.x 极速零配置打包体验

    继 Browserify.Webpack 之后,又一款打包工具 Parcel 横空出世 Parcel.js 的官网有这样的自我介绍 “极速零配置Web应用打包工具” 简单接触了一下,单从效率上来说,确 ...

  3. Vue简单基础 + 实例 及 组件通信

    vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

  4. vue简单实现

    vue简单实现 vue的三个核心 虚拟dom, 双向绑定 Proxy,

  5. html vue简单

    1.Vue 简单的替换更新 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. 一篇文章带你了解网页框架——Vue简单入门

    一篇文章带你了解网页框架--Vue简单入门 这篇文章将会介绍我们前端入门级别的框架--Vue的简单使用 如果你以后想从事后端程序员,又想要稍微了解前端框架知识,那么这篇文章或许可以给你带来帮助 温馨提 ...

  7. vue初学实践之路——vue简单日历组件(1)

    ---恢复内容开始--- 最近做的项目有一个需求,需要有一个日历组件供预定功能使用,之前的代码过于繁琐复杂,所以我采用vue重写了这个组件. npm.vue等等安装. 只是一个简单的日历组件,所以并不 ...

  8. 极速搭建RTMP直播流服务器+webapp (vue) 简单实现直播效果

    在尝试使用webRTC实现webapp直播失败后,转移思路开始另外寻找可行的解决方案.在网页上尝试使用webRTC实现视频的直播与看直播,在谷歌浏览器以及safari浏览器上测试是可行的.但是基于基座 ...

  9. vue（2）—— vue简单语法运用，常用指令集

    按照前面的文章:vue(1)——node.js安装使用,利用npm安装vue  安装完vue之后,就可以使用vue了 vue vue简介 前面安装好vue之后,确实还没有对vue进行介绍,首先,官网: ...

随机推荐

  1. Jenkins基础复习

  2. LR 的基础分析--y-手打

    一.分析Analysis Summary 1.实际参与测试的Vuser为10个 2.总吞吐量(TPS)为208725625bytes 3.平均吞吐量为714814bytes/second 4.总点击数 ...

  3. Enumerable的判断是否包含某个元素

    // 通过使用默认的相等比较器(即纯粹的对象比较)确定序列是否包含指定的元素. public static bool Contains<TSource>(this IEnumerable& ...

  4. centos网卡配置

    DEVICE=物理设备名 IPADDR=IP地址 NETMASK=掩码值 NETWORK=网络地址 BROADCAST=广播地址 GATEWAY=网关地址 TYPE=Ethernet (网络类型)ON ...

  5. Zookeeper在 Linux 系统的安装

    安装步骤:第一步:安装 jdk第二步:把 zookeeper 的压缩包上传到 linux 系统.Alt+P 进入 SFTP ,输入 put d:\zookeeper-3.4.6.tar.gz 上传第三 ...

  6. 025——VUE中事件的基本使用与VUE中差异

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. jquery基础 笔记一

    一. 1. vsdoc: 在Visual Studio中需要引入此版本的jquery类库才能启用智能感知.如:jquery-1.3.2-vsdoc2.js<body> <div id ...

  8. poj2195

    题解: 简单KM 把每一个男的和房子分离 代码: #include<cstdio> #include<cmath> #include<algorithm> #inc ...

  9. 《Effective C++》第8章 定制new和delete-读书笔记

    章节回顾: <Effective C++>第1章 让自己习惯C++-读书笔记 <Effective C++>第2章 构造/析构/赋值运算(1)-读书笔记 <Effecti ...

  10. c# winform捕获全局异常，并记录日志

    using System; using System.Collections.Generic; using System.Linq; using System.Windows.Forms; using ...