封装vue组件的原则和方法

原则   

以下将封装出来的通用组件叫做子组件，引用通用组件的界面叫做父组件。封装出来的组件必须具有高性能，低耦合的特性，主要从以下几点入手：

1.数据从父组件传入

    子组件本身不要生成数据，如果需要生成数据，只能在组件内部进行使用，不要传递出去。

    父组件使用props对子组件进行传参：

    对于通过props传入的参数，不建议对其进行操作，因为会同时修改父组件里面的数据（如果修改的话，控制台中也会报错的），如果需要修改数据，可以传递给父组件，让父组件去修改（在父组件中处理事件）。

2.在父组件中处理事件

    父组件中处理的事件是和后端交互的事件，比如发起的axios的请求，但并不是所有的事件都放到父组件中处理，比如组件内部的一些交互行为，或者处理的数据只在组件内部传递，就可以在子组件中处理。

3.记得留一个slot

    一个通用的组件，往往不能完美的适应所有的应用场景，所以在封装组件的时候，只需要完成组件的80%的功能，剩下的20%让父组件通过slot解决。

4.不要依赖vuex

    如果要抽离组件尽量不要使用vuex来实现参数的传递，因为vuex是用来管理组件状态的，虽然可以用来传参，但是不推荐，可以选择放到localstorage中，或者通过props传递等方式。

5.合理使用scoped

    样式中添加scoped可以让样式只对当前组件生效，但是一味使用scoped，会产生重复代码，所以需要有一个全局的样式，组件内只写针对于组件的样式，避免重复的样式代码。

6.组件具有单一职责

    封装业务组件或者基础组件，如果不能给这个组件起一个有意义的名字，证明这个组件承担的职责可能不够单一，需要继续抽组件，直到它可以是一个独立的组件即可。

方法

在package.json中配置打包路径：

1、在scripts中定义打包指令；
指令说明： --target lib 关键字 指定打包的目录
–name 打包后的文件名称
–dest 打包后的文件夹的名称
例如：“sf_common_build”: "node build/build.js --target lib ./src/ui/index.js --name qf-ssf --dest com_ss

3种方式：
1、npm本地file引用：
在项目控制台下输入 npm install …/common/
这时修改common项目下面的任意代码都会实时生效，不用打包，不用更新引入包，也不用重启。而且在package.json中有引入记录。
如：
“vue_common”: “file:…/vue_common_name”,
“vue_common_git”: “git+https://gitee.com/XXXXX/vue_common.git#master”,

2、link引用：
首先在组件文件下的控制台输入npm link ; 然后在项目控制台下输入 npm link XX组件文件名。
这就将这个公共的项目通过软连接的方式引入到项目里面来了。
这时修改组件项目下面的任意代码都会实时生效，不用打包，也不用重启了。在package.json中没有引入记录。

3、npm package(目前两种：a、不打包可以有多个组件， b、打包的话只能有一个组件？)
在http://www.npmjs.com注册一个账号
进入common的控制台，输入命令npm login，按照提示输入刚注册的账号密码
输入命令 npm publish 即可
在项目控制台下输入npm install common --save

注意：每次改动代码再次发布时，需要修改package.json文件中的版本号，不然发布不成功。
开发project1和project2的程序猿只需关注自己项目的业务功能，公共的common有更新时，执行命令npm install common就可以了。切记频繁改动common包时，project1和project2需要频繁更新common包的引入。