快速上手

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

  • 创建一个 Vvue.js 项目，推荐引用最新版本的 vue-cli 工具来创建。 
  1. yarn global add @vue/cli
  3. vue create <your_projectname>
  • 引入 WeVue
  • 完整引入在入口文件 main.js 中编写如下内容： 
  1. import Vue from 'vue'
  2. import WeVue from 'we-vue'
  3. import 'we-vue/lib/we-vue.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 进行编译。