Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

What are the differences between the way vue-cli@3.0 is used and the previous version

2025-01-24 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

This article mainly shows you "what are the differences between the use of vue-cli@3.0 and the previous version", the content is simple and clear, and I hope it can help you solve your doubts. Let the editor lead you to study and learn the difference between the use of vue-cli@3.0 and the previous version of this article.

Vue-cli3.0 will be available on August 10, 2018.

Use of @ 2.9.3

1. Download vue-cli and setup project

Cnpm I-g vue-cli#2.9.3

Vue init webpack my-app

@ 3.0 or above, the current use of beta version

1. Download vue-cli and setup project

Npm install-g @ vue/cli

Vue create / / file name does not support hump (with uppercase letters)

If you have installed an older version of vue-cli globally (1.x or 2.x), uninstall it first, otherwise skip this step:

Npm uninstall vue-cli-g / / or yarn global remove vue-cli

Vue CLI 3.0 is completely different from other versions in that it goes through refactoring to:

1. Minimize the configuration annoyance of modern front-end tools, especially when developers mix multiple tools

two。 Add best practices to the toolchain whenever possible and make it the default practice for Vue applications.

The core goal of Vue CLI is to provide settings for pre-configured builds built on webpack 4, and the goal is to minimize the number of developer configurations, so Vue CLI 3 supports out-of-the-box support for projects with the following characteristics:

Pre-configured webpack features, such as module hot replacement, code splitting, tree shaking optimization (tree-shaking), efficient persistence cache, etc.

Transform ES2017 and inject polyfill based on usage through Babel 7 + preset-env (Babel plug-in)

Support for PostCSS (autoprefixer enabled by default) and all major CSS preprocessors

Modern mode: release native ES2017 + bundle and traditional bundle in parallel

Multi-page mode: building applications with multiple HTML / JS entry points

Build goal: build Vue single-file components into libraries or native Web components (details are as follows)

You can mix and choose multiple integrations when creating a new project:

TypeScript

PWA

Vue Router & Vuex

ESLint / TSLint / Prettier

Unit testing with Jest or Mocha

Use Cypress or Nightwatch for E2E test

Vue-cli3 does not automatically create a vue.config.js when it is created, because this is optional, so it is usually necessary to create a vue.config.js when you need to modify the webpack.

Then, because webpack is highly integrated within vue-cli3, generally speaking, users no longer need to know what weboack does, so the configuration file of webpack is not exposed, but you can still create vue.config.js to modify the default webpack.

* there are only two options at first: default (default configuration) and Manually select features (manual configuration)

Only babel and eslint have to be configured separately by default, so we choose the second manual configuration.

After each selection of manual configuration, you will be asked if you want to save the configuration, that is, the koro option in the image, so that we only need to use the original configuration instead of configuration when we create the project in the future. *

Vue CLI 3 also comes with a complete GUI

You can create a new project, and you can manage plug-ins and tasks in the project, which doesn't need Electron, just starts it with vue ui.

Vue.config.js

Vue-cli upgrade to 3, reduced a lot of configuration files, before all the configuration files are built in vue create preset preset or later can be configured through command parameters, vue.config.js, all configuration items are condensed into the vue.config.js file, so it is important to understand and use vue.config.js files.

Create a new vue.config.js self-configuration under the root directory as needed. Eg: (simple configuration. For more configuration details, please see the official website: https://cli.vuejs.org/zh/config/)

Module.exports = {baseUrl:'/', / / the root path when the application is deployed (default'/'), or relative path (with usage restrictions) outputDir: 'directory of the production environment build files generated by dist',// runtime (default' 'dist'') AssetsDir:'', / / places the directory (relative to outputDir) of the generated static resources (s, css, img, fonts) (default') indexPath: 'index.html',// specifies that the output path of the generated index.html (relative to outputDir) can also be an absolute path. Pages: {/ / the path and file name configured in pages must exist in your document directory, or the startup service will report an error index: {/ / optional entry: 'src/index/main.js',// page entry except entry. Each "page" should have a corresponding JavaScript entry file template:' public/index.html',// template source filename: 'index.html'. / / in the output of dist/index.html title: 'Index Page',// when using the title option, use in template: chunks: [' chunk-vendors', 'chunk-common',' index'] / / blocks contained on this page By default, it contains the extracted generic chunk and vendor chunk}, subpage: 'src/subpage/main.js'// official explanation: when using an entry-only string format, the template will be deduced as' public/subpage.html', if it cannot be found, fall back to 'public/index.html',' the output file name will be deduced as' subpage.html'}, and lintOnSave: true,// whether to check productionSourceMap: true when saving / / whether the production environment generates sourceMap files css: {extract: true,// whether to use the css separation plug-in ExtractTextPlugin sourceMap: false,// to enable CSS source maps loaderOptions: {}, / / css preset configuration item modules: false// to enable CSS modules for all css / pre-processor files. }, devServer: {/ / Environment configuration host: 'localhost', port: 8080, https: false, hotOnly: false, open: true, / / configure automatic launch browser proxy: {/ / configure multiple agents (configure a proxy:' http://localhost:4000')'/ api': {target:', ws: true ChangeOrigin: true},'/ foo': {target:'}}, pluginOptions: {/ / third-party plug-in configuration / /.}}

Hot update configuration

Add in vue.config.js

ChainWebpack: config = > {

/ / repair HMR

Config.resolve.symlinks (true)

}

Modify the css part of the hot update also need to comment out / / extract: true

Css: {

/ / extract: whether true,// uses css to separate the plug-in ExtractTextPlugin

SourceMap: false,// enables CSS source maps

LoaderOptions: {}, / / css preset configuration item

Modules: false// enables CSS modules for all css / pre-processor files.

}

Css preprocessor

Mainly solve the problems of browser compatibility and simplification of CSS code for css

In this way, the hot update configuration is complete

Problems in creating a project directory

Vue create my-app error: write after end solution. Reduced the version of npm to @ 5.6.0. It seems that there is something wrong with the previous npm version 6.1.0.

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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report