组件库搭建-基于Element ui

BIIMS-UI 搭建到使用

环境准备

1. Vue 3.0 , Node.js 8+，nrm 1+ 具体安装暂不列出
2. Vs code 参考脑科学组 前端开发规范，配置下

快速开始

1. 项目搭建

   npm i vue-cli -g  //全局安装vue脚手架
   vue create <项目名称> // 创建项目 
   cd <项目名称> && npm run serve // 启动项目并看到启动页 - 项目创建成功
   

   必须依赖：

   ​ npm i vue-markdown-loader -D // md文件转vue并展示

2. 目录更改

   src  --> examples //用于示例展示
   packages  --> 新增同src同级 
   

3. 配置更改

   如果没有，则新建vue.config.js 用于存放系统默认配置 具体配置参考 cli.vuejs.org/zh/config/

   配置如下：
   
   const path = require('path');
   
   module.exports = {
     // 修改入口
     pages: {
       index: {
         entry: 'examples/main.js',
         template: 'public/index.html',
         filename: 'index.html',
       },
     },
     // vue默认@指向src目录，这里要修正为examples，另外新增一个~指向packages
     chainWebpack: (config) => {
       config.resolve.alias
         .set('@', path.resolve('examples'))
         .set('~', path.resolve('packages'));
   
       // packages和examples目录需要加入编译
       config.module
         .rule('js')
         .include.add(/packages/)
         .end()
         .include.add(/examples/)
         .end()
         .use('babel')
         .loader('babel-loader')
         .tap((options) => {
           // 修改它的选项...
           return options;
         });
     },
     // 添加vue可识别md文件，md转成vue文件展示
     chainWebpack: (config) => {
       config.module
         .rule('md')
         .test(/\.md/)
         .use('vue-loader')
         .loader('vue-loader')
         .end()
         .use('vue-markdown-loader')
         .loader('vue-markdown-loader/lib/markdown-compiler')
         .options({
           raw: true,
         });
     },
   };
   
   

4. 创建个Demo 组件并使用

   >examlpes
   >node_modules
   >packages
     >color-picker
       >src
   	   color-picker.vue
      index.js
     index.js
   >public
   

   修改color-picker.vue文件 对外使用

   // 导入组件，组件必须声明 name
   import colorPicker from './src/color-picker.vue'
   
   // 为组件提供 install 安装方法，供按需引入
       colorPicker.install = function (Vue) {
         Vue.component(colorPicker.name, colorPicker)
   
   }
   
   // 默认导出组件
   export default colorPicker
   

5. 打包并推送到仓库

6. 安装使用