vue.js+npm+element-ui学習ノート

21125 ワード
vue vue.js javascript
vue.js+npm+element-ui学習ノート
一、vue.jsは1.1概要軽量級MVVMフレームワークです.データドライバ+コンポーネント化を使用してオンにします.データ双方向バインド(ビューを変更するとデータもmodelに割り当てられ、modelを変更するとビューに反映されます).
ページ上の独立したビジュアルまたはインタラクティブな領域はすべて1つのコンポーネントと見なされ、各コンポーネントは1つのエンジニアリングディレクトリ(フォルダ)に対応し、コンポーネントに必要な各種リソースはできるだけこのディレクトリの下に置いて近く維持し(テンプレート、スタイル、jsなどを1つの.vueファイルに書く)、コンポーネントはネストされて自由に組み合わせられ、完全なページを形成することができる.1.2 vue足場初期化項目
# 1.  vue-cli   (       )
$ npm install -g vue-cli

$ 2.     
$ vue init webpack <project name>

# 3.   cnpm(        )
#   npm                 ，      npm          ，     npm     —cnpm
npm install -g cnpm –registry=http://registry.npm.taobao.org

# 4.      
$ cd <project name>
# cnpm       ，    cnpm    npm   
$ cnpm install

# 5.              
$ npm run dev

# 6.       localhost:8080

