Noospic
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
tiny-vue/examples/sites/demos/pc/webdoc/installation-en.md

5.2 KiB
Raw Permalink Blame History

Installation

TinyVueThe component library also supportsVue 2.0andVue 3.0Framework, unified dependency package:@opentiny/vue, please install different versions to fit your project according to the table below:

Project Vue Version Component Library Version
Vue2.x @opentiny/vue@2.x
Vue3.x @opentiny/vue@3.x

Vue2 Engineering Description

For a long time, TinyVue only supports Vue 2.6.14. Starting from TinyVue 2.11.0, the project of Vue 2.7+ is also supported. Make sure that you have installed the correct Vue 2.x dependency.

New Project Configuration

In the root directory of the project, open the console and execute the following command toVue 3.0Project InstallationTinyVueComponent library:

yarn add @opentiny/vue@3
#or
npm install @opentiny/vue@3

Alternatively, run the following command.Vue 2.0Project Installation ofTinyVueComponent library:

yarn add @opentiny/vue@2
#or
npm install @opentiny/vue@2

If it'sViteAfter the dependency is installed, modify the project.vite.config.js, add the following code highlighted section:

// vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  define: {
    'process.env': { ...process.env }
  }
})

To avoid the uncertainty associated with monthly (minor) upgrades of @opentiny/vue , it is recommended to use ~ before relying on the version number of the package in package.json in your project. For example, "@opentiny/vue": "~3.12.0.


@opentiny/vue supports multiple modes. If your project is not a mobile project, you can declare the value of TINY_MODE in process.env in the above configuration code. In order to make the project during construction, the mobile side code can be shaken off and the volume of the packaged product can be optimized. For example, 'process.env': {... env,TINY_MODE:'pc'}.

Import through CDN

In order to experience TinyVue components faster, you can also import TinyVue directly into the HTML page through CDN,you are advised to write two valid version numbers as follows.

<head>
  <!-- Import vue and @opentiny/vue -->
  <script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3.3/dist/vue.esm-browser.js",
        "@opentiny/vue": "https://unpkg.com/@opentiny/vue@3.12/runtime/tiny-vue.mjs",
        "@opentiny/vue-common": "https://unpkg.com/@opentiny/vue@3.12/runtime/tiny-vue-common.mjs",
        "@opentiny/vue-icon": "https://unpkg.com/@opentiny/vue@3.12/runtime/tiny-vue-icon.mjs",
        "@opentiny/vue-locale": "https://unpkg.com/@opentiny/vue@3.12/runtime/tiny-vue-locale.mjs"
      }
    }
  </script>
  <!-- Import @opentiny/vue style -->
  <link rel="stylesheet" href="https://unpkg.com/@opentiny/vue-theme/index.css" />
</head>

Then you can import TinyVue and register the TinyVue plug-in globally through the use method of the app instance, so that TinyVue components can be used in the template template.

<body>
  <div id="app"></div>
  <script type="module">
    import { createApp } from 'vue'
    // Import @opentiny/vue component
    import TinyVue from '@opentiny/vue'

    createApp({
      template: `
        <tiny-button>TinyVue</tiny-button>
        <tiny-alert description="TinyVue"></tiny-alert>
      `
    })
      // Register @opentiny/vue component
      .use(TinyVue)
      .mount('#app')
  </script>
</body>

Historical Project Upgrade

due toTinyVueof a large number of projects and@opentiny/vue2or@opentiny/vue3The two packages will not be upgraded. For projects that are still being developed or maintained, you are advised to upgrade the latest versions using either of the following methods:

  1. standard upgrade method
  • removepackage.jsonmedium@opentiny/vue2or@opentiny/vue3Once dependent, install the correct@opentiny/vueversion.
  • In the project directory, search for@opentiny/vue2or@opentiny/vue3for the name, replaced with@opentiny/vue.
  • If you use component internationalization, refer toInternationalizationdocument of the, and the key valuezh_CNModified tozhCN, the key valueen_USModified toenUS.
  • Rerun the project and verify the functionality!
  1. Dependent package alias upgrade method
  • removepackage.jsonmedium@opentiny/vue2or@opentiny/vue3Once dependent, install the correct@opentiny/vueVersion
  • In theViteengineeringvite.config.jsIn, add the following code highlighted section:
export default defineConfig({
  //......
  resolve: {
    alias: {
      "@opentiny/vue2": "@opentiny/vue"
    }
  }
}）
  • If you use component internationalization, refer toInternationalizationdocument of the, and the key valuezh_CNModified tozhCN, the key valueen_USModified toenUS.
  • Rerun the project and verify the functionality!

If you encounter other difficulties in project upgrade, you can create a new issue on github to provide feedback (https://github.com/opentiny/tiny-vue/issues)