Project address: gitee.com/Xiaoxiaoxua…

Packaged by myself while fishing at work, the technology was still rudimentary

Directions for use

basis

introduce

The framework is integrated with the Vite build tool and is based on [email protected]

Install dependencies

npm i
Copy the code

or

yarn
Copy the code

Developers are advised to use a single command

The development of running

npm run dev
Copy the code

Default port: 1428

Projects/components in this state can be updated in real time

Preview the run

npm run serve
Copy the code

Default port: 5000

Projects/components in this state cannot be updated in real time (mostly at runtime)

packaging

npm run build
Copy the code

The DIST file is generated within the project after packaging

Within the preset

Internal preset [email protected], [email protected], [email protected], QS, element-plus

Where axios is wrapped separately in.utils \request.js, developers are advised to deal with it according to business requirements

Environment depends on

CSS preprocessor

Sass is built-in by default

Other preprocessors can be installed on the CLI without additional configuration

# .scss and .sass
npm install -D sass

# .less
npm install -D less

# .styl and .stylus
npm install -D stylus
Copy the code

reference

To use it, just set the lang property for style

run

The UI component library

PC: Element-Plus is recommended

Element-plus: A Vue 3.0-based desktop component library for developers, designers, and product managers

npm i -S element-plus
Copy the code

Custom theme colors

Location:. / SRC/styles/variables. SCSS

Follow-up: Element-plus documentation

Mobile: Vant is recommended

vant

#The integration project uses Vue3, so the command is different
npm i -S vant@next
Copy the code

Follow-up operations: Import all, on demand, and on demand in vite

Encapsulate JS tools/methods

request.js

The request object, AXIos, is wrapped separately, with additional configuration based on business requirements

debounce.js

Separate package function anti-shake, internal contains immediately after the implementation of anti-shake, anti-shake after the implementation of two types

throttle.js

Separate encapsulation function throttling, internal contains immediately after throttling, throttling after execution of two types

Vite configuration file

The vite configuration file is in the project’s vite.config.js

The commonly used

Development run port

server => port

export default defineConfig({
  / /...
  server: {
    port: '1428'./ /...}})Copy the code

Start browser by default

server => open

export default defineConfig({
  / /...
  server: {
    open: true./ /...}})Copy the code

Cross-domain request

server => proxy

export default defineConfig({
  / /...
  server: {
    proxy: {
      '^/api': {
        target: 'http://127.0.0.1:3000'.// Back-end address
        changeOrigin: true.rewrite: (path) = > path.replace(/^\/api/.' ')}}/ /...}})Copy the code

The alias of a file system path is specified

resolve => alias

export default defineConfig({
  / /...
  resolve: {
    alias: {
      The '@': path.resolve(__dirname, './src')}},/ /...
})

Copy the code

@ now points to./ SRC

Other Configuration Files

project.config.js

File location: / SRC

Content: Configure back-end addresses in the production environment and online version

.eslintrc.js

File location: project directory

Content: Configure the Standrad style code specification

To disable: Delete or comment line 8 of the file

module.exports = {
  env: {
    browser: true.es2021: true
  },
  extends: [
    'plugin:vue/essential'.'standard'  /* Disable this */],... }Copy the code

Note: This style does not affect project execution

Temporarily not solved

After development run

[@vue/compiler-sfc] <script setup> is still an experimental proposal. Follow its status at https://github.com/vuejs/rfcs/pull/227. [@vue/compiler-sfc] When using experimental features, it is recommended to pin your vue dependencies to exact versions to avoid breakage. [@vue/compiler-sfc] `defineProps` is  a compiler macro and no longer needs to be importedCopy the code

The cause is unknown at present, and further study is required

Updated on August 31, 2021

Updated: 0.0.5

Update log

0.0.5

Usage Description => Environment dependent =>CSS preprocessor Add the internal preprocessor SASS

Usage description => Run Dependencies =>UI Component library =>PC: It is recommended that Element-Plus add custom theme colors

The element-Plus theme configuration has been removed

0.0.4

Usage instructions => Base => Internal presets added UI component library element-plus

Usage instructions add wrapped JS tools/methods and explain internal tools/methods

The problem of adding element-Plus custom themes is not solved yet

0.0.3

Usage description => Vite configuration file added the alias of the configuration file system path

Usage => Add.eslintrc.js to other configuration files

hundreds

Usage description => Basic => Development run Modify the default port number from 3000 to 1428

Usage instructions => Base => Internal presets added QS

Instructions Added the Vite configuration file

Instructions added additional configuration files

0.0.1

Created and wrote every manual imaginable