创建工程目录

1. 使用vue create project-name命令行创建工程，选择框架版本
   
2. 还可以使用vue ui，以图形化界面完成创建工作
   
   
   

使用脚手架创建的工程也可以通过vue ui进入仪表盘页面

编写组件代码并创建目录

1. npm install安装所有依赖，否则运行时会报错
   
2. 按如下结构创建目录
   
3. demo.vue, demo/src是mode组件的代码即vue文件

   <template>
     <div>
       <p>测试</p>
       <el-button>el-button</el-button>
     </div>
   </template>
   <script>
   export default {
     name: 'Demo'
   }
   </script>
   

4. demo/index.js demo/index.js是对demo组件进行单一注册的js文件，便于按需引入使用

   import Demo from './src/demo'
   
   Demo.install = function(Vue) {
       Vue.component(Demo.name, Demo);
   }
   
   export default Demo
   

5. packages/index.js ，packages/index.js是对所有组件进行统一注册的js文件，使用时可以进行全部引入。

   import Demo from "./demo";
   
   // 新增组件时也需要在数组中添加注册
   const components = [
       Demo
   ];
   
   const install = function(Vue) {
       components.forEach(component => {
           Vue.component(component.name, component);
       });
   }
   
   if (typeof window !== 'undefined' && window.Vue) {
       install(window.Vue);
   }
   
   export default {
       install,
       Demo
   }
   

修改配置文件

{
	  "name": "test-component",		// 项目名
	  "version": "0.1.0",			// 版本号，每次上传都要更新
	  "private": false,				// 是否私有，默认为true，改成false
	  "scripts": {
	  // 增加lib命令，最后为打包的入口文件路径
	    "lib": "vue-cli-service build --target lib --dest lib ./packages/index.js"
	  },
	  "main": "lib/test-component.js",	// 打包后的入口文件，若不配置，则在其他项目中就无法使用import xx from '包名'来引入组件，只能以包名作为起点来指定相对路径
	  "files": [
		"dist"
	  ]	// 列入打包的文件和目录，如果不写会把整个工程目录打包
}

发布到npm

• 在npm官网注册，设置用户名，密码，邮箱
• 使用npm login进行登陆

需要特别注意，输入密码时看起来光标没有移动，也没有显示字符，其实是加密隐藏了，正常输入后回车即可

• 切换npm镜像源npm config set registry https://registry.npmjs.org,查看是否切换成功可以使用npm config get registry或者在系统的用户目录下查看npmrc文件
  
  

• 使用npm publish发布

• 切换回淘宝源，方便其他地方使用 npm config set registry https://registry.npm.taobao.org