序文
プロジェクトの作成
vue-routerレイジーローディング
sassと画面の適応を構成する
データ要求AxiosToast
は
vuex
に直接ダウンロードするように促します
プロジェクトの作成
1.グローバルvue-
clinpmをインストールしますinstallvue-cli -g
2.プロジェクトテンプレートを生成します（my_projuctはプロジェクト名です）
vue init webpack my_projuct
3.生成されたプロジェクトフォルダ
cdmy_projectを入力します
4.初期化、インストールは
npminstallに依存します
5.
npm rundevを実行します
5.パッケージ
npmrun build
Vue-routerレイジーローディング
単一ページのアプリケーション、アプリケーションのレイジーロードがない場合、最初に入力すると、ロードするコンテンツが多すぎて、長い白い画面が表示され、ユーザーエクスペリエンスに役立ちません。レイジーロードを使用すると、ページを分割して、必要に応じてロードできます。対応するページは、最初のロードの圧力と時間を効果的に減らすことができます。
index.jsの元のルートをrouterフォルダーの下にロードします
。importVuefrom'vue '
import Router from'vue-router'
import HelloWorld from '@ / components / HelloWorld'
Vue.use（ルーター）
export default new Router（{ routes：[ { path： '/'、name： 'HelloWorld'、component：HelloWorld } ] }）
「vue」からのインポートVueのレイジーロードに変更「
vue-router」からのインポートルーター
Vue.use（ルーター）
export default new Router（{ routes：[ { path： '/'、component：resolve => require（['@ / components / HelloWorld']、resolve）} ] }）
sassと画面の適応を
構成するsassを構成する1.sass
-loaderとnode-sassを
インストールします。npminstallsass-loadernode-sass --save-dev
2.
たとえば、.vueファイルのスタイルにAdd lang = 'scss'を使用します。
モバイル端末画面の適応
1.srcフォルダーに新しいフォルダースタイルを作成し、2つの新しいscssファイルを作成します-mixin.scss / reset.scss
mixin.scss
$ SCALE：10;
$ BASE：375 / $ SCALE; / / 375は設計図のサイズです
//表示以上の省略形
@mixinellipsis { text-overflow：ellipsis; overlay ：hidden; white-space：nowrap; } //複数行のテキスト、表示以上の省略形@mixin moreLine（$ num）{ display：-webkit-box; / **オブジェクトはフレキシブルボックスモデルとして表示されます/ -webkit-box-orient：vertical; /フレキシブルボックスオブジェクトの子要素の配置を設定または取得します/ -webkit-line-clamp：$ num; /表示される行数/オーバーフロー：非表示; /コンテンツを非表示** / }
@function rem（KaTeX解析エラー：予期される '}'、入力の最後に 'EOF'を取得：…）{@ return（ px / $ BASE）+ rem
}
reset.scss
@import './ mixin.scss';
$ size_small：rem（12）;
$ size_middle：rem（14）;
$ size_default：rem（16）;
$ size_big：rem（18）;
$ text_color：＃666;
$ bg_color：＃32ba90;
$ border_color：#dedede;
body、div、span、header、footer、nav、section、aside、article、ul、dl、dt、dd、li、a、p、h1、h2、h3、h4、h5、h6、i、b、em、 textarea、button、input、select、figure、figcaption { パディング：0; マージン：0; リストスタイル：なし; テキスト装飾：なし; 境界線：なし; font-weight：normal; font-family：PingFangSC-Light、helvetica、 'Heiti SC'; ボックスサイズ：border-box; フォントサイズ：14px; -webkit-tap-highlight-color：transparent; -webkit-font-smoothing：アンチエイリアス; ＆：hover { アウトライン：なし; } } a、a：visited { text-decoration：none; 色：＃333; } input：focus { アウトライン：なし;
境界線：なし;
}
html、body { 幅：100％; 高さ：100％; -webkit-font-smoothing：アンチエイリアス; 背景：#fff; 色：＃333; パディング：0; マージン：0; } //禁止用户選択中体{ -webkit-touch-callout：none; -webkit-user-select：なし; -khtml-user-select：なし; -moz-user-select：なし; -ms-user-select：なし; ユーザー選択：なし; } ::-webkit-スクロールバー{ 表示：なし; }
.fl { float：左; } .fr { float：right; } .clearfix：after {/最简法/ content： ''; 表示ブロック; 明確：両方; } .clearfix {/兼容IE /ズーム：1; }
2.App.vueファイルでhtmlのフォントサイズを設定します
3.mixin.scssは、コンポーネントのHelloWorld.vueなど、必要な.vueファイルのスタイルで導入する必要があります。
データリクエストaxios1。axiosnpm
をインストールします
installaxios --save
2. srcフォルダーに新しいapiフォルダーを作成し、新しいindex.jsファイルを作成します
。importaxiosfrom'axios ';
var qs = require（' qs '）;
if（process.env.NODE_ENV === 'development'）{ axios.defaults.baseURL = ''; // ''要求されたドメイン名を入力します）
'vue-router'からVueRouterをインポートします。
//リクエストメソッドを取得exportconst
home =（）=> { return axios.get（ '/ api / index'）; } //リクエストメソッドを投稿（パラメータを含む）export const article =（id）=> { const params = qs.stringify（{'id'：id}）; return axios.post（ '/ api / article'、params）; }
3.インターフェースを呼び出す
トーストのヒント
toast.png
1.共通のトーストプロンプトコンポーネント
src / components / toast /index.vueを作成します
{ {toastTitle}}
コンポーネントをプラグイン
src / components / toast /plugin.jsとして登録します
'./index'からトーストをインポートします
export default { install（Vue、options = {}）{ const VueToast = Vue.extend（Toast）let toast = null
function $toast (params) {
return new Promise(resolve => {
if (!toast) {
toast = new VueToast()
toast.$mount()
document.querySelector(options.container || 'body').appendChild(toast.$el)
}
toast.show(params)
resolve()
})
}
Vue.prototype.$toast = $toast
}
}
main.jsにロードします
// toast
import toast from './ components / toast / plugin'
Vue.use（toast）
4.ページで使用する