The original address

Release record

Current version: 3.0.0-RC.6 (😁 check it out)

Release records can be found on Github

Vue DevTools (🛠 Development AIDS)

Current version: v6.0.0-beta1 😀

Vue Devtools for Vue 3 requires at least Vue @^ 3.0.0-RC. 1 The appropriate Vue 3 version of the development tool is at least Vue @^ 3.0.0-rC1

When using Vue, we recommend also installing the Vue Devtools in your browser, allowing you to inspect and debug your Vue applications in a more user-friendly interface. When using Vue, it is recommended to install development tools in the browser – better (user friendly interface..) Helps you check and debug Vue applications

  • Chrome Extension
  • Firefox Addon
  • Lonely Electron application

CDN

For prototyping or learning purposes, you can use the latest version with prototyping.

<script src="https://unpkg.com/vue@next"></script>
Copy the code

For production, we recommend linking to a specific version number and build to avoid unexpected breakage from newer versions. For production use. Suggestion 1. Connect to the specified version. 2. Build/package to prevent accidental upgrades from introducing bugs. I don’t think anyone does that.

Ps. If someone does do this, or if they don’t know what prototyping/prototyping is Contact me 🥶.

NPM

NPM is the recommended installation method when building large scale applications with Vue. It pairs nicely with module bundlers such as Webpack or Browserify. Vue also provides accompanying tools for authoring Single File Components. NPM is ** recommended when building large applications with Vue (EMMM). Do you want to do this when you’re studying? 🤔). Because: 1. And Webpack,Browserify these modules package machine (no emote bar..). Perfect match; 2. Vue has some tools for writing a Single File Component

Ps. What is the corresponding tool, EMMM? Good question. I also don’t know, you contact me to try, may contact me when I know 🥶)

# latest stable$NPM install install vue@nextCopy the code

CLI (whether produced a question again, how to explain this, go to know hu see, someone scold you 👀)

Vue provides an official CLI for quickly scaffolding ambitious Single Page Applications. It provides batteries-included build setups for a modern frontend workflow. It takes only a few minutes to get up and running with hot-reload, lint-on-save, See the Vue CLI docs for more details. Vue provides the official CLI — to quickly build the EMM outline/scaffolding/skeleton of a grand single page application.

  • Provides a complete build setup for modern front-end workflows
  • It took a few minutes to put it up. YesThermal loading.lint-on-save(code specification verification) and (with release production requirements) build projects

Okay, more details here.

(Ps. Batteries included… Don’t ask me… So let’s look here, emM or here. Out of the box. Tools are good.)

TIP

The CLI assumes prior knowledge of Node.js and the associated build tools. If you are new to Vue or front-end build tools, we strongly suggest going through the guide without any build tools before using the CLI. Remind 💁🏿♂️ that the command-line interface assumes you have the basics: Node.js and related packaging tools. If you’re vue or any front-end build tools are not ripe (don’t know the node | | don’t know packaging tools) = = true, it is strongly recommended that don’t rush to use the CLI, first with the tools of packaging (not) over the guidelines

For Vue 3, you should use Vue CLI v4.5 available on npm as @vue/cli@next. To upgrade, you need to reinstall the latest version of @vue/cli globally:

For Vue3, you should use Vue CLI v4.5 — it’s already available on NPM — @vue/cli@next.

If you upgrade, you should

  1. Re-install the latest version globally:

    yarn global add @vue/cli@next
# OR
npm install -g @vue/cli@next
Copy the code

  2. Then in the Vue project, run:

    vue upgrade --next
Copy the code

Vite (come come come he come, put Webpack out of work he come)

Vite is a web development build tool that allows for lighting fast serving of code due its native ES Module import approach.

Vue projects can quickly be set up with Vite by running the following commands in your terminal.

Vite is a Web development packaging tool. Able to serve code lightly and quickly. The reason is that its native ES module introduction (rollup?? That’s bullshit…) .

Vue projects can be easily put together from Vite by entering the following commands in the terminal:

  • NPM

    npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
Copy the code

  • YARN

    yarn create vite-app <project-name>
cd <project-name>
yarn
yarn dev
Copy the code

explain— Why are there different types of package/build

In the dist/ directory of the NPM package you will find many different builds of Vue.js. Here is an overview of which dist file should be used depending on the use-case

