WIndows10システムはVue.js開発環境を構築します

1.Vuejsの紹介

Vuejs

Vue.js Github

2.Vue.jsの構成手順{Nodejs [with npm]-> Webpack-> Vue}

Nodejs（npm付き）-------------> Webpack --------------------> Vue

Nodejs

npm

webpackは、フロントエンドのリソース読み込み/パッケージ化ツールです。モジュールの依存関係に基づいて静的分析を実行し、指定されたルールに従ってこれらのモジュールから対応する静的リソースを生成します。さまざまな静的リソースjs、cssなどを静的ファイルに変換してページを削減できます。リクエスト。webpackのGithub

VueとVueの例

2.1 Nodejsをインストールし、npmを構成します

        Nodejsの各バージョンのインストールパッケージをダウンロードします。例として12.14.0バージョンを示します。最初に、Windows10 64ビットシステムに対応するインストールパッケージをダウンロードします


        。Nodejsのインストール：node-v12.14.0-x64をダブルクリックします。 .msiインストールパッケージを選択し、インストールディレクトリを選択します。[次へ]をクリックします。Nodejsが正常にインストールされると、独自のnpmが表示されます。次の図は、Nodejsがインストールされた後のフォルダーの内容を示しています。

        システムの環境変数Pathを確認し、Nodejsインストールディレクトリ（D：\ Program Files（x86）\ Nodejs **）がPathに追加されている

node -v npm -v

ことを確認します。         次に、cmdコマンドラインウィンドウを開いて、ノードとnpmのバージョンを確認します         。Nodejsのnpm管理ツールは、デフォルトでC：\ Users \ user name \ AppData \ Roamingパスの下のnpmとnpm_cacheにモジュールをインストールするためです。ただし、通常はCドライブスペースを節約するために、npmによってインストールされたすべてのモジュールをNodejsインストールディレクトリに移行できます。最初に、Nodejsインストールディレクトリにnode_cacheとnode_global **の2つの新しいフォルダーを作成する必要があります。


        次に、次の4行を実行します。 cmdウィンドウのコマンド：

npm config set prefix "D:\Program Files(x86)\Nodejs\node_global" //配置node的global路径
npm config set cache "D:\Program Files (x86)\Nodejs\node_cache" //配置node的cache路径
npm config set registry https://registry.npm.taobao.org //配置淘宝镜像地址
npm config list //查看配置列表信息

        次に、** D：\ Program Files（x86）\ Nodejs \ node_modules **の値でシステム変数に** NODE_PATH **という名前の新しい環境変数を作成し、         最後にユーザー変数のパスを編集してパスを変更します対応するnpmの変更先：** D：\ Program Files（x86）\ Nodejs \ node_global **

2.2webpackをインストールする

        cmdウィンドウでコマンドを実行してwebpack：をインストールしnpm install webpack -g、webpackのバージョンを確認しnpm webpack -vます。Nodejsインストールディレクトリのnode_globalフォルダーの下にあるwebpackを確認することもできます。




        まず、cmdウィンドウでnpmダウンロードアドレスがTaobaoミラーかどうかをnpm config get registry確認します。インストールするvueバージョンとその他の情報をnpm info vue確認します。npmによって現在インストールされているパッケージのリストを確認します。現時点npm list -global


        では、デフォルトのモジュールD： Program Files（x86）\ Nodejs \ node_modulesディレクトリはD：Program Files（x86）\ Nodejs \ node_global \ node_modulesに変更されます。npminstallやその他のコマンドを直接実行すると、エラーが報告されるため、増やす必要があります。環境変数NODE_PATHの内容：D：Program Files（x86）\ Nodejs \ node_global \ node_modules

2.3VueとVue-cliをインストールする

        次に、Vueをインストールし、cmdウィンドウを開いて、と入力npm install vue -gしnpm install vue-cli -g、Nodejs \ node_global \ node_modules \ vueの下に表示します。


        システム環境変数のパスを編集し、D：Program Files（x86）\ Nodejs \ node_globalを追加し、cmdウィンドウを開いてコマンドを入力し         、vue -Vインストールされている


Vueのバージョン情報を表示します。Vueを使用して新しいVue.jsプロジェクトを作成します。Fディスクワークスペースディレクトリで、次のコマンドを順番に入力します。-vueプロジェクトフォルダの内容を表示し、GoogleChromeを開いてアクセスできます。http：// localhost：8080

vue init webpack your-vue //使用vue-cli新建vue项目
cd your-vue //进入项目根目录
npm run dev //运行项目

        プロジェクトを閉じる場合は、cmdウィンドウでCtrl+を押したままC、次のように入力します。Y

3.Vue.js開発ツール

        通常、人々はプロジェクト開発用の開発IDEとしてIntelliJIDEAを使用することを好みます。
        IDEAを使用して、作成したばかりのyour-vueプロジェクトを開きます。IDEAは、ノードコンパイラパスとVueパスを設定し、NodejsプラグインとVuejsプラグインをインストールしてプロジェクトを変更する必要があります。

ジェットブレインズ	考え
Nodejsプラグイン	Vuejsプラグイン

IDEAがあなたのvueプロジェクトを開きます

4.VueプロジェクトでサポートされているES互換ブラウザの履歴バージョン

ECMAScript 2015（ES6）

ECMAScript 5

5.小さなコードのヒントを書く

HelloWorld.vueファイル

<template>
  <div class="hello">
    <h1>{
   
   { msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
    <el-button class="primary"></el-button>
  </div>
</template>

<script>
export default {
     
     
  name: 'HelloWorld',
  data () {
     
     
    return {
     
     
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
     
     
  font-weight: normal;
}
ul {
     
     
  list-style-type: none;
  padding: 0;
}
li {
     
     
  display: inline-block;
  margin: 0 10px;
}
a {
     
     
  color: #42b983;
}
</style>

        .vueファイルには、次の3つの主要部分があります。
                        インターフェイスレイアウトデザイン：<template> </template>
                        JavaScriptスクリプト部分（プロパティとメソッドを含む）<scripte> </script>
                        インターフェイスのコントロールスタイルのカスタム部分（.less構文を推奨）<style></style>
        実際のフロントエンド開発プロセス、El-button、el-input、el-dialog、el-formなどのElementUIライブラリを簡単に使用できます。Javaフロントエンド開発では主にKVP（key-value pair form key：value array）を使用するためです。あなたは次の方法で、中央のjs部分で変数の値を監視することができますのでまたはテーブル）、変数のデータ値と属性を転送します
console.log(JSON.stringify(this.updatedialogForm.proList.attributetable))。//コンソールディスプレイに表データのJSONパース形を
        加えて、とき子ダイアログボックスは親ダイアログボックスにデータを送信します。有効にするには、放出する必要があります。

onupdateSubmit () {
    
    
... //功能部分
this.$emit('onupdateSubmit')` // 子组件向父组件提交数据
}