Architecture reference Element-UI

tsconfig.json

  • Typescript project configuration files
  • After TSC is executed on the command line, the TS in the project is compiled to JS based on the configuration file
options type The default value describe
--declaration -d boolean false Generate corresponding.d.tsFile.
--declarationDir string Generate the output path of the declaration file.
--sourceMap boolean false Generate corresponding.mapFile.

vue.shim.d.ts

/** * vue. Shim.d.ts is used to define typescript files because. Vue files are not a normal file type. * You can delete this section, and you will find that all vUE files that import will report errors. * * /
declare module '*.vue' {
    import { App, defineComponent } from 'vue'
    const component: ReturnType<typeof defineComponent> & {
        install(app: App) : void
    }
    export default component
}
Copy the code

Package. The json configuration vue

"peerDependencies": {
    "vue": "^ 3.0.9"
  },
Copy the code
  • peerDependenciesPeerDependencies (NPM) is used to install packages that match the dependencies specified in peerDependencies. The NPM is used to import and require packages that match the dependencies specified in peerDependencies.
  • In plain English: If the component library project has a VUE installed, the business project project also has a VUE installed; When the code runs, the component library and the business item are not calling the same VUE, causing parameter passing to fail.

The webpack configuration file configures the babel-loader to handle TS and ES6

            {
                    test: /\.(ts|js)x? $/,
                    exclude: /node_modules/,
                    loader: 'babel-loader'.options: {
                        presets: [
                            '@babel/preset-env'['@babel/preset-typescript',
                                {
                                    allExtensions: true}]}}Copy the code

Component libraries are published to NPM

  1. The. Npmignore file is added to the root directory
  2. Npmignore writes files and folders to be ignored
.vscode
build
node_modules
packages
test
typings
.gitignore
.npmignore
jest.config.js
tsconfig.json
Copy the code
  1. The command line executes NPM publish

Upload the code to Github

  1. The. Gitignore file is added in the root directory
  2. The. Gitignore file contains files and folders that do not need to be uploaded