vue-cli は、vue プロジェクトを迅速に開発するために公式 vue チームによって立ち上げられたビルド ツールで、すぐに使用でき、シンプルなカスタム構成やその他の機能を提供します。この記事では主に vue-cli 3.0 の新機能を素早く理解する方法を紹介します。必要な方は参考にしてください。
vue-cli は、vue プロジェクトを迅速に開発するために vue の公式チームによって立ち上げられた構築ツールです。箱から出してすぐに使用でき、簡単なカスタム構成やその他の機能を提供します。 vue-cli の 2.0 から 3.0 へのアップグレードについては、新たに述べるべきことが多すぎますが、この記事のすべての内容をリストすることは不可能です。この記事は、2.0 のアップグレード機能を比較するためのガイドとして役立ち、すぐに説明できます。 3.0 アップデートの内容を理解します。
1. プロジェクトの作成:
プロジェクト作成コマンドの変更。
vue create my-project
バージョン 3.0 には、デフォルトのプリセット構成とユーザー定義の構成が含まれています。
カスタム機能構成には次の機能が含まれます:
TypeScript
Progressive Web App (PWA) Support
Router
Vuex
CSS プリプロセッサ
リンター /フォーマッタ
単体テスト
E2E テスト
バージョン 3.0 では、TypeScript と PWA のサポートが直接追加されていることがわかります。
CSS 前処理を選択すると、どのプリプロセッサを選択するように求められます:
SCSS/SASS
LESS
Stylus
と eslint 仕様の選択:
専用の設定ファイル内
比較したところ、vue-cli 3.0 のデフォルトのプロジェクト ディレクトリは 2.0 のそれよりもはるかに単純であることがわかりました。
設定ファイルのディレクトリ、config フォルダー、および build フォルダーを削除しました。バージョン 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 </code の <code>configureWebpack です。 > code> オプションは、webpack-merge によって最終的な Webpack 設定にマージされるオブジェクトを提供します。 サンプルコード: プラグインを追加するように webpack を設定します。 vue.config.js 中的 configureWebpack 选项提供一个对象，该对象将会被 webpack-merge 合并入最终的 webpack 配置。
示例代码：配置 webpack 新增一个插件。
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
new MyAwesomeWebpackPlugin()
]
}
}修改插件选项的参数你需要熟悉 webpack-chain
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 に精通し、ソース コードを読む必要がありますが、これにより、Webpack 設定で値を直接変更するだけでなく、より柔軟で安全な方法が得られます。
// vue.config.js
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
return [/* new args to html-webpack-plugin のコンストラクターに渡します */]
}
}注: Webpack 構成を変更すると、vue Inspection > を通じて完全な構成リストを出力できることに注意してください。有効な Webpack 構成ファイルではありませんが、レビュー用にシリアル化された形式です。 詳細を表示
4. ESLint、Babel、ブラウザリスト関連の設定:
Babel は、.babelrc または package.json の babel フィールドを通じて設定できます。
ESLint は、.eslintrc または package.json ファイルの eslintConfig フィールドを通じて構成できます。 package.json のブラウザリスト フィールドがプロジェクトのターゲット ブラウザのサポート範囲を指定していることに気づいたかもしれません。
🎜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-cli 3.0 の新機能を詳しく説明します (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
