429 VUE足場

その他 2020-03-31 16:11:28 訪問数: null

A、VUEは、単一ファイルの集合体であります

監督：事前登録コンポーネント欠点は何ですか？

シンタックスハイライトの1位不足

2-悪い全体的なフォーマット

3 - ノー特別な書き込みCSSコード、など

参考：VUE =>ツール=>単一ファイルコンポーネント

  1. アセンブリ単一ファイル？サフィックス.vueファイルとは何ですか
  2. 三の成分（コードブロック：足場自動的プロンプト）単一ファイルアセンブリ
  • テンプレート（テンプレート構造）
  • スクリプトコードの論理コンポーネント
  • スタイルスタイル
  1. 注意点 :
    • シングルファイルコンポーネント、ブラウザで直接使用することはできません、これはWebPACKのパッケージングツール、後処理でなければならない、あなたは、ブラウザを使用することができます
    • VUE-ローダーその他の構成

第二に、導入足場

2.X - 背景管理システム

3.X - vuex

  1. VUE-CLI VUE足場ツールです。

  2. **役割：VUE-CLIコマンドを提供**、このコマンドによって、我々はすぐに直接VUEのプロジェクトを生成することができます（vue init XX）。
    基本的なプロジェクトの構造、並びに構成項目WebPACKのすべての設定をまあ

  3. なぜ足場ツール???

    WebPACKの設定面倒なので、開発者は、構成基準のWebPACKに行く必要はありませんので、著者が直接、あなたのために書かれたすべてのコンフィギュレーションで使用されているすべてのアイテムをVUEので、VUEのグループを防ぎたいが、WebPACKのない開発者設定項目

  4. 言い換えれば、もはやWebPACKの構成の問題を心配する、我々だけの機能を実装するために、ライトフロントエンドVUEコードに必要になったこの足場VUE-CLIツールの使用は、することができ

第三に、足場ツールの利用

  • インストール： npm i -g vue-cli
  • VUEプロジェクトの初期化： vue init webpack 项目名称
    • 例えば： vue init webpack vue-demo01
  • プロジェクトのインストールプロセス：
? Project name # 回车
? Project description # 回车
? Author  # 回车
? Vue build standalone  # => 运行时+编译 => 详见下面的问题1 
? Install vue-router? # Yes
? Use ESLint to lint your code? # Yes => 详见下面的问题2
? Pick an ESLint preset Standard  # standard
? Set up unit tests # No
? Setup e2e tests with Nightwatch? # No
? Should we run `npm install` for you after the project has been created? # (recommended) npm
  • どのように始めるために
To get started: 

cd vue-demo01
npm run dev
  • "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    • --inline：手段の情報が表示されます
    • -progress：プログレスバー
    • --config：WebPACKのプロファイル開発などのファイルを指定

第四に、プロジェクトファイル、VUEプロジェクトロジックプロセスの説明

最初のパス：フォルダ、細かいファイルへの二度目

# build - webpack 相关配置
- build.js - 生产环境构建代码
- check-version.js - 检查 node、npm 等版本
- util.js 构建工具相关
- vue-loader.config.js - vue-loader 的配置文件
- webpack.base.conf.js - webpack 的基础配置
- webpack.dev.conf.js - webpack 开发环境配置
- webpack.prod.conf.js - webpack 发布环境配置

# config - vue 基本配置文件(比如: 监听端口(17),  使用 eslint: (26))
- dev.env.js - 开发环境变量
- index.js - 项目的一些配置
- prod.env.js - 生成环境变量

# node_modules - node 安装的依赖包

# src - 资源文件夹,  以后我们就在这个目录下写代码
- assets - 静态资源 (图片 css 都放在这)
- components - 公用组件
- router - 路由
- App.vue - 项目的根组件
- main.js - 项目的入口文件(总逻辑)

# static - 静态资源不要打包的文件 (图片 json 数据之类的)
- .gitkeep git 保持文件, 因为 git 上传, 会忽略空文件夹

# .babelrc - babel 配置文件,  (es6 语法编译配置, 将 es6 转化为浏览器能够识别的代码)

# .editorconfig - 定义代码格式
- charset = utf-8 编码 utf8
- indent_style = space 缩进 空格
- indent_size = 2 缩进字符
- end_of_line = lf 回车作为换行的标记
- insert_final_newline = true 最近一空白行作为结尾
- trim_trailing_whitespace = true 清除最结尾的空白
- 如果使用 ?
- 1. 安装 vscode 的 editorConfig for vscode
- 2. eslint 检测修复后

# .eslintignore - eslint 检测忽略的地方
- /build/
- /config/
- /dist/
- /\*.js 根目录下带.js 的

