フロントエンド基盤を構築するためのプロジェクト-Vue.js

第12章プロジェクトのビルド

12.0コマンドラインツール（CLI）

https://cn.vuejs.org/v2/guide/installation.html#%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7-CLI

Vueが提供してCLIの公式は、単一ページのアプリケーション（SPA）はすぐに複雑な足場を築きます。これは、現代のワークフローのフロントエンドを構築するために、付属の電池を提供します。ほんの数分かかり、アップして、あなたが救う熱過負荷、糸くずのチェックを使用して実行することができ、利用可能な生産環境を構築します。詳細はで見つけることができるのVue CLIのドキュメント。

12.1は、プロジェクトの初期化

ツールをインストールするには、CLIコマンドを実行します。npm install -g @vue/cli @vue/cli-init

インストールが成功した後、使用してvue -Vバージョン番号を確認するコマンドを、

使用vue init webpack myappmyappという呼ばれるプロジェクトをビルドするには：

Vueが、まだ私たちは、プロジェクトの情報を開始した、道を尋ねるために使用します

プロジェクト名：プロジェクト名
プロジェクトの説明：プロジェクトの説明
著者：著者
Vueのビルド：
- 最初：開発者のほとんどは
- 第二：唯一のランタイムがあります
VUE-ルータをインストールしますか？ヴュー・ルータがインストールされています
私たちの文法を検証するかどうか、あなたのコード？ESLintをlintのESLint使用。
構文仕様は、私たちのコードをチェックするために使用します。ESLintのPRESERを選択：
- 標準：標準仕様
- Airbnb：オーデマピゲ会うの仕様
ユニットテストを設定します。ユニットテストを設定
セットアップE2Eテスト：最終テストにセット終了
私たちは、「インストールNPM」を実行する必要がありますヘルプを使用すると、このプロジェクトが必要なサードパーティ製のパッケージをダウンロードしません
- ダウンロードにNPMを使用します
- ダウンロードに糸を使用してください

To get started:

  cd myapps
  npm run dev   // 使用命令启动项目
  
  -----
  Your application is running here: http://localhost:8080  
  
  打开浏览器，访问 http://localhost:8080  
  看到浏览器的欢迎界面，表示项目运行成功

ここに画像を挿入説明

12.2はじめにプロジェクトの構造

├── build				webpack打包相关配置文件目录
├── config				webpack打包相关配置文件目录
├── node_modules		 第三方包
├── src					项目源码(主战场)
│   ├── assets			 存储静态资源，例如 css、img、fonts
│   ├── components		 存储所有公共组件
│   ├── router			 路由
│   ├── App.vue			 单页面应用程序的根组件
│   └── main.js			 程序入口，负责把根组件替换到根节点
├── static				可以放一些静态资源
│   └── .gitkeep		 git提交的时候空文件夹不会提交，这个文件可以让空文件夹可以提交
├── .babelrc			 配置文件，es6转es5配置文件，给 babel 编译器用的
├── .editorconfig		 给编辑器看的
├── .eslintignore	      给eslint代码风格校验工具使用的，用来配置忽略代码风格校验的文件或是目录
├── .eslintrc.js		 给eslint代码风格校验工具使用的，用来配置代码风格校验规则
├── .gitignore			 给git使用的，用来配置忽略上传的文件
├── index.html			 单页面应用程序的单页
├── package.json		 项目说明，用来保存依赖项等信息
├── package-lock.json	  锁定第三方包的版本，以及保存包的下载地址
├── .postcssrc.js		  给postcss用的，postcss类似于 less、sass 预处理器
└── README.md			 项目说明文档

12.3構文チェック

注：プロジェクトをビルドするとき、我々は選択した場合Use ESLint to lint your code、我々は厳密にコードを記述する際に従わなければなりませんJavaScriptの標準スタイルの文法規則のコードスタイル：

