Webフロントエンド学習ノート——WebpackはVueJSと組み合わせて、Mint-UI、MUI

42247 ワード

注意:npm i node-sass -Dを使って入れられない場合があります.cnpm i node-sass -Dを使用しなければなりません.
普通のページでレンダリングコンポーネントを使う


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
  <script src="./lib/vue-2.4.0.js">script>
head>

<body>
  <div id="app">
    <p>444444p>
  div>

  <script>

    var login = {
      template: '      
'
    }

    //    Vue   ，   ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      render: function (createElements) { // createElements       ，   ，            ，    html   
        return createElements(login)
        //   ：   return    ，        el         
      }
    });
  script>
body>

html>

webpackに配置します.vueコンポーネントページの解析

運転cnpm i vue -Sは、vueを運転依存にインストールする.

実行cnpm i vue-loader vue-template-compiler -Dは、解析変換vueのパケットを開発依存にインストールする.

実行cnpm i style-loader css-loader -Dは、解析変換CSSのパケットを開発依存にインストールします.

はwebpack.config.jsにおいて、以下のようなmodule規則を追加する.


module: {

    rules: [

      { test: /\.css$/, use: ['style-loader', 'css-loader'] },

      { test: /\.vue$/, use: 'vue-loader' }

    ]

  }

//    webpack    Node     ，  ，webpack      ，     Node       
var path = require('path')
//     ，         ，          ，         bundle       
//        ，         ，     plugins   
var htmlWebpackPlugin = require('html-webpack-plugin')

//           webpack   webpack-dev-server    ，     ，                          ，  ，               ，       ，              ，        ，      
module.exports = {
  entry: path.join(__dirname, './src/main.js'), //     
  output: { //       
    path: path.join(__dirname, './dist'), //     
    filename: 'bundle.js' //          
  },
  plugins: [ //   webpack         
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'), //         
      filename: 'index.html' //             
    })
  ],
  module: { //        loader    
    rules: [ //           
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //    CSS     loader
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //    less     loader
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, //    scss     loader
      { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, //          loader
      // limit     ，      ，    byte，           ，         limit ，      base64      ，            limit  ，      base64    
      { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, //          loader 
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, //    Babel       ES  
      { test: /\.vue$/, use: 'vue-loader' } //    .vue     loader
    ]
  },
  resolve: {
    alias: { //    Vue           
      // "vue$": "vue/dist/vue.js"
    }
  }
}

は、login.vueコンポーネントページを作成します.




export default {
  data() {
    //   ：     data     function
    return {
      msg: "123"
    };
  },
  methods: {
    show() {
      console.log("    login.vue    show   ");
    }
  }
};

作成main.jsエントランスファイル:

//     webpack       ，   Vue     

//              vue： 
// 1.    script    ，   vue   
// 2.   index    ，      id   app div   
// 3.    new Vue      vm    


//  webpack       Vue：
//   ：   webpack  ，    import Vue from 'vue'     Vue     ，     ，     runtime-only    ，                 ；
import Vue from 'vue'
// import Vue from '../node_modules/vue/dist/vue.js'
//          ：
// 1.             node_modules     
// 2.   node_modules       ，     vue    
// 3.   vue     ，       package.json       
// 4.   package.json    ，      main   【main              ，     】

// var login = {
//   template: '  login  ，               
'
// }


// 1.    login   
import login from './login.vue'
//   ，webpack      .vue   ，        loader： 
//  cnpm i vue-loader vue-template-compiler -D
//        ，  loader     { test:/\.vue$/, use: 'vue-loader' }

var vm = new Vue({
  el: '#app',
  data: {
    msg: '123'
  },
  // components: {
  //   login
  // }
  /* render: function (createElements) { //   webpack  ，       vue，              ，vm      render       
    return createElements(login)
  } */

  render: c => c(login)
})


//     ： webpack       vue :
// 1.   vue  ：  cnpm i vue -S
// 2.      webpack  ，     .vue             ，  ，              loader    cnpm i vue-loader vue-template-complier -D
// 3.   main.js  ，   vue     import Vue from 'vue'
// 4.      .vue      ，  ，        ： template script style
// 5.    import login from './login.vue'       
// 6.    vm     var vm = new Vue({ el: '#app', render: c => c(login) })
// 7.          id   app   div   ，     vm         ；

webpackを使って構築したVueプロジェクトでテンプレートオブジェクトを使用しますか?

はwebpack.config.jsにresolve属性を追加します.

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }

ES 6における文法使用のまとめ

は、export defaultおよびexportを使用してモジュール内のメンバを導出する.ES 5に対応するmodule.exportsとexport

は、import ** from **およびimport ' 'を使用し、他のモジュール

を導入するimport {a, b} from ' 'がある.

は矢印関数を使用する.(a, b)=> { return a-b; }

vueコンポーネントページでは、vue-routerルーティングモジュールを統合します.
vue-router公式サイト

ルートモジュールを導入する:


import VueRouter from 'vue-router'

ルーティングモジュールのインストール:


Vue.use(VueRouter);

ディスプレイが必要なコンポーネントを導入する:


import login from './components/account/login.vue'

import register from './components/account/register.vue'

ルートオブジェクトを作成します.


var router = new VueRouter({

  routes: [

    { path: '/', redirect: '/login' },

    { path: '/login', component: login },

    { path: '/register', component: register }

  ]

});

は、ルートオブジェクトをVueのインスタンスにマウントする:


var vm = new Vue({

  el: '#app',

  // render: c => { return c(App) }

  render(c) {

    return c(App);

  },

  router //      ，    Vue    

});

