chore: add example

README.md

@@ -12,9 +12,25 @@ vue 项目国际化全流程解决方案: 一个命令行工具，对代码里
 
 ```shellscript
 npm install -g vue-i18n-code-shift
-
 ```
 
+## 使用
+
+### 示例
+
+1. 在项目根目录（example/projectAfter）使用 `vics init` 命令初始化，生成配置文件（默认是 .vics 目录）
+2. 使用 `vics one` 命令一键提取替换(也可以分步使用 `vics extract` 和 `vics replace` 命令)
+3. 使用 `vics export en` 导出未翻译的文件，就可以送翻了
+4. 使用 `vics sync` 暂时 mock 语料
+5. 使用 `vics import en 翻译好的 xlsx 文件路径` 导入翻译好的语料
+
+### 效果
+
+- .vue 文件
+  ![vue](https://github.com/jonjia/vue-i18n-code-shift/raw/feature/example/assets/vue.png)
+- .js 文件
+  ![js](https://github.com/jonjia/vue-i18n-code-shift/raw/feature/example/assets/js.png)
+
 ## 命令
 
 ### `vics init`

example/projectAfter/.vics/en/common.js

@@ -0,0 +1,3 @@
+export default {
+  test: 'test',
+};

example/projectAfter/.vics/en/helloWorld.js

@@ -0,0 +1,7 @@
+export default {
+  world: 'world',
+  hello: 'Hello',
+  propertySubstitution: 'Property substitution',
+  helloWorld: 'Hello, world',
+  howToUse: 'How to use',
+};

example/projectAfter/.vics/en/index.js

@@ -0,0 +1,7 @@
+import common from './common';
+import helloWorld from './helloWorld';
+
+export default {
+  common,
+  helloWorld,
+};

example/projectAfter/.vics/vics-config.json

@@ -0,0 +1,47 @@
+{
+  "vicsDir": "./.vics",
+  "configFile": "./.vics/vics-config.json",
+  "srcLang": "zh-CN",
+  "distLangs": [
+    "en"
+  ],
+  "langMap": {
+    "en_US": "en",
+    "en-US": "en",
+    "en": "en"
+  },
+  "baiduAppid": "20200602000482988",
+  "baiduKey": "CF5_meZdDAOtDzVkn2Nv",
+  "importI18N": "import I18N from '@/i18n';",
+  "i18nPath": "@/i18n",
+  "ignoreDir": [],
+  "ignoreFile": [],
+  "exportColConfig": [
+    "export_path",
+    "业务线",
+    "business_key",
+    "描述（字典值）",
+    "语料类型",
+    "最长字符",
+    "首字母大写",
+    "语料说明图",
+    "translatable",
+    "formatted",
+    "zh_CN"
+  ],
+  "exportColIndexMap": {
+    "businessLine": 1,
+    "key": 3,
+    "text": 10
+  },
+  "importColIndexMap": {
+    "key": 3,
+    "text": 11
+  },
+  "checkColIndexMap": {
+    "key": 3,
+    "zh-CN": 11,
+    "en": 12
+  },
+  "prettierConfig": {}
+}

example/projectAfter/.vics/zh-CN/common.js

@@ -0,0 +1,3 @@
+export default {
+  test: '测试'
+};

example/projectAfter/.vics/zh-CN/helloWorld.js

@@ -0,0 +1,7 @@
+export default {
+  world: '世界',
+  hello: '你好',
+  propertySubstitution: '属性替换',
+  helloWorld: '你好，世界',
+  howToUse: '如何使用',
+};

example/projectAfter/.vics/zh-CN/index.js

@@ -0,0 +1,7 @@
+import common from './common';
+import helloWorld from './helloWorld';
+
+export default {
+  common,
+  helloWorld,
+};

example/projectAfter/HelloWorld/index.js

@@ -0,0 +1,6 @@
+import I18N from '@/i18n';
+console.log(I18N.t('helloWorld.hello'), I18N.t('helloWorld.world'));
+
+
+
+

example/projectAfter/HelloWorld/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="hello">
+    <h1>{{ $t('helloWorld.howToUse') }}<h1>
+    <p>{{ $t('helloWorld.helloWorld') }}</p>
+    <input :placeholder="$t('helloWorld.propertySubstitution')" />
+  </div>
+</template>
+
+<script>
+import I18N from '@/i18n';
+export default {
+  name: 'HelloWorld',
+  mounted() {
+    console.log(I18N.t('helloWorld.hello'), I18N.t('helloWorld.world'))
+  }
+}
+</script>

example/projectBefore/HelloWorld/index.js

@@ -0,0 +1 @@
+console.log('你好', '世界');

example/projectBefore/HelloWorld/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="hello">
+    <h1>如何使用<h1>
+    <p>你好，世界</p>
+    <input placeholder="属性替换" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  mounted() {
+    console.log('你好', '世界')
+  }
+}
+</script>