快速上手

    本文将介绍如果在项目中使用 WeVue。

    • 创建一个 vue.js 项目，推荐引用最新版本的 vue-cli 工具来创建。
    1. npm install -g @vue/cli @vue/cli-service-global
    3. vue create <your_projectname>
    • 引入 WeVue
    • 完整引入在入口文件 main.js 中编写如下内容：
    1. import Vue from 'vue'
    2. import WeVue from 'we-vue'
    3. import 'we-vue/lib/style.css'
    4. import App from './App.vue'
    6. Vue.use(WeVue)
    8. new Vue({
    9.   el: '#app',
    10.   render: h => h(App)
    11. })

    如此即完成了 WeVue 的引入。

    • 按需引入可以借助 babel-plugin-import 实现按需引入，以减小项目体积。首先，安装 babel-plugin-import:
    1. npm install babel-plugin-import -D

    然后修改 babel.config.js:

    注意 plugins 项

    1. module.exports = {
    2.   presets: [
    3.     '@vue/app'
    4.   ],
    5.   plugins: [
    6.     ["import", { "libraryName": "we-vue", "style": "style.css" }, "we-vue"]
    7.   ]
    8. }

    配置完成之后便可以按需引入需要的组件，例如引入 Group 和 Cell，代码如下:

    1. import Vue from 'vue'
    2. import 'we-vue/lib/style.css' // 按需引入时也需要引入此样式
    3. import { Group, Cell } from 'we-vue'
    4. import App from './App.vue'
    6. Vue.use(Group).use(Cell)
    8. new Vue({
    9.   el: '#app',
    10.   render: h => h(App)
    11. })
    • 开始使用运行 npm run serve 启动本地服务器进行开发。

    运行 npm run build 进行编译。