vue-cli 3.0의 새로운 기능을 자세히 설명하세요(자세한 튜토리얼)

vue-cli는 vue 프로젝트를 빠르게 개발하기 위해 공식 vue 팀에서 출시한 빌드 도구로, 즉시 사용 가능하며 간단한 사용자 정의 구성 및 기타 기능을 제공합니다. 이 글은 vue-cli 3.0의 새로운 기능을 빠르게 이해하는 방법을 주로 소개합니다. 필요한 친구들이 참고하면 됩니다.

vue-cli는 vue 프로젝트를 빠르게 개발하기 위해 출시한 구축 도구입니다. 즉시 사용할 수 있으며 간단한 사용자 정의 구성 및 기타 기능을 제공합니다. vue-cli 2.0에서 3.0으로의 업그레이드에 대해 할 말이 너무 많지만 이 글에 모든 내용을 나열하는 것은 불가능합니다. 3.0 업데이트 내용을 이해하세요.

1. 프로젝트 생성:

프로젝트 생성 명령이 변경되었습니다.

vue create my-project

버전 3.0에는 기본 사전 설정 구성과 사용자 정의 구성이 포함되어 있습니다.

사용자 정의 기능 구성에는 다음 기능이 포함됩니다.

• TypeScript

• 프로그레시브 웹 앱(PWA) 지원

• Router

• Vuex

• CSS 전처리기

• 린터 / Formatter

• Unit Testing

• E2E Testing

버전 3.0에는 TypeScript 및 PWA에 대한 지원이 직접 추가되었음을 알 수 있습니다.

CSS 전처리를 선택한 후 어떤 전처리기를 선택하라는 메시지가 표시됩니다:

• SCSS/SASS

• LESS

• Stylus

및 eslint 사양 선택:

• ESLint 포함 오류 방지 전용

• ESLint + Airbnb config

• ESLint + Standard config

• ESLint + Prettier
  

마지막으로 Babel, PostCSS, ESLint 및 기타 사용자 정의 구성의 저장 위치를 ​​선택하세요.

• 전용 구성 파일에서

• package.json에서

선택 후 위 구성을 기본값으로 저장하면 향후 vue-cli를 통해 생성되는 다른 프로젝트에서도 해당 구성을 채택하게 됩니다.

2. 프로젝트 디렉토리 구조 변경:

vue-cli 3.0의 기본 프로젝트 디렉토리가 2.0보다 훨씬 간단하다는 것을 확인했습니다.

• 구성 파일 디렉터리, 구성 및 빌드 폴더를 제거했습니다.

• 정적 폴더가 제거되고 공용 폴더가 추가되었으며 index.html이 공용으로 이동되었습니다.

• 뷰 구성 요소와 공용 구성 요소를 분류하기 위해 src 폴더에 views 폴더를 추가했습니다.

  
  

3. 구성 파일 디렉터리를 제거한 후 구성을 사용자 정의하는 방법.

버전 3.0부터 vue.config.js 파일을 프로젝트의 루트 디렉터리에 배치하면 프로젝트의 여러 측면을 구성할 수 있습니다.

vue.config.js는 객체를 내보내야 합니다. 예:

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.config.js 의 configureWebpack 입니다. > code> 옵션은 최종 webpack 구성에 webpack-merge 병합될 개체를 제공합니다.

vue.config.js 中的 configureWebpack 选项提供一个对象，该对象将会被 webpack-merge 合并入最终的 webpack 配置。

示例代码：配置 webpack 新增一个插件。

// vue.config.js
module.exports = {
 configureWebpack: {
  plugins: [
   new MyAwesomeWebpackPlugin()
  ]
 }
}

修改插件选项的参数你需要熟悉 webpack-chain 샘플 코드: 플러그인을 추가하도록 webpack을 구성합니다.

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) { }
}

플러그인 옵션의 매개변수 수정하기 이 옵션의 전체 구성을 평가하는 방법을 이해하려면 webpack-chain API에 익숙하고 일부 소스 코드를 읽어야 하지만, 이는 직접적인 수정 이상의 것을 제공합니다. 웹팩 구성에서 값을 사용하는 보다 유연하고 안전한 방법입니다.

// vue.config.js
module.exports = {
chainWebpack: config => {
config
.plugin('html')

.tap(args => {

        return [/* new args to html-webpack-plugin의 생성자 */]

})

}}참고: 웹팩 구성을 변경할 때 vue Inspection >를 통해 전체 구성 목록을 출력할 수 있습니다. 유효한 웹팩 구성 파일이 아니라 검토를 위해 직렬화된 형식입니다. 자세히 보기

4. ESLint, Babel, browserslist 관련 구성:

Babel은 .babelrc 또는 package.json의 babel 필드를 통해 구성할 수 있습니다. ESLint는 .eslintrc 또는 package.json 파일의 eslintConfig 필드를 통해 구성할 수 있습니다. package.json의 browserslist 필드가 프로젝트의 대상 브라우저 지원 범위를 지정한다는 것을 눈치채셨을 것입니다.

🎜🎜🎜5. 공개 디렉토리 조정에 관해. 🎜🎜🎜

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加载数据选中默认值的方法该怎么处理？

怎样在vue中使用ts（详细教程）

위 내용은 vue-cli 3.0의 새로운 기능을 자세히 설명하세요(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!