Web Front-end
JS Tutorial
Explain the new features of vue-cli 3.0 in detail (detailed tutorial)
Explain the new features of vue-cli 3.0 in detail (detailed tutorial)
vue-cli is a build tool launched by the vue official team for rapid development of vue projects. It can be used out of the box and provides simple custom configuration and other functions. This article mainly introduces how to quickly understand the new features of vue-cli 3.0. Friends who need it can refer to
vue-cli is a construction tool launched by the official vue team to quickly develop vue projects. It has out-of-the-box capabilities. Use and provide simple custom configuration and other functions. There are too many new things to say about the upgrade of vue-cli from 2.0 to 3.0, but it is impossible to list all the contents in this article. This article serves as a guide to compare the 2.0 upgrade functions, allowing you to quickly understand the content of the 3.0 update. .
1. Create project:
Changes in the create project command.
vue create my-project
Version 3.0 includes default preset configurations and user-defined configurations.
Custom function configuration includes the following functions:
TypeScript
- ##Progressive Web App (PWA) Support
- Router ##Vuex
- ##CSS Pre-processors
- Linter / Formatter
- Unit Testing
- E2E Testing
- You can notice that version 3.0 is directly new Added TypeScript and PWA support.
##LESS
Stylus
And the choice of eslint specification:
ESLint with error prevention only
ESLint Airbnb config
ESLint Standard config
ESLint Prettier
Finally select the storage location for custom configurations such as Babel, PostCSS, ESLint, etc.:
- In package.json
- After selecting, you can store the above configuration as the default value, and other projects created through vue-cli in the future will use the just configuration.
We compared and found that the default project directory of vue-cli 3.0 is much simpler than that of 2.0.
Removed the configuration file directory, config and build folders.- The static folder was removed, the public folder was added, and index.html was moved to public.
- Added a views folder in the src folder to classify view components and public components.
3. How to customize the configuration after removing the configuration file directory.
Starting from version 3.0, placing a vue.config.js file in the root directory of the project can configure many aspects of the project. vue.config.js should export an object, for example:
module.exports = {
baseUrl: '/',
outputDir: 'dist',
lintOnSave: true,
compiler: false,
// 调整内部的 webpack 配置。
// 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
chainWebpack: () => {},
configureWebpack: () => {},
// 配置 webpack-dev-server 行为。
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
// 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
proxy: null, // string | Object
before: app => {}
}
....
}vue The
configureWebpackoption in .config.js
provides an object that will bewebpack-merge merged into the final webpack configuration. Sample code: configure webpack to add a plug-in.
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
new MyAwesomeWebpackPlugin()
]
}
}webpack-chain
API and read some source code to understand the full trade-offs of this option Configuration items, but it gives you a more flexible and safer way than directly modifying the values in the webpack configuration. // vue.config.jsmodule.exports = { chainWebpack: config => { config
.tap (ARGS = & GT; {
Return [/ * New ARGS to Pass to HTML-WEBPACK-PLugin's Constructor */]
}
}
注意: When we change a webpack During configuration, you can output the complete configuration list through vue inspect > output.js. Note that it does not output a valid webpack configuration file, but a serialized format for review.
View more details
4. ESLint, Babel, browserslist related configuration:
Babel can be passed through .babelrc or The babel field in package.json is configured. ESLint can be configured through the eslintConfig field in the .eslintrc or package.json file. You may have noticed that the browserslist field in package.json specifies the target browser support range of the project.
5. Regarding adjustments to the public directory.
vue 约定 public/index.html 作为入口模板会通过 html-webpack-plugin 插件处理。在构建过程中，资源链接将会自动注入其中。除此之外，vue-cli 也自动注入资源提示( preload/prefetch ), 在启用 PWA 插件时注入 manifest/icon 链接, 并且引入(inlines) webpack runtime / chunk manifest 清单已获得最佳性能。
在 JavaScript 或者 SCSS 中通过 相对路径 引用的资源会经过 webpack 处理。放置在 public 文件的资源可以通过绝对路径引用，这些资源将会被复制，而不经过 webpack 处理。
小提示：图片最好使用相对路径经过 webpack 处理，这样可以避免很多因为修改网站根目录导致的图片404问题。
六. 新增功能：
1. 对 TypeScript 的支持。
在 3.0 版本中，选择启用 TypeScript 语法后，vue 组件的书写格式有特定的规范。
示例代码：
import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'
const s = Symbol('baz')
@Component
export class MyComponent extends Vue {
@Emit()
addToCount(n: number){ this.count += n }
@Emit('reset')
resetCount(){ this.count = 0 }
@Inject() foo: string
@Inject('bar') bar: string
@Inject(s) baz: string
@Model('change') checked: boolean
@Prop()
propA: number
@Prop({ default: 'default value' })
propB: string
@Prop([String, Boolean])
propC: string | boolean
@Provide() foo = 'foo'
@Provide('bar') baz = 'bar'
@Watch('child')
onChildChanged(val: string, oldVal: string) { }
@Watch('person', { immediate: true, deep: true })
onPersonChanged(val: Person, oldVal: Person) { }
}以上代码相当于
const s = Symbol('baz')
export const MyComponent = Vue.extend({
name: 'MyComponent',
inject: {
foo: 'foo',
bar: 'bar',
[s]: s
},
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean,
propA: Number,
propB: {
type: String,
default: 'default value'
},
propC: [String, Boolean],
},
data () {
return {
foo: 'foo',
baz: 'bar'
}
},
provide () {
return {
foo: this.foo,
bar: this.baz
}
},
methods: {
addToCount(n){
this.count += n
this.$emit("add-to-count", n)
},
resetCount(){
this.count = 0
this.$emit("reset")
},
onChildChanged(val, oldVal) { },
onPersonChanged(val, oldVal) { }
},
watch: {
'child': {
handler: 'onChildChanged',
immediate: false,
deep: false
},
'person': {
handler: 'onPersonChanged',
immediate: true,
deep: true
}
}
})更多详细内容请关注 这里 ；
2. 对 PWA 的支持。
当我们选择启用 PWA 功能时，在打包生成的代码时会默认生成 service-worker.js 和 manifest.json 相关文件。如果你不了解 PWA， 点击这里查看 ;
需要注意的是 在 manifest.json 生成的图标信息，可以在 public/img 目录下替换。
默认情况 service-worker 采用的是 precache ，可以通过配置 pwa.workboxPluginMode 自定义缓存策略。详情
配置示例
// Inside vue.config.js
module.exports = {
// ...其它 vue-cli 插件选项...
pwa: {
workboxPluginMode: 'InjectManifest',
workboxOptions: {
// swSrc 中 InjectManifest 模式下是必填的。
swSrc: 'dev/sw.js',
// ...其它 Workbox 选项...
},
},
};总结：
vue-cli 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在编写你的应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在angularjs中使用select 赋值 ng-options配置方法该怎么做？
在AngularJS中使用select加载数据选中默认值的方法该怎么处理？
The above is the detailed content of Explain the new features of vue-cli 3.0 in detail (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to display file suffix under Win11 system? Detailed interpretation
Mar 09, 2024 am 08:24 AM
How to display file suffix under Win11 system? Detailed explanation: In the Windows 11 operating system, the file suffix refers to the dot after the file name and the characters after it, which is used to indicate the type of file. By default, the Windows 11 system hides the suffix of the file, so that you can only see the name of the file in the file explorer but cannot intuitively understand the file type. However, for some users, displaying file suffixes is necessary because it helps them better identify file types and perform related operations.
Introduction to the differences between win7 home version and win7 ultimate version
Jul 12, 2023 pm 08:41 PM
Everyone knows that there are many versions of win7 system, such as win7 ultimate version, win7 professional version, win7 home version, etc. Many users are entangled between the home version and the ultimate version, and don’t know which version to choose, so today I will Let me tell you about the differences between Win7 Family Meal and Win7 Ultimate. Let’s take a look. 1. Experience Different Home Basic Edition makes your daily operations faster and simpler, and allows you to access your most frequently used programs and documents faster and more conveniently. Home Premium gives you the best entertainment experience, making it easy to enjoy and share your favorite TV shows, photos, videos, and music. The Ultimate Edition integrates all the functions of each edition and has all the entertainment functions and professional features of Windows 7 Home Premium.
In which folder is the cookie data on your computer located? Detailed interpretation
Jan 19, 2024 am 10:19 AM
With the continuous development of the Internet, people are increasingly inseparable from browsers. In browsers, everyone will use cookies more or less. However, many people don’t know which folder the cookie data is in. Let’s explain it in detail today. First, we need to understand what cookies are. Simply put, a cookie is a piece of text information stored by the browser, which is used to save some of the user's personal settings in the browser or record the user's historical operations, etc. When the user opens the same website again, c
Master the key concepts of Spring MVC: Understand these important features
Dec 29, 2023 am 09:14 AM
Understand the key features of SpringMVC: To master these important concepts, specific code examples are required. SpringMVC is a Java-based web application development framework that helps developers build flexible and scalable structures through the Model-View-Controller (MVC) architectural pattern. web application. Understanding and mastering the key features of SpringMVC will enable us to develop and manage our web applications more efficiently. This article will introduce some important concepts of SpringMVC
Are there any class-like object-oriented features in Golang?
Mar 19, 2024 pm 02:51 PM
There is no concept of a class in the traditional sense in Golang (Go language), but it provides a data type called a structure, through which object-oriented features similar to classes can be achieved. In this article, we'll explain how to use structures to implement object-oriented features and provide concrete code examples. Definition and use of structures First, let's take a look at the definition and use of structures. In Golang, structures can be defined through the type keyword and then used where needed. Structures can contain attributes
Choose the applicable Go version, based on needs and features
Jan 20, 2024 am 09:28 AM
With the rapid development of the Internet, programming languages are constantly evolving and updating. Among them, Go language, as an open source programming language, has attracted much attention in recent years. The Go language is designed to be simple, efficient, safe, and easy to develop and deploy. It has the characteristics of high concurrency, fast compilation and memory safety, making it widely used in fields such as web development, cloud computing and big data. However, there are currently different versions of the Go language available. When choosing a suitable Go language version, we need to consider both requirements and features. head
What is Linux Bashrc? Detailed interpretation
Mar 20, 2024 pm 09:18 PM
LinuxBashrc is a configuration file in the Linux system, used to set the user's Bash (BourneAgainShell) environment. The Bashrc file stores information such as environment variables and startup scripts required for user login, and can customize the user's Shell environment. In the Linux system, each user has a corresponding Bashrc file, which is located in a hidden folder in the user's home directory. The main functions of the Bashrc file are as follows: setting up the environment
What is Crypto GPT? Why is 3EX's Crypto GPT a new entrance to the currency circle?
Jul 16, 2024 pm 04:51 PM
What is CryptoGPT? Why is 3EX’s CryptoGPT said to be a new entrance to the currency circle? According to news on July 5, 3EXAI trading platform officially launched CryptoGPT, an innovative project based on AI technology and big data, aiming to provide comprehensive and intelligent information query and AI investment advice to global crypto investors. CryptoGPT has included the top 200 coins in CoinMarketCap and hundreds of high-quality project party information, and plans to continue to expand. Through CryptoGPT, users can obtain detailed transaction consulting reports and AI investment advice for free, realizing a full-stack closed loop from information consulting services to intelligent strategy creation and automatic execution of transactions. Currently, the service is free. Needed
