vue06ランタイムのみとランタイム・コンパイラ、プロジェクトを作成しますvuecli

七、vuecli

• はじめに：

  • コマンドラインインターフェースインターフェースVUEコマンド：ビルドインフラプロジェクトにいくつかのコマンドを使用します
  • 多くは、構成するための仕様を使用し維持しやすい、エラーレートが低下します
  • 依存のWebPACKとNPM-「NPM-」従属ノード

• インストール：

  • NPMインストール-g @ VUE / CLI

• アンインストール以前のバージョン

  • NPMアンVUE-CLI -gまたはNPMアンインストール-g @ VUE / CLI

• テンプレートV2を引い

  • npm install -g @vue/cli-init

v2の使用：

• ベースのwebpack3

プロジェクトを作成します。

vue init webpack projectName

v3の使用：

• ゼロ構成

• 隠されたビルドとconfigディレクトリ、ノードモジュールは/ @ VUE / CLIサービスで

  • 設定を変更するにはvue.config.jsを作成し、ルートディレクトリが必要です

    module.exports={};

• ベースのwebpack4

• VUE UIコマンドを提供し、グラフィカルな操作

• 静的を削除し、新しい公共のディレクトリ以下のindex.htmlに移動されます

プロジェクトを作成します。

vue create projectName

1. 

2. 

3. 

4. これは、デフォルト.gitフォルダを作成します

5. カスタム構成：

   1. 新vue.config.jsルートディレクトリ

   module.exports = {
     configureWebpack: {
       resolve: {
         // extensions:[],
         //配置别名
         alias: {
           'assets': '@/assets',
           'components': '@/components',
           'network': '@/network',
           'common': '@/commom',
           'views': '@/views',
         }
       }
     }
   };
   

   1. 設定.editorconfig：コード形式

   root = true
   
   [*]
   charset = utf-8
   indent_style = space
   indent_size = 2
   end_of_line = lf
   insert_final_newline = true
   trim_trailing_whitespace = true
   

vueUi

vue ui  打开图形管理界面

インクルード

• エル：「＃アプリ」最後に実行または$マウント（「＃アプリ」）

八、ランタイムのみの和ランタイムコンパイラ

1. ランタイムのみ：コードを実行するには、それの時間は、テンプレートタグのいずれかが含まれていません

   • レンダリング（H） - "仮想ドム - " UI真DOM

2. ランタイム・コンパイラ：テンプレートタグコード缶

   • テンプレートのロード処理：

     テンプレート - "パース - " 抽象構文木AST - "コンパイラ - " レンダリング（H） - "仮想ドム - " UI真DOM

   性能が高い2、より少ないコード（以下6キロバイト）より

//runtime-compiler
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})




import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

//runtime-only，这个h是一个createElement('tagName',{attrName:'attrVal'},['innerHtml'])
//在vue中也可以传一个template对象靠vue-template-compiler解析成render()，也可以递归创建
/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
})