parcel vue 简单使用

àì夳堔傛蜴生んèń 2022-03-30 17:57 219阅读 0赞

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

运行效果

![562987-20171231103942163-2110296295.png][]

5. 生产构建

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

6. 参考资料

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

[562987-20171231103942163-2110296295.png]: /images/20220330/11f4165e21cb429fb2de2803e939db36.png