Shulou(Shulou.com)06/02 Report--

What are the development tools of vue? I believe many inexperienced people are at a loss about it. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Vue development tools are: 1, Vue CLI;2, Vue Press;3, Vuex;4, Nuxt;5, Vuetify;6, Quasar;7, Storybook;8, Visual Studio Code;9, WebStorm and so on.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Now, in addition to JavaScript, there are three frameworks, react,vue,angular, which are widely used in the market. It can be said that these three frameworks have greatly changed the position of the front end. Compared with angular, vue also has rich instructions, and they are all typical MVC frameworks. Vue is relatively lightweight.

At present, vue is adopted by many developers, and it is becoming more and more popular, so its ecological environment has become perfect, and the related tools are also very rich, which mainly depends on vue's learning curve and clear design structure and usage documents, which makes it convenient for experienced developers to start with other frameworks.

Vue CLI

In order to facilitate developers to get started quickly, he, like the strange framework, provides scaffolding tools similar to CLI. VueCLI is a set of fully functional tools that can be developed with rapid Vue. Vue standardizes the foundation of tools in the Vue ecology, ensuring that various build tools can connect smoothly based on intelligent default configurations, so that you can focus on writing applications without having to spend a long time worrying about configuration problems. For example, plug-ins such as Babel,TypeScript, ESLint,PostCSS, Jest,Mocha, Nightwatch and Cypress can be easily integrated in the project.

Vue Press

VuePress is a static website generator driven by Vue and a single page application driven by Vue, Vue Router and webpack. In VuePress, you can use Markdown to write documents and then generate web pages. Each page generated by VuePress has a pre-rendered HTML, so it has very good loading performance and search engine optimization. At the same time, once the page is loaded, Vue will take over the content and convert it into a complete single page application. Other pages only need to be loaded when the user browses it.

Vuex

In the development of SPA single-page components, both Vue's vuex and React's React are collectively referred to as the same state management, or global state management. The simple understanding is that after you define a data in state, you can obtain and modify it in any component in your project, and the modification part can get a global response to the change. The core of each Vuex application is that Store,store can be used as a container. Contains most of the states in the application.

Nuxt

Nuxt.js is a lightweight Vue.js-based application framework that can be used to create server-side rendering applications and can also be used as a static site engine to generate static site applications with elegant code structure layering and hot loading.

Vuetify

Vuetify is currently one of the best UI component libraries based on veu. It provides a large number of components based on the Material Design specification, which can meet the needs of any application.

Quasar

Quasar is a MIT-licensed open framework based on Vue, which can help Web developers create responsive websites, PWA builds mobile APP through Apacha Cordova, and multi-platform application Quasar requires developers to write code once, and then deploy to websites, PWA, Mobile APP and Electron App using the same code base. Using state-of-the-art CLI to design applications and provide well-written Quasar Web components are very fast.

Storybook

For the previous paragraph, component technology is already a compulsory course, which is dominated by react and vue, but there is some trouble when developing components, especially common components or third-party components.

Can not well manage components, preview components can not be clear at a glance, nor can it well reflect the different states of a component

Enzyme can be used for automated interaction testing, but manual testing is often required.

When writing a document, you need to write the component preview and the document together, and you need to switch between different states.

So, storbook is to solve these problems, he can build a strong development environment for components, mainly provide the following points

Provide a powerful UI component management page, which can be easily and clearly grouped, managing the different states of multiple components or one component

In addition to automated interactive testing, manual interactive testing can be easily carried out, and component parameters can be changed dynamically to view view changes.

You can export the component preview as a static resource, so you can easily view the component documents and different views corresponding to different parameters, as well as a series of plug-ins, which can better help us to complete the development, test and optimization component work.

The tool uses developers to be independent of the main application components and to show them interactively in an isolated development environment without worrying about the dependencies and requirements of specific applications, making it convenient for developers. Designers and other people participate in the project.

Visual Studio Code

Visual Studio Code ("VS Code") is a cross-platform source code editor for writing modern Web and cloud applications, which is officially announced by Microsoft at the Build developer Conference on April 30th, 2015, which runs on Mac OS X, Windows and Linux. It can be run on the desktop and can be used in Windows,macOS and Linux. It has built-in support for JavaScript,TypeScript and Node.js, as well as a rich ecosystem of other languages (for example, Clipper, Python, and Unity) and runtime extensions (such as. Net and go).

WebStorm

WebStorm is a JavaScript development tool of JetBrains company. It has been praised by the majority of Chinese JS developers as "Web front-end development artifact", "the most powerful HTML5 editor", "the most intelligent JavaScript IDE" and so on. It is homologous with IntelliJ IDEA and inherits the functions of IntelliJ IDEA's powerful JS part.

After reading the above, have you mastered the methods of vue development tools? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.