二つのスペースを使用してください -インデントを
文字列の単一引用符、エスケープ必要な場合を除いて-
もはや冗長変数ではないにつながっている- 多数のバグの源！
ノーセミコロン - それだけのようにも。あなたに嘘をつきません！
最初の行ないに(、[またはの初め`` `
- これは省略セミコロンで唯一の場所は、問題を引き起こす可能性があります- ツールが自動検出に追加されました！
- ディテール
キーワードスペースの後 if (condition) { ... }
関数名スペースの後 function name (arg) { ... }
スティックは合同で===放棄==してチェックする必要がなく、null || undefinedあなたが使用することができますobj == null。
渡されたのNode.jsのエラーコールバックに対処するようにしてくださいerrパラメータ。
ブラウザの使用グローバル変数と結合されたときwindow-接頭辞をdocumentし、navigator例外を除いて
- これらの名前の不注意な使用を避けるために非常に普通のグローバル変数を見て、open、length、eventにもname。

彼が見てそんなに言った、これは例のファイルの標準仕様に続いてコードを。それとも、あります標準使用して、このプロジェクトの大きな波参照するためのコードを。

注：これらの文法規則を満たしていない場合は、プロジェクトの文法チェッカーを構築するとき、あなたはESLintを使用することはできません

12.4商品コードプレビュー

12.4.1ナレッジベース

strictモード

http://javascript.ruanyifeng.com/advanced/strict.html

厳密モードでは、主に次のような制限があります。

変数は使用前に宣言する必要があります
関数のパラメータは、それ以外の場合はエラーを同じname属性を持つことはできません
あなたは使用することはできませんwithステートメントを
割り当て、読み取り専用属性、それ以外の場合はエラーすることはできません
あなたは0 8進数を表す接頭辞、そうでない場合はエラーを使用することはできません
あなたは、プロパティが、それ以外の場合はエラーを削除することはできません削除することはできません。
あなたは、変数を削除することはできませんdelete prop専用のプロパティを削除することができ、文句を言うだろう、delete global[prop]
evalその外側のスコープ内の変数を導入していません
evalそして、arguments再割り当てすることはできません
argumentsこれは、自動的に関数のパラメータの変化を反映していません
あなたは使用することはできませんarguments.callee
あなたは使用することはできませんarguments.caller
禁止されているthisグローバルオブジェクトを
あなたは使用することはできませんfn.callerし、fn.arguments関数呼び出しのスタックを取得します
予約語の増加（例えばprotected、static、およびinterface）

モジュラーES6

http://es6.ruanyifeng.com/#docs/module

要約：

CommonJSモジュール出力値のコピーである、ES6モジュールの出力が基準値です。
CommonJSランタイムモジュールがロードされ、ES6は、コンパイル時に、出力インターフェースモジュールです。
ES6モジュールは自動的にあなたが持っているかどうかをstrictモードに加え、モジュールヘッドを使用します"use strict";。
モジュール間ES6、トップthis点undefined、CommonJSトップモジュールthis現在のブロックを指します。

コードのロードを実行12.4.2

main.js

// 入口文件

// 以es6模块的方式引入 vue APP router 三个模块;
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  // 获取节点对象
  el: '#app',
  // 引入路由
  router,
  // 本实例的私有组件
  components: { App },
  // el 与 template 在同一个实例中出现，
  // 根据生命周期的执行顺序可知，template中的内容会替换el选中的内容
  template: '<App/>'
})

ローター/ index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

// Vue 中插件引入语法 
// https://cn.vuejs.org/v2/guide/plugins.html
Vue.use(Router)

// ES6模块导出语法
export default new Router({
  routes: [
    // 定义一个路由规则
    {
      path: '/', // 请求路径
      name: 'HelloWorld', // 路由名称标识
      component: HelloWorld //请求此路由时，使用的组件
    }
  ]
})

コンポーネント/ HelloWorld.vue

export default {
  // 模块名字
  name: 'HelloWorld',
  // 组件中 data 数据必须是一个有返回值的方法
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}

(main.js->template: '<App/>')替换 (index.html->div#app);

(index.html-><App/>) --> (components: { App })

( components: { App }) --> (import App from './App' -> src/App.vue)

(App.vue -> <router-view/> -> 路由组件) --> (main.js-> router)
========此项决定了页面展示那个组件内容 ========

({path: '/',name: 'HelloWorld', component: HelloWorld }) --> (import HelloWorld from '@/components/HelloWorld')

(src/components/HelloWorld.vue) --> <router-view/>

12.5は、独自のルーティングコンポーネントを追加します

ルータ/ index.jsを変更し、独自のルートを追加

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 引入(导入) 组件
import MyRouter from '@/components/MyRouter'

Vue.use(Router)

// ES6模块导出语法
export default new Router({
  routes: [
    {path: '/',name: 'HelloWorld', component: HelloWorld },
    // 添加自己的路由及组件
    {
      path:'/myrouter',
      name:'MyRouter',
      component:MyRouter
    }
  ]
})

独自のコンポーネントを作成し、コードをコンポーネントフォルダ内MyRouter.vueファイルを追加します。

<template>
  <div class="mypage">
    {{mydatas}}
  </div>
</template>

<script>
  // 模块化导出
  export default {
    data(){
      return {mydatas:'lksadjflks'}
    }
  }
</script>

<style>
  .mypage{
    width: 200px;
    height: 50px;
    background: pink
  }
</style>