記事のディレクトリ
1はじめに
vue-cli3とvue-cli2には大きな違いがあります
- vue-cli3はwebpack4に基づいており、vue-cli2はwebapck3に基づいています
- vue-cli 3の設計原則は「0構成」であり、ルートディレクトリの下の構成ファイル、およびビルドや構成などのディレクトリを削除します。
- vue-cli 3は
vue uiコマンドを提供し、視覚的なユーザーインターフェイスを提供します - 静的フォルダーを削除し、パブリックフォルダーを追加し、index.htmlをパブリックに移動しました
2.プロジェクトを作成します
プロジェクトを作成するコマンド：、vue create 项目名称次に、関連する構成を選択する必要があります。このブログの詳細は次のとおりです：https：//www.cnblogs.com/dotnet261010/p/11534564.html
3.ディレクトリ構造
そのmain.jsコードはこのようなものです
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
例はここでは作成されていませんelプロパティですが、後のインスタンス$mount(’#app’)メソッド、アプリのdom要素IDを手動でマウントするインスタンスを追加しました。
また、vue-cli2スキャフォールディングを使用してプロジェクトをビルドするときにランタイム+コンパイラモードを選択した場合、そのmain.jsは次のようになります。
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
new Vue({
el: '#app',
render: h => h(App)
})
実際、elロールと$mount同じ関数のロールは、1つのhtml要素のルートインスタンスvueにマウントされます。vueの公式Webサイトでは、次のように説明しています。インスタンス化時にVueインスタンスがelオプションを受け取らない場合、インスタンスは「マウント解除」状態であり、関連するDOM要素はありません。vm.$mount()マウントされていないインスタンスを手動でマウントするために使用される場合があります。
4.構成ファイルはどこに行きましたか？
node_modules-> @vue-> cli-service、構成ファイルはすべてこのcli-seviceフォルダーにあります。
通常の状況では、node_modules内のファイルを変更しませんが、この構成に満足できず、変更したい場合はどうなりますか？プロジェクトのルートディレクトリvue.config.jsにファイル（この名前が必要）を作成してから、必要な構成を追加する必要があります。パッケージ化すると、このファイルの構成情報がnode_modules / @ vue / cli-serviceの構成情報と自動的にマージされます。
module.exports = {
}