1.3足場ディレクトリ構造build:webpack関連の配置config:webpack関連の配置、index.jsでサービスを構成できるポート、デフォルトは8080、useEslintデフォルトはtrue、チェックコードフォーマットを開始するとfalse node_に設定できます.module:npm installがインストールする依存コードライブラリsrc:ソースファイル、開発はこのディレクトリの下でassetsを行います:いくつかの静的資源components:コンポーネントを保存して、保存します.vueファイルは、各コンポーネントがtemplate、script、style routerの3つの部分に分かれ、urlパスに対応するコンポーネントAppを構成する.vue main.js:entryエントリファイルstatic:静的リソースtestを格納:ユニットテスト関連.babelrc:babelコンパイルに関する構成.editorconfig:エディタ関連の構成(文字セット、インデントスペースなど).Eslintignore:必要なパスまたは省略パスを構成し、一般的にbuild、config、dist、testなどのディレクトリは無視されます.eslintrc.js:コードフォーマットスタイルチェックルールを構成します.例えば、各行のコードがセミコロンを強制的に使用するかどうか.コードインデントはスペースを使うかtabを使うかなど、工事を開始する際に厳格な検査を行い、フォーマットを満たさないと起動に失敗し、主にすべての開発者に強い一致した開発スタイルを維持させる.主にextends:["standard"]、rulesなどの配置です..gitignore:gitまたは略のファイルindex.html:エントリファイル、コンパイル時にindexに他のコードが挿入されます.html中package.json:プロジェクトのプロファイル、scriptsは構成のスクリプトに使用して、その中でdevとbuildはとてもよく使われて、プロジェクトを起動するのはnpm run devコマンドを使って、ここのdevはscriptsの中のdevで、npm startはnpm run devに対する簡単な書き込みです;devDependenciesはコンパイル時の依存に用いられ、開発時に必要であり、オンライン時には使用できない.1.4基本フロー1.コンソールにnpm run devを入力し、ブラウザにアクセスします.http://localhost:8080/#/helloworld 2.router/index.jsが配置した/hellooworldパス(path)は対応するコンポーネント(component)HelloWorldを見つけた.vue 
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
     
  routes: [
    {
     
      path: '/helloworld',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

HelloWorld.vueはアクセスするコンテンツです
<template>
  <div class="hello">
    <h1>{
     {
      msg }}</h1>
  </div>
</template>

<script>
export default {
     
  name: 'HelloWorld',
  data () {
     
    return {
     
      msg: 'HelloWorld.vue'
    }
  }
}
</script>

<!-- style       -->

HelloWorld.vueの内容はAppに置き換えられます.vue中
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
     
  name: 'App'
}
</script>

<!-- style       -->

App.vueの内容はindexに注入されます.htmlのbodyタグに
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>platform-webapp</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

二、Vue.js技術スタックnpm:node.jsのパッケージ管理ツールは、私たちのフロントエンドプロジェクトで使用するパッケージ、プラグイン、ツール、コマンドなどを同じ管理するために使用され、開発とメンテナンスが容易です.ES 6:Javascriptの新バージョン、ECMAScript 6の略称.ES 6を使用すると、JSコードを簡略化し、JSロジックを迅速に実現するために提供される強力な機能を利用することができます.Babel:ES 6コードをブラウザ互換のES 5コードに変換するプラグインvue-cli:Vueの足場ツールで、Vueプロジェクトのディレクトリとファイルを自動的に生成します.vue-router:Vueが提供するフロントエンドルーティングツールを利用して、ページのルーティング制御、ローカルリフレッシュ、オンデマンドロードを実現し、単一ページアプリケーションを構築し、前後の分離を実現します.vuex:Vueが提供するステータス管理ツールは、プロジェクト内のさまざまなデータのインタラクションと再利用を同じ管理するために使用され、データ・オブジェクトに使用する必要があることを格納します.Webpack:強力なファイルパッケージツールで、フロントエンドのプロジェクトファイルをjsに圧縮し、vue-loaderなどのローダで構文変換とロードを実現できます.三:npm
  • 概要
    • 従来のフロントエンド開発ではjquery、bootstrap、echartsなどのjsプラグインをよく導入しています.まずプラグインの各公式サイトにダウンロードし、自分のフロントエンドプロジェクトのstatic/jsディレクトリの下に置きます.私たちは1つのプラグインを参照するたびに公式サイトにダウンロードし、ダウンロードしたプラグインをプロジェクトにドラッグします.アメリカのプログラマーIsaac Z.Schlueterはこの機械的な動きを十分にして、この流れを簡略化しようとしたので、コード倉庫(registry)としてサーバーを買った.共有コードを格納メールでは、jQueryの作成者、bootstrapの作成者、Vueの作成者、element-uiの作成者など、各JSプラグインの作成者にnpm publishコマンドを使用して自分のJSプラグインをregistryに送信するように通知する.jsonでは、インストールする必要があるプラグイン名と対応するバージョン番号(dependency依存)を構成し、npm installコマンドでダウンロードし、ダウンロードしたプラグインをnode_に自動的に配置します.modulesディレクトリの下
    この考え方はmavenと全く同じで、mavenやgradleを熟知しているのも自然にnpmを理解しているが、npmはjsに、mavenはjavaに、著者が共有したコードをある共通のコード倉庫に置いて、ユーザーはまずプロファイルの中で使用する依存を構成してから、1つのコマンドでダウンロードすることができる.
    倉庫
    npm
    maven
    倉庫住所
    http://registry.npmjs.org
    https://mvnrepository.com
    コードウェアハウス
    registry
    repository
    taobaoミラー
    http://registry.npmjs.org
    https://mvnrepository.com
    プロファイル
    package.json “dependencies”: {“vue”: “^2.5.13”}
    pom.xml
    ソフトウェア
    npm(node package manager)
    apache-maven
    ダウンロードコマンド
    npm install
    mvn install
    生成されたディレクトリのパッケージング
    dist
    target
    npm:Node Package Manager、Node.jsが開発したツールは,プラグインをウェアハウスに公開したり,プラグインウェアハウスからプラグインをダウンロードしたりするためのツールであり,JSコードを共有するためのツールである.2.npmのインストール方法
    なぜならjsは当時もパケットマネージャが1つ欠けており、npmもnodeを使用していた.jsが開発したのは、このツールを使う人が少なく、その後node.jsの著者とnpmの著者はnpmをnodeとしてコミュニケーションした.jsパッケージマネージャ、nodeに内蔵.jsでは、node.js大火、npmを使う人もますます多くなって、ますます多くのJSプラグインがnpmを通じて共有されて、今ほとんどよく使われるプラグインはすべてnpmの中で見つけることができて、今のnpmはすでにフロントエンドの共有コードの標準に発展しました.npmはnodeに内蔵されているからです.jsが当たったのでnodeをインストールしました.jsにはnpmもインストールされており、node-vとnpm-vでそれぞれ対応するバージョンを表示できます.3.packageの生成方法jsonファイル
    npm init:ベースのpackageを生成するために使用されます.jsonファイルは、名前、バージョン番号、説明、プライマリファイル、著者、プロトコルなどのpackageを含む.json 
    {
     
  "name": "platform-webapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
     
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

    四、集積Element 4.1 element-uiをインストールする
    #         
$ cd <project root dir>
#   element-ui,    package.json dependencies    element-ui  
$ cnpm i element-ui -S

    4.2 main.jsでelement-uiをmainに構成する.jsにインポートを追加し、VeeにElementUIを使用させる
    import Vue from 'vue'
import App from './App'
import router from './router'
//   element-ui
import ElementUI from 'element-ui'

Vue.config.productionTip = false

// Vue  ElementUI
Vue.use(ElementUI)

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

    4.3インストール依存
    cnpm install 4.4 element-uiを使用
    HelloWorld.vue 
    <template>
  <div class="hello">
    <h1>{
     {
      msg }}</h1>
    <el-button type="primary">    </el-button>
    <el-input-number v-model="num" :min="1" :max="10" @change="handleChange"></el-input-number>
  </div>
</template>

<script>
export default {
     
  name: 'HelloWorld',
  data () {
     
    return {
     
      msg: 'HelloWorld.vue',
      num: 5
    }
  },
  methods: {
     
    handleChange(value) {
     
      console.log(value)
    }
  }
}
</script>

    4.5再起動、アクセス
    npm run dev
    五:参考文章
    vscode+vue環境の構築https://blog.csdn.net/mao834099514/article/details/79138484
    Vueノート-コンポーネント間のネスト
    C#版接尾辞ツリー最長共通列LCS