This is the 18th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

VueCLI

  • Features: Based onvue.jsThe complete system for rapid development is called scaffolding
  • role
    • Unify the architectural style of the project
    • Initialize the configuration of project dependencies
    • Provides single-file components
  • Operation mode: Cli tool
  • 🤩 Procedure:Vue create Project name

Review “Front-end engineering”

  • Custom builds: The source code resolves these issues before it becomes live code

Why build?

  • Some code needs to be compiled (css.js) to ensure browser compatibility
    • willLessorSassConverted tocss– > uselessThe plug-in
    • willES6+The new syntax is converted intoES5-> Transform plug-inbabel(Either a single file or an entire directory works.)

  • Some code needs to be compressed (css.js.html, pictures, etc.)
    • The compressed code is smaller, loads faster and saves bandwidth -> usageminifyThe plug-in
  • Some code needs to be formatted and verified to unify the code style

Automated build

  • All possible tasks, according to certain logic, arranged and combined together, and finally through a command to run all tasks
  • npm srciptsHow tasks are performed
    • parallelparallel &
    • serialseries &&
    • Due to the& Parallel executioninwindowsNext does not work, usenpm-run-allPlugin solution ->run-p,run-s

  • npmAllows for thepackage.jsonFile, usescriptsField definition script command
    • Declaration order (package.json)
    / / package. Json file
"scripts": {
  "foo":"node bar.jss"
}
Copy the code
    • Executing commands (command line)
    / / command line
npm run foo
Copy the code

Supplement to review

  • Initialize the project (npm init --yes)
  • Babel(Compile conversion)
    • The installationBabel( npm install -g babel-core babel-cli )
    • Install transcoding rules (npm install -D babel-preset-env )
    • Configure transformation rules (.babelrcFile)
    • innpm scriptsAdd conversion command (babel src -d dist )
    • Execute conversion command
  • ESLint(JS code format verification), different types of code need different tools to check
    • The installationESLint(npm i eslint -g)
    • Initialize the configuration file (eslint --init)
    • checkjsCode format
  • StyleLint:CSSCode format check
    • The installationstyleLint(npm install --global stylelint)
    • Installation inspection Standard (npm i --global stylelint-config-standard)
    • Creating a configuration file (.stylelintrc.json)
    • checkCSSCode style.
      • Single file (stylelint path/filename.css)
      • The entire project (stylelint** / *.css)

What is theCSSPreprocessor?

  • CSSThe preprocessor uses a specialized programming language forCSSAdded some programming features, and then compiled to normalCSSFile for project use
  • Currently more popular:LESS\ SASS
  • LESSIt’s a dynamic style language. HereCSSGives dynamic language features such as variables, inheritance, operations, and functions.

Why use it?

  • The structure is clear and easy to expand
  • Easy to shield browser private syntax differences
  • Multiple inheritance can be easily implemented
  • Fully compatible withcssThe code.LESSOnly in theCSSThe grammar is extended, so the oldCSSCode is also available withLESSThe code compiles together.

installed

  • 🤩 Procedure
    • Enter the project directoryCD project name
    • Start the preview servernpm run serve

Project to joinGitVersion management

  • gitgnoreFile internal contains not togitPush file name
  • Check for presencegitwarehousegit status
  • creategitwarehousegit init

Push the local repository to the remote repository

  • 🤩Git remote add origin
  • 🤩git push -u origin master
    • -uRepresents the default, save to push the address

The directory structure

  • node_modules: third-party package storage directory,npmDownloaded packages are also included
  • public: static resource directory. Internal static resources are simply copied without passing throughwebpack
    • index.html
  • src: Resource Directory
    • assets: Stores resources such as images used in the project
    • components: Component directory
    • router: Routing module directory
    • store: Container module directory
    • services: Stores interface function modules
    • styles: stores global styles
    • utils: Stores the tool module
    • views: Routing page component directory
    • App.vue: root component, which is eventually rendered toindex.htmlIn the#app
    • main.js: Entry file, mountapp
  • .browerslistrc: specifies the target browser range for the project@babel/preset-envandAutoprefixerTo determine the transferjsFeatures andcssThe prefix * *
  • .editorconfig: editor configuration file used to maintain the editor (orIDE) unified code style
  • .eslintrc.js: ESLintThe configuration file
  • .gitignore: GitIgnore configuration files
  • README.md: Documentation
  • babel.config.js: BabelThe configuration file
  • package.json: description file of the third-party package, recording the dependency information of the package
  • package-lock.json: Records the version number of the package installed

Code specification and style guide

  • Standardized code is easier to read, more maintainable, and more conducive to collaborative development
  • Common code standard: Standard

User-defined verification rules

  • .eslintrc.js
    • extends: Load rules for verification
    • rules: User-defined rule Settings
  • The server needs to be restarted to change the configuration file