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.引入