# .eslintrc.js - eslint 的配置文件

# .gitignore - git 的忽略文件

# .postcssrc.js - css 配置文件 (啥也没有处理)

# index.html - 页面入口

# package.json - 项目配置文件

4.1リファレンス：標準

4.2リファレンス：SRC

  • 静的リソース資産

  • コンポーネントアセンブリ

  • App.vueルートコンポーネント=>指定されたルート出口

    • 足場の後、すべてのコンポーネントがapp.vueにレンダリングされます

  • #appでのアプリの#appまたはindex.htmlには、かつてのをカバーするapp.vueは
    それぞれtitle属性を追加することによって確認することができます

  • エクスポートはapp.vueに書き込むためにコンポーネントテンプレートをルーティング

  • main.js

    • エントランスのjsファイル
    • 処置：[ルーティング]、VUEインスタンスを作成中の他の成分の導入およびVUEインスタンスを導入することがハング
    • Vue.config.productionTip = false ==>何も印刷のヒントません
    • 新しい検出ません：検出警告の背中を見ます
    new Vue({
  el:  '#app',  // 目标显示
  router,    // 挂载路由
  components:  { App },  // 注册组件 App
  template:  '<App/>' // 模板显示组件 app
})

  • ルート/ index.js =>ルート

  • 常に覚えている：Vue.use(Router)モジュラー構造は、プラグインのルーティングをインストールする必要があり、.jsファイルは、モジュールです

  • また、前述の公式サイト https://router.vuejs.org/zh/installation.html

4.3ドロー論理図は、（いくつかの入り口の文書には、プロジェクトを記述します）

index.htmlを

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>demo01</title>
</head>

<body>
    <!-- （1）运行服务器会打开index.html入口页面；（2）然后自动引入main.js（会被打包成app.js）；（3）main.js引入根组件App.vue 、路由router；（4）根组件App.vue负责显示所有的子组件；（5）路由router负责管理子组件（路由规则管理）；（6）components下是子组件；（7）assets是css、图片、js等静态资源 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <!-- 自动引入的app.js就是主入口文件main.js -->
</body>

</html>

main.js

// 引入vue、App根组件、路由router，然后实例化vue，挂载路由，指定实例化vue的组件是根组件

import Vue from 'vue'
import App from './App' // （1）App.vue 的后缀 可以省略；（2）引入根组件。
import router from './router' // （1）引入路由，在下面挂载；（2）省略了router目录下的index.js

Vue.config.productionTip = false

/* eslint-disable */
new Vue({
    // el : 指定边界 占位置 【不能删】
    el: '#app',
    router, // 挂载路由
    components: { App }, // 注册组件
    // （1）template > el；(2)App组件当成标签来用
    template: '<App/>'
})

index.js

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import HelloWorld from '../components/HelloWorld.vue'
// import HelloWorld from 'C:/....../src/components/HelloWorld'

// Vue 把 router 当成组件安装了一下
Vue.use(Router)

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

App.vue

<template>
    <div id="app">
        <img src="./assets/logo.png" />
        <!-- APP.vue是根组件，因为这里有router-view，出口，所有的出口都显示在这里。 -->
        <router-view />
    </div>
</template>

<script>
    export default {
        name: "App"
    };
</script>

<style>
    #app {
        font-family: "Avenir", Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

V.問題

5.1 - 質問1：コンパイラモードとの両方@

参考：この説明の異なるバージョンのvue.js =>インストール=>建設

  • 私たちは、選択したランタイム+コンパイラモード：（+ランタイムエディタ）
  • 実行時モード：Vueのは、このようなレンダリングおよび仮想DOMコードを処理するようにインスタンスを作成するために使用されます。基本的に他のすべてのコンパイラを削除します。
  • コンパイラ：テンプレート文字列はコードJavaScriptのレンダリング機能をコンパイルするために使用されます。
// 需要编译器
new Vue({
  template:  '<div>{{ hi }}</div>'
})

// 不需要编译器
new Vue({
  render (h) {
    return h('div',  this.hi)
  }
})
  • 完全なバージョンの選択：ESモジュール（ベースのビルドツール）：vue.esm.js
    • ビルド=> webpack.base.config.js => 37行エイリアス（別名） 'VUE $'： 'VUE / DIST / vue.esm.js'、
  • @：それは、srcの絶対パスです。
    • ビルド=> webpack.base.config.js => 38行エイリアス（別名） '@'：解決（ 'SRC'）、
router/index.js =>
	import HelloWorld from '@/components/HelloWorld'
	import HelloWorld from 'C: /users/.../src/components/HelloWorld'

