npm私服推送-CFANZ编程社区

Npm 推送配置
1.新建配置文件
配置文件目录 C:\Users\用户名
新建 .npmrc 文件
2.配置文件账号密码

registry=私服地址
always-auth=true
_auth="base64格式账号密码"
email=邮箱地址
sass_binary_site=https://npm.taobao.org/mirrors/node-sass

3.安装vue cli

npm install -g @vue/cli
Vue --version

4.新建组件项目

vue init webpack-simple 组件名

5.开发组件
修改文件目录
1.在src目录下新建components文件夹，然后在此文件夹下建立Main.vue文件
　　Main.vue 名字也可以是其他，我们写的这个组件就是放在该文件里面，之前的App.vue是用于本地开发，测试用的入口文件，也就是用于 npm run dev 的入口文件。
2.在webpack.config.js同级目录（也是该组件的根目录）下新建 index.js文件， index.js是把Main.vue文件暴露出去的出口。
修改完之后的文件目录如下，标红的就是新增的内容：

修改文件内容，配置
1.Main.vue内容如下（注意name）：

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

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

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

2.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>

3.index.js内容如下

import Main from './src/component/Main'
import _Vue from 'vue'

Main.install = Vue => {
if (!Vue) {
window.Vue = Vue = _Vue
}
Vue.component(Main.name, Main)
}
export default Main;

4.修改package.json
在这里插入图片描述

5.修改 webpack.config.js
在这里插入图片描述

说明：入口会根据开发环境，生产环境切换， main.js 是npm run dev 的入口，就是App.vue，用于调试/测试我们开发的组件; index.js是Main.vue，就是我们开发的组件，我们打包到生产环境打包就只是单纯的 xxxxxx 组件
6.修改index.html的js引用路径，因为我们修改了output 的 filename，所以引用文件的名字也得变。
在这里插入图片描述