Vue组件打包

时间：2020-04-10 12:38:49 阅读：78 评论：0 收藏：0 [点我收藏+]

一、安装 npm （命令建议使用 powershell）

二、 npm -v 　　检测是否安装成功

三、 npm install -g vue-cli 安装脚手架（用于自动生成 webpack+vue 的项目模板）

四、 vue init webpack-simple myapp 初始化项目（myapp 项目名）

　　根据提示进行配置安装 sass

五、新建文件（夹）

技术分享图片

六、修改 App.vue Main.vue index.js 文件

App.vue

<template>
  <div>
    <Main :propData=‘initData‘/>
  </div>
</template>

<script>
import Main from ‘./components/Main‘
export default {
    data(){
      return {
        initData: ‘hello 你好‘
      }
    },
    components:{
      Main
    }
}
</script>

<style>

</style>

Main.vue

<template>
  <div class="container">
    <div>{{msg}}</div>
    <div>{{propData}}</div>
  </div>
</template>

<script>
export default {
  name: ‘myapp‘,
  data () {
    return {
      msg: ‘Welcome to Your Vue.js App‘
    }
  },
  props: {
      propData: {
          type: String,
          default: ‘我是默认值‘
      }
  }
}
</script>

<style lang="scss">
.container{
    text-align: center;
}
</style>

index.js

import Main from ‘./src/components/Main‘
 
// 这一步判断window.Vue是否存在，因为直接引用vue.min.js， 它会把Vue绑到Window上，我们直接引用打包好的js才能正常跑起来。
if (typeof window !== ‘undefined‘ && window.Vue) {
window.Vue.component(‘myapp‘, Main)
}
//这样就可以使用Vue.use进行全局安装了。
Main.install = function(Vue){
Vue.component(Main.name, Main)
}
export default Main

七、修改 package.json

技术分享图片