App.vueコンポーネントを改造し、templateにrouter-linkとrouter-viewを追加します.

コンポーネントのcssスコープ問題
引き抜きルートは別のモジュールです.

main.js

import Vue from 'vue'
// 1.    vue-router  
import VueRouter from 'vue-router'
// 2.      VueRouter 
Vue.use(VueRouter)

//    app   
import app from './App.vue'

//           
import router from './router.js'

var vm = new Vue({
  el: '#app',
  render: c => c(app), // render    el       ，          ，            router-view   router-link      el        
  router // 4.          vm  
})

//   ： App     ，    VM     render   ，     ， render           ，        ，     el: '#app'         ；
// Account   GoodsList   ，             ，  ，      ，                ；

router.js

import VueRouter from 'vue-router'

//    Account   
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'

//   Account      
import login from './subcom/login.vue'
import register from './subcom/register.vue'

// 3.       
var router = new VueRouter({
  routes: [
    // account  goodslist
    {
      path: '/account',
      component: account,
      children: [
        { path: 'login', component: login },
        { path: 'register', component: register }
      ]
    },
    { path: '/goodslist', component: goodslist }
  ]
})

//          
export default router

App.vue

お腹が空きましたか?
Github倉庫保管住所
Mint-UI公式文書

すべてのMintUIコンポーネントを導入する:


import MintUI from 'mint-ui'

スタイルシートの導入:


import 'mint-ui/lib/style.css'

は、ビンUI中のButtonボタンとToast弾枠提示をvueで使用する.


Vue.use(MintUI)

使用例:

primary

Mint-UIで必要に応じて導入される構成

main.js

import Vue from 'vue'
// 1.    vue-router  
import VueRouter from 'vue-router'
// 2.      VueRouter 
Vue.use(VueRouter)


//   bootstrap  
import 'bootstrap/dist/css/bootstrap.css'
import './css/app.css'

//    MUI     ，   Bootstrap       
import './lib/mui/css/mui.min.css'


//       MIntUI   
//    Mint-UI
// import MintUI from 'mint-ui' //           
// //         node_modules      
// import 'mint-ui/lib/style.css'
// //   MintUI     Vue  
// Vue.use(MintUI) //       ，        


//      Mint-UI  
import { Button } from 'mint-ui'
//    Vue.component        
Vue.component(Button.name, Button)
// console.log(Button.name)


//    app   
import app from './App.vue'

//           
import router from './router.js'

var vm = new Vue({
  el: '#app',
  render: c => c(app), // render    el       ，          ，            router-view   router-link      el        
  router // 4.          vm  
})

//   ： App     ，    VM     render   ，     ， render           ，        ，     el: '#app'         ；
// Account   GoodsList   ，             ，  ，      ，                ；

App.vue

<template>
  <div>
    <h1>   App   </h1>

    <!--         mt-button   button       -->
    <mt-button type="danger" icon="more" @click="show">default</mt-button>

    <mt-button type="danger" size="large" plain>default</mt-button>

    <mt-button type="danger" size="small" disabled>default</mt-button>


    <button type="button" class="mui-btn mui-btn-royal">
        
    </button>


    <!-- <mybtn type="primary">12345</mybtn> -->

  
    <router-link to="/account">Account</router-link>
    <router-link to="/goodslist">Goodslist</router-link>

    <router-view></router-view>
  </div>
</template>

<script>
//      Toast   
import { Toast } from "mint-ui";

export default {
  data() {
    return {
      toastInstanse: null
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      //            AJax   
      //        ，      Toast     ，      
      this.show();
      setTimeout(() => {
        //    3    ，       ，   Toast   
        this.toastInstanse.close();
      }, 3000);
    },
    show() {
      // Toast("    ");
      this.toastInstanse = Toast({
        message: "    ",
        duration: -1, //     -1         
        position: "top",
        iconClass: "glyphicon glyphicon-heart", //        
        className: "mytoast" //    Toast   ，          
      });
    }
  }
};
</script>


<style>

</style>

MUIコードセグメントを使う
注意:MUIはMint-UIと違って、MUIは開発された一連の良いコードセグメントだけで、中にはセットになっているスタイル、サポートされているHTMLコードセグメントが提供されています.Bootstrapと似ています.Mint-UIは、本物のコンポーネントライブラリであり、Vue技術を用いてパッケージ化されたセットのコンポーネントであり、シームレスなVUEプロジェクトと統合開発が可能である.だから、体験から言えば、Mint-UI体験がもっといいです.これは他の人が開発してくれた既存のVueコンポーネントです.体験から言えば、MUIとBootstrapは似ています.理論的には、どの項目もMUIまたはBootstrapを使用することができますが、MInt-UIはVueプロジェクトにのみ適用されます.
注意:MUIはnpmでダウンロードできません.自分でマニュアルでgithubから既製のカバンをダウンロードして、自分で解凍して、マニュアルでプロジェクトにコピーして使います.
公式ホームページ
文書の住所

MUIのスタイルテーブルを導入する:


import '../lib/mui/css/mui.min.css'

は、webpack.config.jsに新たなloaderルールを追加する.


{ test: /\.(png|jpg|gif|ttf)$/, use: 'url-loader' }

は、公的に提供された文書およびexampleに基づいて、関連するコンポーネント

を使用することを試みる.

新しいAndroid d-Android開発の実例教程三、四

kotlinはGlide 4.0.0を使用しています.

Webフロントエンド学習ノート——WebpackはVueJSと組み合わせて、Mint-UI、MUI

， .vue --- {{msg}}

login ，

App

Account