0
点赞
收藏
分享

微信扫一扫

npm私服推送

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,所以引用文件的名字也得变。
在这里插入图片描述

到此组件就开发完了,打包下看看, npm run build dist下生成了俩文件,如下:
在这里插入图片描述

这个.map文件怎么回事,其实就是这段代码:
在这里插入图片描述

生产环境的时候, 我们就不调试了,也不想要这个.map文件,那就先把这个 devtool删了,然后放在这里,看下图,只要在开发环境的时候才启用这个调试,
在这里插入图片描述

把dist目录下的俩文件删除,再npm run build 就不会产生.map文件了。
npm run dev 让项目跑起来,我们在App.vue里面调用该组件,并做测试,调试。

6.发布到私服

npm publish

在这里插入图片描述

7.使用地址
在这里插入图片描述

8.清除缓存

npm cache clear --force

9.设置 .npmrc 文件

registry=私服地址

10.初始化vue项目

vue init webpack 项目名

11.引入自定义组件

npm install 组件包名

12.引入

在这里插入图片描述

举报

相关推荐

0 条评论