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

Editor to share with you the example analysis of vue-cli3.0 features, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

New project

# install npm install-g @ vue/cli# New Project vue create my-project# Project launch npm run serve# Packaging npm run build

The packaged file has the best performance by injecting preloaded (preload/prefetch) reference resources, injecting manifest/icon links when the PWA plug-in is enabled, and introducing (inlines) the webpack runtime / chunk manifest manifest.

Function configuration

Function selection

Version 3.0 includes default preset configuration and user-defined configuration. After user-defined configuration, you will be asked whether to save the current configuration function as the default values for future project configuration, so that you can use it directly next time and do not need to configure it again.

Custom feature configurations include the following features:

TypeScript

Progressive Web App (PWA) Support

Router

Vuex

CSS Pre-processors

Linter / Formatter

Unit Testing

E2E Testing

You can configure different functions according to project size and functional experience, select / reverse select by spacebar, select all / deselect by a key, reverse selected items by pressing I key, and move up and down keys to select.

Function details configuration

After selecting a feature, you will be asked for more detailed configuration

TypeScript:

Do you use class-style component syntax: Use class-style component syntax?

Do you want to use babel for escape: Use Babel alongside TypeScript for auto-detected polyfills?

CSS Pre-processors:

Select CSS preprocessing type: Pick a CSS pre-processor

Linter / Formatter

Select the Linter / Formatter specification type: Pick a linter / formatter config

Select lint method and check when saving / submitting: Pick additional lint features

Testing

Select the Unit test method

Select the E2E test method

Select the storage location of Babel, PostCSS, ESLint and other custom configurations: Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?.

Vue.config.js Custom configuration

Full default configuration of vue.config.js

Module.exports = {/ / basic path baseUrl:'/', / / output file directory outputDir: 'dist', / / eslint-loader check lintOnSave: true, / / use the full build with in-browser compiler? / / https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only compiler: false when saving / / webpack configuration / / see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md chainWebpack: () = > {}, configureWebpack: () = > {}, / / vue-loader configuration item / / https://vue-loader.vuejs.org/en/options.html vueLoader: {}, / / whether the production environment generates sourceMap files productionSourceMap: true / / css related configuration css: {/ / do you want to use the css separation plug-in ExtractTextPlugin extract: true, / / enable CSS source maps? SourceMap: false, / / css preset configuration item loaderOptions: {}, / / enable CSS modules for all css / pre-processor files. Modules: false}, / / use thread-loader for babel & TS in production build / / enabled by default if the machine has more than 1 cores parallel: require ('os'). Cpus () .length > 1, / / whether to enable dll / / See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode dll: false / / PWA plug-in related configuration / / see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa pwa: {}, / / webpack-dev-server related configuration devServer: {open: process.platform = = 'darwin', host:' 0.0.0.0, port: 8080, https: false, hotOnly: false, proxy: null, / / set proxy before: app = > {}} / / third-party plug-in configuration pluginOptions: {/ /...}}

Set up proxy

# stringmodule.exports = {devServer: {proxy:'}} # Objectmodule.exports = {devServer: {proxy: {'/ api': {target:', ws: true, changeOrigin: true},'/ foo': {target:'}

Enable dll

When dll is enabled, the [chunkhash] value of the vendor generated by each package of our dynamic library file will be the same, either true/false or a specific code base.

Module.exports = {dll: true} module.exports = {dll: ['dep-a',' dep-b/some/nested/file.js']}

Static resource path

Relative path

The static resource path starts with @ to represent / src

The static resource path begins with ~, and resources in the node modules can be introduced.

Static resource references in the public folder

# referencing static resources in public/index.html # vue templates, you need to define baseUrl in data

Data () {return {baseUrl: process.env.BASE_URL}}

Webpack configuration modification

To modify the webpack-related configuration with webpack-chain, it is strongly recommended to be familiar with the webpack-chain and vue-cli source code in order to better understand the configuration items for this option.

Processing configuration for the module

/ / vue.config.jsmodule.exports = {chainWebpack: config = > {config.module .rule ('js') .include .add (/ some-module-to-transpile/) / / modules to be processed}}

Modify webpack Loader configuration

/ / vue.config.jsmodule.exports = {chainWebpack: config = > {config.module .rule ('scss') .use (' sass-loader') .tap (options = > merge (options, {includePaths: [path.resolve (_ _ rule, 'node_modules')],})})}

Modify webpack Plugin configuration

/ / vue.config.jsmodule.exports = {chainWebpack: config = > {config .plugin ('html') .tap (args = > {return [/ * new args to pass to html-webpack-plugin's constructor * /]})}}

Eg: small in this project, only a few changes have been made to uglifyjs, and will continue to be added if there are any configuration optimizations at a later stage.

ChainWebpack: config = > {if (process.env.NODE_ENV = 'production') {config .plugin (' uglify') .tap (([options])) > {/ / remove console.log return [Object.assign (options, {uglifyOptions: {compress: {drop_console: true) Pure_funcs: ['console.log']}})}

Setting of global variables

Create the following project in the project root directory:

.env # executes .env.local # in all environments, git will ignored.env. [mode] # only in specific environments ([mode] can be "development", "production" or "test"). Env.[ mode] .local # in specific environments, git will ignored.env.development # only in production environments. Env.production # only in development environments

Configure key-value pairs in the file:

# the key name must start with VUE_APP VUE_APP_SECRET=secret

Access in the project:

Console.log (process.env.VUE_APP_SECRET)

In this way, process.env.VUE_APP_SECRET in the project will be replaced by secret.

Vue-cli 3 is already quite friendly in terms of project performance, private ownership is also very strong, and various configurations are also very considerate. Private presets can be made according to the size and characteristics of the project, which greatly improves the efficiency of pre-project construction.

The above is all the content of the article "sample Analysis of vue-cli3.0 Features". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.