5.2 - 問題2：ESLint

  • **コンセプト：** ESLintは、識別され、JavaScriptコードでのパターンマッチングのためのツールを報告し、その目標は、コードと回避エラーの一貫性を確保することです。

    • vscodeや他の編集ツールでは、構文エラーを促すことができます
    • 多くの点で、それは離れていくつかの例外を除いから、JSHintは、同様の、JSLint：

  • eslintを使用するには？

    • 1 - vscodeプラグESlintをインストール
    • 2-vscodeはでいくつかの構成設定を追加します
     "editor.formatOnSave":  true,  // 每次保存的时候自动格式化
  "eslint.autoFixOnSave":  true,  // 每次保存的时候将代码按eslint格式进行修复
  "eslint.validate":  [
    { "language":  "html",  "autoFix":  true }, 
    { "language":  "vue",  "autoFix":  true }, 
    { "language":  "javascript",  "autoFix":  true }, 
    { "language":  "wpy",  "autoFix":  true }
  ], 
  "prettier.eslintIntegration":  true,  // #让prettier使用eslint的代码格式进行校验
  "javascript.format.insertSpaceBeforeFunctionParenthesis":  true, 
  "editor.formatOnType":  true // 让函数(名)和后面的括号之间加个空格

  • **閉じるEslint：**

    • 参考：設定/ index.js ==> 26行：dev.useEslint falseに設定

    • 再起動プロジェクト： npm run dev

5.3質問3：vscode形式のプラグインをインストールきれい

  • インストール vscodeプラグPrettier -Code formatter
  • 機能1。：Shiftキー+ Altキー+ F. =>書式コード
  • 機能2：eslintと：設定上の問題を参照してください

5.4質問4：検出警告

eslint-disable-next-line # 忽略检测下一行  可以使用单行注释/多行注释, 其他都是多行注释
eslint-disable # 忽略当前整个文件  多行注释   /*    */

eslint-disable no-new # 忽略前面是new开头

第六に、プロジェクトのプレゼンテーション

準備：サーバー+データベースをオンにします

何VUEプロジェクトを学ぶには？

  1. プロジェクトを完了するために、足場ツールでVUEを使用する方法
  2. 使用ElementUIは、コンポーネントライブラリを学びます
  3. ビジネス
  • 3.1ログイン、アウト
  • 3.2ユーザー認証+ + +ロールメニュー
  • 3.3コモディティモジュール

セブンローカルサーバを開きます

**描く：**インタフェースのアクセスパスを：
フロントページ===> Interfaceサーバー===>データベースサーバ==>データベース

最初の小さなステップ：オープン：データベースサーバー

オープンphpStudy、クリック启动

第2小段階：データベースのインポート

  1. オープン navicat

  2. クリック连接：作成MySQL接続を

  3. ユーザー名とパスワード：ルート・ルート（走り書きすることはできません）、これはconfigに同じ構成であります

  4. ：データベースを作成shop_adminしないで走り書きし、カウントダウンを選択UNT-8を見つけます

  5. データベースをダブルクリックして開きます

  6. インポートsql语句=>は右SQLファイル=>ショップ-APIの最後のSQLファイルを実行します

    何も起こらない場合：表=>右のリフレッシュ

第三の小さなステップ：オープンインタフェースサーバ

  1. オープン shop-api
  2. ラン npm start
  3. 成功を示しています。 API 接口服务启动成功，占用端口 8888

第四の小さなステップ：テストインタフェース

http: //localhost: 8888/api/private/v1/login?username=admin&password=123456

项目使用接口 :  (记得保存)
// shop-api里面有

第五小さなステップ：使用

  • 前にプロジェクトを行うには毎日：
    1. それぞれ、最初に開く必要がありますphpStudymySql
    1. 毎回を開きshop-api、実行していますnpm start

注釈

# 脚手架创建项目

1. 安装脚手架 : `npm i vue-cli -g`
2. 检测 : `vue -V` (version)
3. 使用 : `vue init webpack demo01`

​```js
> npm 清除缓存
> 1. 路径 : C:\Users\ma250\AppData\Roaming\npm-cache
> 2. 命令  npm cache clean -f

> 1. 假如  npm i XXX 报错了
> 错误 : LINK  NetWork 找不到包
> 清缓存 : `npm cache clean -f `
> npm i XXX

> 2. vue init webpack demo01  报错
>   清缓存 : `npm cache clean -f `
> npm i  ? 成功率低
>  vue init webpack demo01  再来一次
​```


