Biims-ui is up and running

Environment to prepare

  1. Vue 3.0, Node.js 8+, and NRM 1+ are not listed
  2. Vs Code reference brain science group front-end development specifications, configuration

Quick start

  1. Project structures,
    NPM I vue-cli -g // Global install vue scaffolding vue create < project name > // create projectcd< project name > && NPM run serve // Start the project and see the start page - project created successfullyCopy the code

    Must rely on:

    NPM I vue-markdown-loader -d // md File transfer to vUE and display

  2. Directory changes
    SRC --> examples // For examples to show packages --> Add sibling to SRCCopy the code
  3. Configuration changes

    If no, create vue.config.js to save the default system configuration. For details, see cli.vuejs.org/zh/config/

    The configuration is as follows:const path = require('path');

module.exports = {
  // Modify the entry
  pages: {
    index: {
      entry: 'examples/main.js'.template: 'public/index.html'.filename: 'index.html',}},// vue uses @to refer to SRC, examples, and ~ to refer to Packages
  chainWebpack: (config) = > {
    config.resolve.alias
      .set(The '@', path.resolve('examples'))
      .set('~', path.resolve('packages'));

    // Packages and examples directories need to be compiled
    config.module
      .rule('js')
      .include.add(/packages/)
      .end()
      .include.add(/examples/)
      .end()
      .use('babel')
      .loader('babel-loader')
      .tap((options) = > {
        // Modify its options...
        return options;
      });
  },
  // Add vUE to recognize md file, md to display VUE file
  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}); }};Copy the code
  4. Create a Demo component and use it
    >examlpes
>node_modules
>packages
  >color-picker
    >src
	   color-picker.vue
   index.js
  index.js
>public
Copy the code

    Modify the color-picker.vue file for external use

    // The component must declare name import colorPicker from './ SRC /color-picker.vue' Install = function (Vue) {Vue.component(colorpicker. name, ColorPicker)} // Export default colorPicker by defaultCopy the code
  5. Package and push to the warehouse
  6. Install and use