In the dist/directory of the NPM package] (https://cdn.jsdelivr.net/npm/[email protected]/dist/) (connection will be… 😀), there are many package generation files. Take a look at the context in which the documents in DIST are used.

From CDN or without a Bundler/webpack… And so on

vue(.runtime).global(.prod).js:

  • For direct use via

  • Used directly, in the browser directly through the

  • In-browser template compilation:

  • Browser side template compilation? :

  • vue.global.js is the “full” build that includes both the compiler and the runtime so it supports compiling templates on the fly.

  • Vue.global.js is fully packaged — including the compiler and the runtime, so it supports directly compiling the template/ template. Just imagine an airplane changing engines in the sky.

  • vue.runtime.global.js contains only the runtime and requires templates to be pre-compiled during a build step

  • Vue.runtime.global.js only contains the runtime system/runtime environment (The Runtime), so the template is precompiled through a packaging process.

  • Inlines all Vue core internal packages – i.e. it’s a single file with no dependencies on other files. This means you must import everything from this file and this file only to ensure you are getting the same instance of code.

  • This file vue(.runtime.global (.prod).js) inlines all of vue’s internal core packages — that is, it is a single file and does not depend on other files. That is, you have to import everything from this file; This file also only ensures that you get the same ins of code (to be honest, this is a bit confusing). You must import everything from this file. I don’t know if must refers to everything or this file. It means that this is a whole package, and dependencies are all internal, so you can’t import an object by itself.

  • Contains hard-coded prod/dev branches, and the prod build is pre-minified. Use the *.prod.js files for production.

  • Includes the hardcoded prod/dev branch, and the prod package is pre-compressed. Use *.prod.js in the production environment.

Hardcoding also refers to developing the core engine of the system responsible for low-level tasks and executing executing executing scripts. Regardless of what hard coding used to mean, it now also refers to the core engine that develops a system for handling low-level tasks and executing scripts — think of it as a kernel directive

Note to remind

Global builds are not UMD builds. They are built as IIFEs and are only meant for direct use via

vue(.runtime).esm-browser(.prod).js:

  • For usage via native ES modules imports (in browser via <script type="module">.
  • Import via the native ES module (browser environment through<script type="module">The label)
  • Shares the same runtime compilation, dependency inlining and hard-coded prod/dev behavior with the global build.
  • All have the same Runtime compilation, dependency Inlining, and hard-coded Prod /dev behavior.

With a Bundler

vue(.runtime).esm-bundler.js:

  • For use with bundlers like webpack, rollup and parcel.
  • Webpack, rollup and parcel…
  • Leaves prod/dev branches with process.env.NODE_ENV guards (must be replaced by bundler)
  • Hand over the prod/dev branchprocess.env.NODE_ENVTo manage (so must be replaced by a packer?This part is a little confusing)
  • Does not ship minified builds (to be done together with the rest of the code after bundling)
  • No zip package provided (compressed with packaged code)
  • Imports dependencies (e.g. @vue/runtime-core, @vue/runtime-compiler)
  • Introducing dependencies (i.e.,@vue/runtime-core, @vue/runtime-compiler)
    • Imported dependencies are also esm-bundler builds and will in turn import their dependencies (e.g. @vue/runtime-core imports @vue/reactivity)
    • So are the introduced dependency packagesesm-bundlerPackage, so it also introduces their respective dependencies at once (for example,@vue/ Run-time core introduces @vue/reactivity).
    • This means you can install/import these deps individually without ending up with different instances of these dependencies, but you must make sure they all resolve to the same version.
    • This means that you can install/import these dependencies separately without causing different instances of these dependencies. However, you need to ensure that these all-dependent packages resolve to the same version.
  • In-browser template compilation
  • Browser side template compilation:
    • vue.runtime.esm-bundler.jsis runtime only, and requires all templates to be pre-compiled. This is the default entry for bundlers (via module field in package.json) because when using a bundler templates are typically pre-compiled (e.g. in *.vue files).
    • vue.runtime.esm-bundler.js(default), only runtime/runtime environment (Runtime). All templates are required to be precompiled. This is the default entry for the package.json (module field in package.json), because templates are usually precompiled when using packagers (for example, in.vue files).
    • vue.esm-bundler.js:includes the runtime compiler. Use this if you are using a bundler but still want runtime template compilation (e.g. in-DOM templates or templates via inline JavaScript strings). You will need to configure your bundler to alias vue to this file.
    • vue.esm-bundler.js: includes the runtime compiler. Use this wrapper, but you still want to compile from a template (such as the in-dom template, or the template via inline JS strings). You need to configure Bunder to give Vue an alias in this file.

For Server Side Rendering SSR Server Rendering

vue.cjs(.prod).js:

  • For use in Node.js server-side rendering via require()
  • throughrequire()Use Node.js for server-side rendering.
  • If you bundle your app with webpack with target: ‘node’ and properly externalize vue, this is the build that will be loaded.
  • If you’re packing your app, there’s webpacktarget:'node', and externalizes vue correctly. This is the file that will load correctly
  • The dev/prod files are pre-built, but the appropriate file is automatically required based on process.env.NODE_ENV
  • Pro/Prod files are pre-packaged. And then as far as choosing which is throughprocess.env.NODE_ENVTo automatically select.

The Runtime (Runtime)+ Compilers vs. RuntimeOnly

Ps. If you have any doubts about what run-time is, please contact me at 🥶… I’ll tell you.

If you need to compile templates on the client (e.g. passing a string to the template option, or mounting to an element using its in-DOM HTML as the template), you will need the compiler and thus the full build:

If you need to compile the template on the client side (pass a string to the template option; To use an element’s in-DOM HTML as a template to mount to the element, you need the compiler to add a full package:

    // this requires the compiler
    Vue.createApp({
      template: '<div>{{ hi }}</div>'
    })
    
    // this does not
    Vue.createApp({
      render() {
        return Vue.h('div', {}, this.hi)
      }
    })
Copy the code

When using vue-loader, Templates inside *. Vue files are pre-compiled into JavaScript at build time. You don’t really need the compiler in the final bundle, and can therefore use the runtime-only build.

When using vue-loader, templates in the *. Vue file are precompiled into JS at package time. You really don’t need a compiler for final packaging. So you can use packages into runtime.