# 文件介绍
- build - webpack 的配置文件
- config - vue 项目的配置文件
- node_modules 依赖包
- src : 源文件 (重点)
- static - 静态文件 (不打包的)
  .gitkeep 保持一个空文件夹能够上传到 github/码云等托管代码网站
- .editorconfig 编辑器配置

  - 1. vscode 插件 : `EditorConfig fro VS Code`  【Vetur】
  - 2. 找到 .editconfig 配置

- .eslintignore eslint 忽略检测的部分
- .gitignore git 上传忽略的
- .postcssrc.js 处理 css 的配置文件
- index.html 入口页面


# src
- assets - 静态资源 (打包的)
- components 组件
- router 路由
- app.vue 根组件


# eslint
1. 作用 :检测代码是否规范 , 保证代码的一致性 和避免错误

2. 如何使用
- 安装 vscode 插件 : `ESLint`
- 设置配置

3. ctrl + S => 自动格式化 + 修复
4. 参考 : Prettier + Standand

5. 两个忽略注释
- 忽略下一行 : // eslint-disable-next-line /_ eslint-disable-next-line _/
- 忽略文件的全部警告 /_ eslint-disable _/

# @ 其实就是 src 的绝对路径

構文8つのモジュール、ES6（ベースWebPACKの基本クラス）

8.1輸出デフォルトデフォルトのエクスポートモジュール（単純型複合型+）

  • 輸出：輸出デフォルト

  • デフォルトでは、のみエクスポートすることができます

    let str = 'abc'
let num = 20;
let obj = { name : 'zs' }

export default num
// export default obj

  • インポート：インポート

  • インポート名は任意とすることができます

  • import res from './a.js'
console.log(res)

8.2エクスポートエクスポート複数のモジュールは、オブジェクトに配置されます

  • **エクスポート：輸出**

  • // 逻辑模块 
// 登录一个函数
export let login = () =>  {
  console.log('登录');
}
// 注册一个函数
export let register = () =>  {
  console.log('注册');
}

  • インポート：インポート

  • // 方式1
import * as res from './a'
console.log(res);
res.login()
res.register()

// 方式2
import { login,  register as reg } from './a'
login()
register()

8.3インポートモジュール

import axios from 'axios';

a.js

// 导出一些数据
let num = 30
let obj = { name: 'zs' }

// 只能导出一个 default 默认 只能由一个
export default num
export default obj

// 可以这样写
export default {
    num,
    obj
}


// 登录
let login = () => {

}


// --------------------------------



// 导出 登录函数
export let login = () => {
    console.log('login---')
}

// 导出注册函数
export let register = () => {
    console.log('register----')
}

mian.js

/**
 * 1. import + export default
 * 2. import + export
 * 3. import axios from 'axios'
 *
 * axios.get().then()
 */

/**
 * 1. import + export default
 *  import 引入
 *  export default  导出
 */

// res 可以随便写
import aaa from './a.js'
console.log(aaa)


// ---------------------------------------- 


/**
 * 2. import + export  【export导出的是对象】
 */
//  export 导出的是一个对象 (登录+注册)
// 方式1 :
import * as res from './a.js'
console.log(res)
res.login()
res.register()

// 方式2 :
import { login, register as reg } from './a.js'

login()
reg()


// -----------------------


// 解构
let obj = {
    name: 'zs',
    age: 30
}

function test(obj) {
    // let n = obj.name
    // let a =  obj.a

    let { name: n, age } = obj
    console.log(n, age)
}

test(obj)

// 起别名 as 或者  :

おすすめ

転載: www.cnblogs.com/jianjie/p/12605656.html
おすすめ
ランキング
パイソンのPythonの設計哲学--zen
VUE - 1を学習の開発ブログ
エントリートラバース地図要素
コードをHuaweiCloudgitリポジトリに同期する
Mavenは地元の倉庫とアリクラウド遠隔倉庫を設定しました
Linux は、ファイルとサブディレクトリの内容をすべてのユーザーが読み取り、書き込み、実行できるように変更します。
サンプルを作成するためのK8S展開＆サービス
ailoop2内部ailoop3内部の操作で、検討します。（コストは右である）海のデバッグ本当の巨人を使用した場合HearthBuddy愛2（第ヒーローのスキルが問題のトーテムを召喚使用していない、海の巨人を使用）、以下トーテムを召喚
お金が最も多くを得ました
[P1023]羅区税補助金（説明）
アーカイブ
もっと
2024-06-04(0)
2024-06-03(1)
2024-06-02(0)
2024-06-01(1)
2024-05-31(1)
2024-05-30(0)
2024-05-29(1)
2024-05-28(0)
2024-05-27(1)
2024-05-26(0)

コードワールド

© 2018 codetd.com