Install 安装

  1. npm install zarm-vue --save

还在使用1.0.x版本的，请使用如下安装指令

  1. npm install zarm-vue@1.0 --save

使用Starter Kit

我们提供了通用的项目模板，你可以直接使用。如果不希望使用我们提供的模板，请继续阅读。

Import 引入

  • 全组件引入
  1. import Vue from 'vue';
  2. import zarmVue from 'zarm-vue';
  3. // 引入全局样式
  4. import 'zarm-vue/zarm-vue.default.css';
  5. Vue.use(zarmVue);
  • 按需引入

借助ElementUI提供的babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

  1. npm install babel-plugin-component -D

然后，将 .babelrc 添加：

  1. {  
  2.   // ...
  3.   "plugins": [["component", {
  4.       "libraryName": "zarm-vue",
  5.       "styleLibraryName": "theme"
  6.     }
  7.   ]]
  8. }

接下来，如果你只希望引入部分组件，比如 Button 和 Alert，那么需要在 main.js 中写入以下内容：

  1. import { Button, Alert } from 'zarm-vue'
  2. Vue.use(Button)
  3. Vue.use(Alert)

全组件按需引入示例：

  1. import {
  2.   Accordion,
  3.   AccordionItem,
  4.   Actionsheet,
  5.   Alert,
  6.   Badge,
  7.   Button,
  8.   Calendar,
  9.   Cell,
  10.   Checkbox,
  11.   CheckboxGroup,
  12.   Confirm,
  13.   DatePicker,
  14.   DatePickerView,
  15.   DateSelect,
  16.   Drag,
  17.   Icon,
  18.   Input,
  19.   InputNumber,
  20.   Keyboard,
  21.   KeyboardPicker,
  22.   Loading,
  23.   Mask,
  24.   Message,
  25.   Modal,
  26.   NoticeBar,
  27.   Panel,
  28.   PanelHeader,
  29.   PanelBody,
  30.   PanelFooter,
  31.   Picker,
  32.   PickerView,
  33.   Popup,
  34.   Progress,
  35.   Pull,
  36.   Radio,
  37.   RadioGroup,
  38.   SearchBar,
  39.   Select,
  40.   Slider,
  41.   Spinner,
  42.   StackPicker,
  43.   Stepper,
  44.   Swipe,
  45.   SwipeAction,
  46.   SwipeItem,
  47.   Switch,
  48.   Tabs,
  49.   TabPane,
  50.   Toast,
  51.   Tooltip,
  52.   Uploader,
  53. } from 'zarm-vue'
  55. const components = [
  56.   Accordion,
  57.   AccordionItem,
  58.   Actionsheet,
  59.   Alert,
  60.   Badge,
  61.   Button,
  62.   Calendar,
  63.   Cell,
  64.   Checkbox,
  65.   CheckboxGroup,
  66.   Confirm,
  67.   DatePicker,
  68.   DatePickerView,
  69.   DateSelect,
  70.   Drag,
  71.   Icon,
  72.   Input,
  73.   InputNumber,
  74.   Keyboard,
  75.   KeyboardPicker,
  76.   Loading,
  77.   Mask,
  78.   Message,
  79.   Modal,
  80.   NoticeBar,
  81.   Panel,
  82.   PanelHeader,
  83.   PanelBody,
  84.   PanelFooter,
  85.   Picker,
  86.   PickerView,
  87.   Popup,
  88.   Progress,
  89.   Pull,
  90.   Radio,
  91.   RadioGroup,
  92.   SearchBar,
  93.   Select,
  94.   Slider,
  95.   Spinner,
  96.   StackPicker,
  97.   Stepper,
  98.   Swipe,
  99.   SwipeAction,
  100.   SwipeItem,
  101.   Switch,
  102.   Tabs,
  103.   TabPane,
  104.   Toast,
  105.   Tooltip,
  106.   Uploader,
  107. ];
  109. const install = function (Vue, opts = {}) { 
  110.   /* istanbul ignore if */
  111.   if (install.installed) return;
  113.   components.map(component => Vue.component(component.name, component));
  115.   Vue.use(Loading.directive);
  117.   Vue.prototype.$zaToast = Toast.root;
  118.   Vue.prototype.$zaLoading = Loading.root;
  119.   Vue.prototype.$zaAlert = Alert.root;
  120.   Vue.prototype.$zaConfirm = Confirm.root;
  121. };
  123. install(Vue);
  • 也可以通过cdn引入umd模块
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <!-- import CSS -->
  6.   <link rel="stylesheet" href="https://unpkg.com/zarm-vue@1.1.2/zarm-vue.default.css">
  7.   <script src="https://unpkg.com/vue@2.5.11/dist/vue.min.js"></script>
  8.   <script src="https://unpkg.com/zarm-vue@1.1.2/zarm-vue.umd.js"></script>
  9. </head>
  10. <body>
  11.   <div id="app">
  12.       <za-button theme="primary">普通按钮</za-button>
  13.   </div>
  14. </body>
  15. <script>
  16.   new Vue({
  17.     el: '#app'
  18.   })
  19. </script>
  20. </html>

集成Typescript开发

  • 安装typescript相关依赖
 npm install typescript ts-loader --save-dev
  • webpack配置增加ts-loader支持示例
module.exports = {
  // ...
  resolve: {
    extensions: ['.ts','.js', '.vue', '.json'],
  },
  module: {
    rules: [
      // ...
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        include: [resolve('src'), resolve('test')],
        options: {
          appendTsSuffixTo: [/\.vue$/],
        }
      }
    ]
  },

}
  • 配置tsconfig.json
{
  "compilerOptions": {
    // 与 Vue 的浏览器支持保持一致
    "target": "es5",
    // 这可以对 `this` 上的数据属性进行更严格的推断
    "strict": true,
    // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
    "module": "es2015",
    "moduleResolution": "node"
  },
  "include": ["./src/**/*"]
}
  • 添加vue-shims.d.ts文件
declare module "*.vue" {
 import Vue from "vue";
 export default Vue;
}

declare module 'zarm-vue' {
 const ZarmVue: any;
 export default ZarmVue;
}