1.安装依赖
  1. yarn global add parcel-bundler
  2. yarn add babel-preset-env --dev
  3. yarn add parcel-plugin-vue --dev
  4. yarn add babel-plugin-transform-runtime --dev
  5. yarn add babel-preset-es2015 --dev
  6. yarn add parcel-bundler --dev
  7. yarn add vuejs
2. 项目结构
  1. ├── appdemo.js
  2. ├── app.vue
  3. ├── index.html
  4. ├── index.js
  5. ├── package.json
  6. └── yarn.lock
  8. appdemo.js
  9. export const  dalong ={
  11.   demo(){
  12.    return "dalong demo"
  13.  }
  14. }
  16. app.vue
  17. <template>
  18.    <div>
  19.     {{info}}
  20.    <button @click="demo">click demo</button>
  21.    </div>
  22. </template>
  23. <script>
  24. import {dalong} from "./appdemo";
  25.  export default {
  26.   data(){
  27.    return {
  28.     info:dalong.demo()
  29.    }
  30.  },
  31.  methods:{
  32.    demo(){
  33.     alert(dalong.demo())
  34.    }
  35.  }
  36.  }
  37. </script>
  39. index.html
  40. <html>
  41. <body>
  42. <h1>this is dalong demo</h1>
  43. <div id="app">
  44. </div>
  45. <script src="./index.js"></script>
  46. </body>
  47. </html
  49. index.js
  50. import App from "./app.vue";
  51. import Vue from "vue";
  52. new Vue({
  54.  render: h =>h(App),
  55.  el:"#app"
  56. })
  58. package.json
  59. {
  60.   "name": "vuedemo",
  61.   "version": "1.0.0",
  62.   "main": "index.js",
  63.   "license": "MIT",
  64.   "devDependencies": {
  65.     "babel-plugin-transform-runtime": "^6.23.0",
  66.     "babel-preset-env": "^1.6.1",
  67.     "babel-preset-es2015": "^6.24.1",
  68.     "parcel-bundler": "^1.3.1",
  69.     "parcel-plugin-vue": "^1.4.0"
  70.   },
  71.   "dependencies": {
  72.     "vuejs": "^2.0.19"
  73.   }
  74. }
3. 代码 说明
  1. 代码比较简单，主要是parcel vue 插件配置
4. 运行
  1. parcel index.js
运行效果
 
5. 生产构建
  1. parcel build index.html  可以看到代码都是压缩过的
6. 参考资料
  1. https://www.npmjs.com/package/parcel-plugin-vue
  2. 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. double int char long 等数据类型所占的字节数-----待整理

  2. Kinect研究文档

    1.  Kinect主要脚本介绍 1.1  KinectManager脚本 控制传感器并轮询数据流, 下图是参数详解: 公共API网址:https://ratemt.com/k2gpapi/annot ...

  3. docker远程仓库镜像推送到本地仓库

    #!/bin/bashimageid=(`docker images |grep -v REPOSITORY|awk '{print $3}'`)image=(`docker images |grep ...

  4. pip 使用总结

    pip的安装: Windows Python2.7 以上的版本均自带pip,安装的时候记得勾选对应的选项即可. 安装easy_install, 通过easy_install pip 下载[easy_s ...

  5. Python 常用 PEP8 编码规范

    Python 常用 PEP8 编码规范 代码布局 缩进 每级缩进用4个空格. 括号中使用垂直隐式缩进或使用悬挂缩进. EXAMPLE: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  6. 3.spring cloud eureka 高可用

    1.目的 防止某一台服务器宕机 通常通过多台EUREKA来为客户端进行注册,客户也进行注册 2.开启三台EUREKA 三天EUREKA分别对应端口 8761 8762 8763 配置文件如下 EURE ...

  7. Django-自定义分页组件

    1.封装的分页代码: class PageInfo(object): def __init__(self,current_page,all_count,per_page,base_url,show_p ...

  8. 《gradle 用户指南中文版》 第1章、简介

    第1章.简介 目录 1.1 关于本用户指南 Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建工具. 这里我们将介绍Gradle,我们认为gradle让java项 ...

  9. Azure .Net应用架构原型

    本文介绍一种部署在azure 上.net 应用的一种常用架构对接者.这个角色可以是Api GateWay或代理或负载均衡器.目的有多方面,集中管理机器的注册和监控,安全,负载均衡,请求过滤,反向代理等 ...

  10. java入门学习（6）—封装，继承，多态，this，super，初始代码块

    1.[封装]:将对象的状态信息隐藏,不允许直接访问,而是通过该类提供的的方法阿里实现内部信息的访问和操作. 使用到的修饰符:private,不用修饰符(default),protected,publi ...