vueでmint-ui使用

mint-uiの導入方法

cnpm i mint-ui -S

注意:npmダウンロードに問題が発生し(端末にErrorの赤いヒントが現れたら、再ダウンロードしなければならない)、cnpmでnpmを置き換えます
npm install mint-ui-S-S======--saveは依存を(dependencies)生産環境(プロジェクトラインアップ環境)にインストールすることを示す
npm install sass-D=--save-devは依存を(devDependencies)開発環境(ローカルで動作する環境)にインストールすることを示す
必要に応じてステップを導入

インストールプラグイン:npm install babel-plugin-component-D

構成の変更(.babelrcファイルが見つかりました.内容は:)

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

main.jsは必要に応じて

を導入する.

import { Button, Cell } from 'mint-ui'

Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/*    
 * Vue.use(Button)
 * Vue.use(Cell)
 */

備考、このように修正プロジェクトが正常に起動できない場合は、es 2015

をダウンロードする必要があります.

cnpm install babel-preset-es2015 --save-dev
 

vue-cliでのsassの使用方法
まず2つのプラグインをインストールします:node-sass sass-loader

npm install node-sass --save-dev
npm install [email protected]  --save-dev

配置build----webpackを修正する.base.conf.js----->roules追加:

{
  test: /\.scss$/,
  loaders: ['style', 'css', 'sass']
}

vueコンポーネントのstyle lang='scss'

を使用
-S-Dの違い
何ですか.すべてnpmダウンロードパッケージで、携帯するパラメータですか?
npm install mint-ui ?
ダウンロードしたmint-uiをどの環境で使用しますか?
-Sとは--saveが依存を生産環境に配置することを意味する.
-Dとは--save-devが開発環境に依存を配置することを意味する.
どのようなプラグインが-Sを使うべきですか?どのプラグインが-Dパラメータを使うべきですか?
このプラグインが生産環境で使用されているか、開発環境で使用されているかを判断します.プラグインがどの環境で使用されるかを変更します.sassを例に挙げます.
npm install node-sass --save-dev npm install [email protected] --save-dev
scss構文—>css
オンライン:オンラインでscssをcssにコンパイルする必要があり、scssは必要ありません.
オフライン:scss.node-sass sass-loader
mint-ui生産環境も必要
npm install mint-ui --save
vue-cliには2つの環境があります.
開発環境:現在編集されている環境が開発環境です.npm run devが起動したのは開発環境です
生産環境:プロジェクトの開発が完了し、パッケージが完了したら、サーバーに置きます.サーバという環境が本番環境です.npm run bulid

グローバルに導入されると、mint-ui全体がプロジェクトにパッケージされます.プロジェクトは大きいです.

はオンデマンドで導入され、プロジェクトに必要なモジュールをプロジェクトにパッケージ化するだけで、プロジェクトのボリュームが減少します.

ダウンロードするプラグインをオンデマンドで導入します.開発環境でのみ有効になります.
エンドアイテムを移動します.remレイアウト.携帯電話端末.画面サイズはそれぞれ異なります.
rem.js
html要素のfont-size==が1 rem
スクリーンサイズによってhtmlのfont-sizeを動的に変更する.

function setRemUnit(){
     

        //      
        var deviceWidth = document.documentElement.clientWidth;
        //      / 7.5  ?     。 
        // 1. ui         ：750px
        // 2.          750 ，          1px   。
        //3.          font-size 12px,   *100
        //4.html font-size ===100px     1rem==100px;
        // 5.      ， 200px   2rem  。
        document.documentElement.style.fontSize = deviceWidth / 7.5+ 'px';
    
    }