Updated mongoose, i18n, element-ui, webpack, vue, vue-router

meta.js

@@ -51,15 +51,15 @@ module.exports = {
       "message": "Port that mock server listen at",
       "default": 7878
     },
-    "i18n": {
+    "i18nEn": {
       "type": "confirm",
       "message": "Need vue-i18n?"
     }
   },
   "filters": {
-    "tasks/replaceI18n.js": "!i18n",
+    "tasks/replaceI18n.js": "!i18nEn",
     "tasks/mock.js": "mock==='mock'",
-    "tasks/remove.js": "!i18n||mock==='mock'",
+    "tasks/remove.js": "!i18nEn||mock==='mock'",
     "mock/**/*": "mock==='mock'"
   },
   "skipInterpolation": "{client/**/*.vue,tasks/**/*.*}",

template/.babelrc

@@ -6,7 +6,7 @@
   "plugins": ["transform-runtime", ["component", [
     {
       "libraryName": "element-ui",
-      "styleLibraryName": "theme-default"
+      "styleLibraryName": "theme-chalk"
     }
   ]]],
   "comments": false

template/.eslintrc.js

@@ -1,7 +1,9 @@
 module.exports = {
   root: true,
-  // https://github.com/vuejs/eslint-config-vue
-  extends: 'vue',
+  extends: [
+    // 'eslint:recommended',
+    'plugin:vue/recommended'
+  ],
   // required to lint *.vue files
   plugins: [
     'html'
@@ -15,8 +17,8 @@ module.exports = {
     "it": true,
     "describe": true
   },
-  parser: 'babel-eslint',
   parserOptions: {
+    parser: 'babel-eslint',
     sourceType: 'module',
     allowImportExportEverywhere: false
   }

template/client/src/components/Header.vue

@@ -16,7 +16,7 @@
         </el-dropdown>
       </div>
       <!-- user settings -->
-      <el-dialog :title="$t('header.settings')" v-model="config.visible" size="small"
+      <el-dialog :title="$t('header.settings')" :visible.sync="config.visible" size="small"
         top="4%" @close="cancelConfig">
         <el-form class="noline" ref="config" label-position="top"
           :model="config.form" :rules="config.rules">
@@ -36,7 +36,7 @@
         </span>
       </el-dialog>
       <!-- change password -->
-      <el-dialog :title="$t('header.password')" v-model="password.visible" size="small" @close="cancelPassword">
+      <el-dialog :title="$t('header.password')" :visible.sync="password.visible" size="small" @close="cancelPassword">
         <el-form label-position="top" :model="password.form"
           :rules="password.rules" ref="password">
           <el-row :gutter="20">
@@ -70,9 +70,9 @@
 import { mapGetters, mapActions } from 'vuex'
 import { merge } from 'lodash'
 import { user as userResource } from 'resources'
-import locales from 'locales/header'
+import i18n from 'locales/header'
 export default {
-  locales,
+  i18n,
   data () {
     return {
       config: {

template/client/src/components/NavMenu.vue

@@ -11,10 +11,10 @@
 </template>
 <script>
 import { mapGetters } from 'vuex'
-import locales from 'locales/menu'
+import i18n from 'locales/menu'
 import { Menu, Submenu, MenuItem, MenuItemGroup } from 'element-ui'
 export default {
-  locales,
+  i18n,
   computed: {
     ...mapGetters(['loggedIn'])
   },

template/client/src/components/Pagination.vue

@@ -20,9 +20,9 @@
 </template>
 <script>
 import { mapGetters } from 'vuex'
-import locales from 'locales/pagination'
+import i18n from 'locales/pagination'
 export default {
-  locales,
+  i18n,
   props: {
     current: {
       type: Number,

template/client/src/constants.js

@@ -4,5 +4,5 @@ export const STORE_KEY_ACCESS_TOKEN = 'user.access_token'
 export const STORE_KEY_REFRESH_TOKEN = 'user.refresh_token'
 
 // user config
-{{#if i18n}}export const STORE_KEY_CONFIG_LANG = 'config.lang'
+{{#if i18nEn}}export const STORE_KEY_CONFIG_LANG = 'config.lang'
 {{/if}}export const STORE_KEY_CONFIG_PAGE_LIMIT = 'config.page.limit'

template/client/src/element-ui.js

@@ -1,67 +1,150 @@
 import Vue from 'vue'
-import { Dialog, Autocomplete, Dropdown, DropdownMenu, DropdownItem, Input, InputNumber,
-  Radio, RadioGroup, RadioButton, Checkbox, CheckboxGroup, Switch, Select, Option,
-  OptionGroup, Button, ButtonGroup, Table, TableColumn, DatePicker, TimeSelect, TimePicker,
-  Popover, Tooltip, MessageBox, Breadcrumb, BreadcrumbItem, Form, FormItem, Tabs, TabPane,
-  Tag, Tree, Notification, Slider, Loading, Row, Col, Upload, Progress, Spinner,
-  Message, Badge, Card, Steps, Step } from 'element-ui'
+import {
+  Pagination,
+  Dialog,
+  Autocomplete,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
+  Menu,
+  Submenu,
+  MenuItem,
+  MenuItemGroup,
+  Input,
+  InputNumber,
+  Radio,
+  RadioGroup,
+  RadioButton,
+  Checkbox,
+  CheckboxButton,
+  CheckboxGroup,
+  Switch,
+  Select,
+  Option,
+  OptionGroup,
+  Button,
+  ButtonGroup,
+  Table,
+  TableColumn,
+  DatePicker,
+  TimeSelect,
+  TimePicker,
+  Popover,
+  Tooltip,
+  Breadcrumb,
+  BreadcrumbItem,
+  Form,
+  FormItem,
+  Tabs,
+  TabPane,
+  Tag,
+  Tree,
+  Alert,
+  Slider,
+  Icon,
+  Row,
+  Col,
+  Upload,
+  Progress,
+  Badge,
+  Card,
+  Rate,
+  Steps,
+  Step,
+  Carousel,
+  CarouselItem,
+  Collapse,
+  CollapseItem,
+  Cascader,
+  ColorPicker,
+  Transfer,
+  Container,
+  Header,
+  Aside,
+  Main,
+  Footer,
+  Loading,
+  MessageBox,
+  Message,
+  Notification,
+} from 'element-ui';
 
-Vue.component(Dialog.name, Dialog)
-Vue.component(Autocomplete.name, Autocomplete)
-Vue.component(Dropdown.name, Dropdown)
-Vue.component(DropdownMenu.name, DropdownMenu)
-Vue.component(DropdownItem.name, DropdownItem)
-Vue.component(Input.name, Input)
-Vue.component(InputNumber.name, InputNumber)
-Vue.component(Radio.name, Radio)
-Vue.component(RadioGroup.name, RadioGroup)
-Vue.component(RadioButton.name, RadioButton)
-Vue.component(Checkbox.name, Checkbox)
-Vue.component(CheckboxGroup.name, CheckboxGroup)
-Vue.component(Switch.name, Switch)
-Vue.component(Select.name, Select)
-Vue.component(Option.name, Option)
-Vue.component(OptionGroup.name, OptionGroup)
-Vue.component(Button.name, Button)
-Vue.component(ButtonGroup.name, ButtonGroup)
-Vue.component(Table.name, Table)
-Vue.component(TableColumn.name, TableColumn)
-Vue.component(DatePicker.name, DatePicker)
-Vue.component(TimeSelect.name, TimeSelect)
-Vue.component(TimePicker.name, TimePicker)
-Vue.component(Popover.name, Popover)
-Vue.component(Tooltip.name, Tooltip)
-Vue.component(Breadcrumb.name, Breadcrumb)
-Vue.component(BreadcrumbItem.name, BreadcrumbItem)
-Vue.component(Form.name, Form)
-Vue.component(FormItem.name, FormItem)
-Vue.component(Tabs.name, Tabs)
-Vue.component(TabPane.name, TabPane)
-Vue.component(Tag.name, Tag)
-Vue.component(Tree.name, Tree)
-Vue.component(Slider.name, Slider)
-Vue.component(Row.name, Row)
-Vue.component(Col.name, Col)
-Vue.component(Upload.name, Upload)
-Vue.component(Progress.name, Progress)
-Vue.component(Spinner.name, Spinner)
-Vue.component(Badge.name, Badge)
-Vue.component(Card.name, Card)
-Vue.component(Steps.name, Steps)
-Vue.component(Step.name, Step)
+import 'element-ui/lib/theme-chalk/index.css'
+
+Vue.use(Pagination);
+Vue.use(Dialog);
+Vue.use(Autocomplete);
+Vue.use(Dropdown);
+Vue.use(DropdownMenu);
+Vue.use(DropdownItem);
+Vue.use(Menu);
+Vue.use(Submenu);
+Vue.use(MenuItem);
+Vue.use(MenuItemGroup);
+Vue.use(Input);
+Vue.use(InputNumber);
+Vue.use(Radio);
+Vue.use(RadioGroup);
+Vue.use(RadioButton);
+Vue.use(Checkbox);
+Vue.use(CheckboxButton);
+Vue.use(CheckboxGroup);
+Vue.use(Switch);
+Vue.use(Select);
+Vue.use(Option);
+Vue.use(OptionGroup);
+Vue.use(Button);
+Vue.use(ButtonGroup);
+Vue.use(Table);
+Vue.use(TableColumn);
+Vue.use(DatePicker);
+Vue.use(TimeSelect);
+Vue.use(TimePicker);
+Vue.use(Popover);
+Vue.use(Tooltip);
+Vue.use(Breadcrumb);
+Vue.use(BreadcrumbItem);
+Vue.use(Form);
+Vue.use(FormItem);
+Vue.use(Tabs);
+Vue.use(TabPane);
+Vue.use(Tag);
+Vue.use(Tree);
+Vue.use(Alert);
+Vue.use(Slider);
+Vue.use(Icon);
+Vue.use(Row);
+Vue.use(Col);
+Vue.use(Upload);
+Vue.use(Progress);
+Vue.use(Badge);
+Vue.use(Card);
+Vue.use(Rate);
+Vue.use(Steps);
+Vue.use(Step);
+Vue.use(Carousel);
+Vue.use(CarouselItem);
+Vue.use(Collapse);
+Vue.use(CollapseItem);
+Vue.use(Cascader);
+Vue.use(ColorPicker);
+Vue.use(Transfer);
+Vue.use(Container);
+Vue.use(Header);
+Vue.use(Aside);
+Vue.use(Main);
+Vue.use(Footer);
+
+Vue.use(Loading.directive);
 
-Vue.use(Loading.directive)
 try {
-  var a = MessageBox
-  var b = Message
-  var c = Notification
-  Vue.prototype.$loading = Loading.service
-  Vue.prototype.$msgbox = a
-  Vue.prototype.$alert = a.alert
-  Vue.prototype.$confirm = a.confirm
-  Vue.prototype.$prompt = a.prompt
-  Vue.prototype.$notify = c
-  Vue.prototype.$message = b
+  Vue.prototype.$loading = Loading.service;
+  Vue.prototype.$msgbox = MessageBox;
+  Vue.prototype.$alert = MessageBox.alert;
+  Vue.prototype.$confirm = MessageBox.confirm;
+  Vue.prototype.$prompt = MessageBox.prompt;
+  Vue.prototype.$notify = Notification;
+  Vue.prototype.$message = Message;
 } catch (e) {
   console.log(e)
 } finally {

template/client/src/locales/header/index.js

@@ -2,6 +2,8 @@ import en from './en'
 import zhCN from './zh-CN'
 
 export default {
-  'zh-CN': zhCN,
-  en
+  messages: {
+    'zh-CN': zhCN,
+    en
+  }
 }

template/client/src/locales/index.js

@@ -8,17 +8,22 @@ import en from './en'
 import eleZhCN from 'element-ui/lib/locale/lang/zh-CN'
 import eleEn from 'element-ui/lib/locale/lang/en'
 
+import ElementLocale from 'element-ui/lib/locale'
+
 const locales = {
   'zh-CN': merge(zhCN, eleZhCN),
   en: merge(en, eleEn)
 }
 
 Vue.use(VueI18n)
 
-Vue.config.lang = lang
-Vue.config.fallbackLang = 'zh-CN'
-
-// set locales
-Object.keys(locales).forEach(lang => {
-  Vue.locale(lang, locales[lang])
+const i18n = new VueI18n({
+  locale: lang,
+  fallbackLocale: 'zh-CN',
+  silentTranslationWarn: true,
+  messages: locales
 })
+
+ElementLocale.i18n((key, value) => i18n.t(key, value))
+
+export default i18n

template/client/src/locales/login/index.js

@@ -2,6 +2,8 @@ import en from './en'
 import zhCN from './zh-CN'
 
 export default {
-  'zh-CN': zhCN,
-  en
+  messages: {
+    'zh-CN': zhCN,
+    en
+  }
 }

template/client/src/locales/menu/index.js

@@ -2,6 +2,8 @@ import en from './en'
 import zhCN from './zh-CN'
 
 export default {
-  'zh-CN': zhCN,
-  en
+  messages: {
+    'zh-CN': zhCN,
+    en
+  }
 }

template/client/src/locales/pagination/index.js

@@ -2,6 +2,8 @@ import en from './en'
 import zhCN from './zh-CN'
 
 export default {
-  'zh-CN': zhCN,
-  en
+  messages: {
+    'zh-CN': zhCN,
+    en
+  }
 }