wx-vue

# 快速上手

# 安装

# NPM

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm install wx-vue -S

# CDN

可以通过 unpkg.com/wx-vue 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式库 -->
<link rel="stylesheet" href="https://unpkg.com/wx-vue/lib/styles/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/wx-vue/lib/wx-vue.common.js"></script>

# 引入

# 完整引入

在 main.js 中写入以下内容：

import Vue from 'vue'
import App from './App.vue'
import 'wx-vue/lib/styles/index.css'
import Wx from 'wx-vue'

Vue.use(Wx)

new Vue({
  el: '#app',
  render: h => h(App)
})

# 按需引入

借助 babel-plugin-import，可以只引入需要的组件。

首先，安装 babel-plugin-import：

npm install babel-plugin-import -D

然后，将 .babelrc/babel.config.js 修改为：

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "wx-vue",
        "style": true
      }
    ]
  ]
}

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

import Vue from 'vue'
import App from './App.vue'
import { Button, Input } from 'wx-vue'

Vue.use(Button)
Vue.use(Input)

new Vue({
  el: '#app',
  render: h => h(App)
})

提示

插件模块 Pligins， 包含 Alert 、Confirm 、Loading 、Toast、Tooltip

# Vue-CLI 插件 推荐

如果想要在现有的项目中使用 wx-vue， 推荐您使用 wx-vue 插件，可以节省引入配置工作。

Vue CLI 版本要求

如果你正在使用旧版本的 vue-cli (1.x或2.x)，需要先卸载，并安装最新的 @vue/cli

vue add wx-vue

执行以上脚本，并按照相关提示完成 wx-vue 安装配置。

您也可以运行 vue ui，并通过图形界面来安装和配置 wx-vue。

# 框架模板

# 预设项目模板（Vue CLI preset）推荐

如果想要在新项目中使用 wx-vue，推荐您使用 wx-vue-preset 预设项目模板，可以大大节省引入配置工作。

同时，项目模板充分考虑到开发和调试的需求预设了一些插件(如 vuex，axios，mock，vconsole 等)，并对这些插件进行了最佳的配置和使用优化，以提高开发效率。

Vue CLI 版本要求

如果你正在使用旧版本的 vue-cli (1.x或2.x)，需要先卸载，并安装最新的 @vue/cli

vue create --preset alex8088/wx-vue-preset my-project

执行以上脚本，并按照相关提示完成项目创建，你就可以进行开发了。

预设项目模板包含的插件模块：

  • babel
  • eslint
  • css (less/sass)
  • vue-router
  • vuex (可选)
  • axios (可选)
  • mock (可选,json/mockjs)
  • vconsole (可选)
  • wx-vue (All or on-demand)

开发者可根据项目需要自定义配置创建项目。

# 示例项目模板（Quick start）

你可以下载 wx-vue-quick-start 项目并直接使用。

← 主题定制 →