parcel vue 简单使用
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├── 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"
}
}代码比较简单，主要是parcel vue 插件配置parcel index.js
parcel build index.html 可以看到代码都是压缩过的https://www.npmjs.com/package/parcel-plugin-vue
https://parceljs.org/parcel vue 简单使用的更多相关文章
- parcel+vue入门
一.parcel简单使用 npm install -D parcel-bundler npm init -y (-y表示yes,跳过项目初始化提问阶段,直接生成package.json 文件.) Pa ...
- Parcel + Vue 2.x 极速零配置打包体验
继 Browserify.Webpack 之后,又一款打包工具 Parcel 横空出世 Parcel.js 的官网有这样的自我介绍 “极速零配置Web应用打包工具” 简单接触了一下,单从效率上来说,确 ...
- Vue简单基础 + 实例 及 组件通信
vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...
- vue简单实现
vue简单实现 vue的三个核心 虚拟dom, 双向绑定 Proxy,
- html vue简单
1.Vue 简单的替换更新 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 一篇文章带你了解网页框架——Vue简单入门
一篇文章带你了解网页框架--Vue简单入门 这篇文章将会介绍我们前端入门级别的框架--Vue的简单使用 如果你以后想从事后端程序员,又想要稍微了解前端框架知识,那么这篇文章或许可以给你带来帮助 温馨提 ...
- vue初学实践之路——vue简单日历组件(1)
---恢复内容开始--- 最近做的项目有一个需求,需要有一个日历组件供预定功能使用,之前的代码过于繁琐复杂,所以我采用vue重写了这个组件. npm.vue等等安装. 只是一个简单的日历组件,所以并不 ...
- 极速搭建RTMP直播流服务器+webapp (vue) 简单实现直播效果
在尝试使用webRTC实现webapp直播失败后,转移思路开始另外寻找可行的解决方案.在网页上尝试使用webRTC实现视频的直播与看直播,在谷歌浏览器以及safari浏览器上测试是可行的.但是基于基座 ...
- vue（2）—— vue简单语法运用，常用指令集
按照前面的文章:vue(1)——node.js安装使用,利用npm安装vue 安装完vue之后,就可以使用vue了 vue vue简介 前面安装好vue之后,确实还没有对vue进行介绍,首先,官网: ...
随机推荐
- Java 完美判断字符串中中文字符【中文符号】
package com.cmc.util; import java.util.regex.Pattern; public class CharUtil { public static void mai ...
- 使用python编写微信跳一跳的自动脚本
实现思路: 调用adb命令,截图 寻找小小人的底部中心点role(从下到上扫描,直到找到小小人相同像素的点,至于小小人像素点rgb是什么,可以使用photoshop查看) 寻找棋盘最高点top,然后寻 ...
- Highcharts 标示区曲线图；Highcharts 对数图表；Highcharts 时间间隔图表
Highcharts 标示区曲线图 配置 使用 yAxis.plotBands 属性来配置标示区.区间范围使用 'from' 和 'to' 属性.颜色设置使用 'color' 属性.标签样式使用 'l ...
- day6-面向对象进阶篇
在面向对象基础篇中,我们讲述了面向对象的很多基础知识,但也有很多限于篇幅并没有涉及到,这里通过进阶篇来完善补充.本篇将详细介绍Python 类的成员.成员修饰符. 一. python类的成员 以下内容 ...
- 使用XMLHttpRequest对象完成原生的AJAX请求
1.大家眼中的Ajax 说到Ajax,只要有过前端开发经验的童鞋一定都不陌生,大都知道它就是一种与后端之间的通信技术,通过这个神奇的家伙,我们不用像传统表单那样填完信息一点提交就呼啦呼啦跳转了.Aja ...
- js获取显示器、页面等高度 (转)
网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth ...
- CentOS 6.5 升级内核到 3.10.28
本文适用于CentOS 6.4, CentOS 6.5,亲测可行,估计也适用于其他Linux发行版. 1. 准备工作 1.1 下载源码包 Linux内核版本有两种:稳定版和开发版 ,Linux内核版本 ...
- Error:java: Compilation failed: internal java compiler error（转）
set中java complier 设置的问题 ,项目中有人用jdk1.6 有人用jdk1.7 版本不一样 会一起这个错误 进行如下操作: 原文链接:http://blog.csdn.net/ ...
- 通过ping 主机名，或者主机名对应的IP地址
通过ping 主机名,或者主机名对应的IP地址: 如下图: 懵了吧? 但是你用 ping 主机名 -4
- Linux：split命令详解
split 可以将一个大文件分割成很多个小文件,有时需要将文件分割成更小的片段,比如为提高可读性,生成日志 语法 split(选项)(file)PREFIX 选项 -b:值为每一输出档案的大小,单位为 ...