nat规范
<p>[TOC]</p>
<h1>nat 使用</h1>
<h2>安装</h2>
<pre><code>npm i nat -S</code></pre>
<h2>按需加载</h2>
<p>借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。</p>
<p>首先，安装 babel-plugin-component：</p>
<pre><code>npm install babel-plugin-component -D</code></pre>
<p>然后，将 .babelrc plugins 增加属性 修改为：</p>
<pre><code>{
"plugins": [
//增加属性开始
[
"component",
{
"libraryName": "nat",
"style": false
}
]
//增加属性结束
],
}</code></pre>
<h2>使用方法</h2>
<p>全局引入</p>
<pre><code>import Vue from 'vue';
//全部引入
import nat from 'nat';
Vue.use(nat)
//引入部分
import {THeader} from 'nat';
Vue.use(THeader)</code></pre>
<p>组件使用</p>
<pre><code>//全局
<template>
<t-header>111</t-header>
</template>
//局部
<template>
<t-header>111</t-header>
</template>
import {THeader} from 'nat';
export default {
components: {
THeader
}
}</code></pre>
<p>函数类初始值</p>
<pre><code>
//全局
import nat from 'nat';
Vue.use(nat)；
Vue.$nat.cookie.setDefaults(opts);
//或
import {cookie} from 'nat';
Vue.use(cookie,{opts});
//局部
import {cookie} from 'nat';
cookie.setDefaults(opts);</code></pre>
<p>函数类使用</p>
<pre><code>
//全局
export default {
methods: {
test(){
this.$nat.cookie.get()
}
}
}
//局部
import {cookie} from 'nat';
export default {
methods: {
test(){
cookie.defineds = {};
cookie.get()
}
}
}</code></pre>
<h1>组件制作规范</h1>
<h2>结构</h2>
<p>文件夹名与函数名称 或 组件name一致</p>
<p>组件</p>
<pre><code>src
xx.vue
index.js
</code></pre>
<p>函数</p>
<pre><code>xx.js
index.js
</code></pre>
<h2>组件</h2>
<p>组件name使用 <code>T</code> 开头的形式，如 <code><t-header></t-header></code> 则 name 为 <code>THeader</code> 文件夹名为 <code>t-header</code></p>
<pre><code>//header.vue
<template>
<header :style="{ height }">
<slot></slot>
</header>
</template>
<script>
export default {
name: 'THeader',
props: {
height: {
type: String,
default: '60px'
}
}
};
</script>
//index.js
import Header from './src/header';
Header.install = function(Vue) {
Vue.component(Header.name, Header);
};
export default Header;
</code></pre>
<h2>函数</h2>
<p>统一使用<code>setDefaults</code>做为初始化函数，没有可不加。</p>
<pre><code>//demo.js
var defaults = { a: 1 };
function ealert(t) {
console.log(defaults)
alert(t + 1);
}
function setDefaults(t) {
defaults = Object.assign({},defaults,t);
}
export default {
ealert,
setDefaults
};
//index.js
import demo from './demo';
const plugin = {
install(Vue, opts = {}) {
if (!Vue.$nat) {
Vue.$nat = {};
}
//初始化参数
demo.setDefaults(opts);
Vue.$nat.alert = demo;
Vue.prototype.$nat = Vue.$nat;
}
};
//把demo的方法 挂载到 plugin
const newObj = Object.assign({}, plugin, demo);
export default newObj;
</code></pre>
<h1>组件测试</h1>
<p>开发完 可用nat index.js 引入做测试</p>
<p>nat index.js</p>
<pre><code>import demo from './demo/index.js';
import THeader from './t-header/index.js';
const components = [demo, THeader];
const install = function(Vue, opts = {}) {
console.log(1);
components.forEach(component => {
Vue.use(component);
});
};
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
const version = '1.0.0';
export const list = {
version,
demo,
THeader,
install
};
export default list;
</code></pre>
<h1>文档写法参考</h1>
<h2>简介</h2>
<ul>
<li>横屏统一处理</li>
</ul>
<h2>引入</h2>
<pre><code class="language-javascript">import {landscape} from 'nat';
Vue.use(landscape, {isInit: true});</code></pre>
<h2>初始化属性</h2>
<table>
<thead>
<tr>
<th>名称</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>isInit</td>
<td>是否初始化。如果初始化的话，横屏后统一显示。【true:初始化；false:不初始化 。默认true】</td>
<td>boolean</td>
<td>true</td>
</tr>
</tbody>
</table>
<h2>方法</h2>
<table>
<thead>
<tr>
<th>名称</th>
<th>说明</th>
<th>类型</th>
<th>返回值</th>
</tr>
</thead>
<tbody>
<tr>
<td>getLandscapeStatus</td>
<td>得到横屏状态</td>
<td>Function():boolean</td>
<td>true:横屏；false:竖屏</td>
</tr>
</tbody>
</table>
<h2>示例</h2>
<pre><code>var cookieResult = cookie.get('test');
//test
</code></pre>
<h2>修订记录</h2>
<table>
<thead>
<tr>
<th style="text-align: left;">版本</th>
<th style="text-align: left;">日期</th>
<th style="text-align: left;">操作内容</th>
<th style="text-align: left;">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">1.0.0</td>
<td style="text-align: left;">20181101</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">初始版本</td>
</tr>
</tbody>
</table>
<h3></h3>