本文介绍了一个使用Parcel构建工具和Vue.js框架的简单项目搭建过程。包括安装必要的依赖、定义项目结构、配置Parcel Vue插件及运行项目的步骤。通过具体代码示例展示了如何创建Vue组件并将其集成到HTML页面中。
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 vuejs2. 项目结构
├── 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/
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
