Vue 3.0

Posted on  by admin

For everyone interested, the Prop decorator will probably go away, as heavily discussed currently in vue-class-component repo (see Link below). As explained in some of these issues, the decorator has to go away to enable type completion for props inside templates of other components using TSX, which I think is an awesome feature.WebStorm already provided this, but in an own fashion, not using TS language servers or open source plugins.

值得注意的Vue3 新特性

Soon we all will be able to leverage this feature, but only if we give up on our loved Prop() decorator. I personally think I can get used to a different Syntax.Anyway I just wanted to point you guys there, as now is the time participate in the discussion. On the other hand, if you really would not like to give up on Prop() at all, I am sure there can be a third-party library like vue-property-decorator which still offers this functionality, but this will prevent property completion in templates.

Have a look at all v8 issues and read carefully through them before jumping into the discussion, plus, be nice to ktsn, the maintainer of vue-class-component:https://github.com/vuejs/vue-class-component/issues?q=is%3Aissue+label%3Av8+-label%3Abug+.

介绍

Over the past few months, we’ve been working really hard on the next generation of Vue CLI, the standard build toolchain for Vue applications. Today we are thrilled to announce the release of Vue CLI 3.0 and all the exciting features that come with it. Vue CLI 3 is a completely different beast from its previous version.

The goal of the rewrite is two-fold:. Reduce configuration fatigue of modern frontend tooling, especially when mixing multiple tools together;.

Building as Web Components

Incorporate best practices in the toolchain as much as possible so it becomes the default for any Vue app. At the core, Vue CLI provides a pre-configured build setup built on top of webpack 4. We aim to minimize the amount of configuration developers have to go through, so any Vue CLI 3 project comes with out-of-the-box support for:.

Pre-configured webpack features such as hot module replacement, code-splitting, tree-shaking, efficient long term caching, error overlays, etc. ES2017 transpilation (plus common proposals like object rest spread and dynamic import) and usage-based polyfills injection via Babel 7 + preset-env. Support for PostCSS (with autoprefixer enabled by default) and all major CSS pre-processors.

Auto-generated HTML with hashed asset links and preload/prefetch resource hints. Modes and cascading environment variables via .env files. Modern mode: ship native ES2017+ bundle and legacy bundle in parallel (details below). Multi-page mode: build an app with multiple HTML/JS entry points. Build targets: build Vue Single-File Components into a library or native web components (details below). In addition, there are many optional integrations that you can mix and match when you create a new project, such as:.

Vue Router & Vuex. ESLint / TSLint / Prettier. Unit Testing via Jest or Mocha. E2E Testing via Cypress or Nightwatch. Most importantly, Vue CLI makes sure all the above features work nicely together so that you don’t have to do the plumbing yourself.

Vue 3的重大改变

All the features listed above work with zero configuration from your part: when you scaffold a project via Vue CLI 3, it installs the Vue CLI runtime service (@vue/cli-service), selected feature plugins, and generates the necessary config files for you. In most cases, you just need to focus on writing the code. However, CLI tools that attempt to abstract away underlying dependencies often strip away the ability to fine-tweak the internal configurations for those dependencies —in order to make such changes, the user typically has to “eject”, i.e.

checking the raw configurations into the project in order to make changes. The downside of this is that once you eject, you are on your own and won’t be able to upgrade to a newer version of the tool in the long run. We acknowledge the importance of being able to get lower-level access to the configs, but we also don’t want to leave ejected users behind, so we’ve figured out a way for you to tweak almost all aspects of the configurations without ejecting.

Overview

For 3rd party integrations like Babel, TypeScript and PostCSS, Vue CLI respects the corresponding configuration files for these tools. For webpack, the user can either leverage webpack-merge to merge simple options into the final config, or precisely target and tweak existing loaders and plugins via webpack-chain. In addition, Vue CLI ships with the vue inspect command to help you inspect the internal webpack configuration.

The best part though, is that you don’t need to eject just to make small tweaks — you can still upgrade the CLI service and plugins to receive fixes and new features.

Conclusion

We want Vue CLI to be a platform the community can built upon, so we designed the new version with a plugin architecture from day one. A Vue CLI 3 plugin can be very powerful: it can inject dependencies and files during the app’s scaffolding phase, and tweak the app’s webpack config or inject additional commands to the CLI service during development. Most of the built-in integrations like TypeScript are implemented as plugins using the same plugin API that is available to all community plugins. If you are interested in writing your own plugin, check out the plugin dev guide. In Vue CLI 3 we no longer have “templates” — instead, you can create your own remote preset to share your selection of plugins and options with other developers.

Modern Mode

So are people really using this in production?

Thanks to the amazing work by Guillaume CHAU, Vue CLI 3 ships with a full-blown GUI that not only can create new projects, but also manage the plugins and tasks inside the projects (yes, it even comes with the fancy webpack dashboard shown below):.

Note: although Vue CLI 3 is released as stable, the UI is still in beta.

Expect a few quirks here and there. It isn’t fun to wait for npm install before you can write any code.

Sometimes we just need that instant access to a working environment to get that spark of inspiration flowing.

With Vue CLI 3’s vue serve command, this is all you need to do to start prototyping with Vue single-file components:.

The prototyping dev server comes with the same setup of a standard app, so you can easily move the prototype*.vue file into a properly scaffolded project’s src folder to continue working on it. With Babel we are able to leverage all the newest language features in ES2015+, but that also means we have to ship transpiled and polyfilled bundles in order to support older browsers.

Breaking it down

These transpiled bundles are often more verbose than the original native ES2015+ code, and also parse and run slower. Given that today a good majority of the modern browsers have decent support for native ES2015+, it is a waste shipping heavier and less efficient code to these browsers just because we have to support older ones.

Vue2.x 项目升级为 Vue3.x项目

Vue CLI offers a “Modern Mode” to help you solve this problem. When building for production with the following command:. Vue CLI will produce two versions of your app: one modern bundle targeting modern browsers that support ES modules, and one legacy bundle targeting older browsers that do not. The cool part though is that there are no special deployment requirements. The generated HTML file automatically employs the techniques discussed in Phillip Walton’s excellent post:. The modern bundle is loaded with