1. vue-cli を使用してプロジェクトをビルドします
vue/cli をインストールする
1. vue/cli をインストールし、次のコマンドを実行してインストールまたはアップグレードします。
npm i -g @vue/cli
vue/cli エラー報告ソリューションをインストールする
インストールエラーが以下の場合
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): EPERM: operation not permitted, rmdir 'D:\Devlop\nodejs\node_global\node_modules\@vue\cli'
npm ERR! code EEXIST
npm ERR! path D:\Devlop\nodejs\node_global\node_modules\@vue\cli\bin\vue.js
npm ERR! dest D:\Devlop\nodejs\node_global\vue.cmd
npm ERR! EEXIST: file already exists, cmd shim 'D:\Devlop\nodejs\node_global\node_modules\@vue\cli\bin\vue.js' -> 'D:\Devlop\nodejs\node_global\vue.cmd'
npm ERR! File exists: D:\Devlop\nodejs\node_global\vue.cmd
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.
npm ERR! A complete log of this run can be found in:
npm ERR! D:\Devlop\nodejs\node_cache\_logs\2023-04-13T02_13_31_038Z-debug.log
vue のバージョンを確認してくださいvue -V。主な理由は、インストールされている vue のバージョンが低すぎることです。
D:\study_html\vueApp>vue -V
2.9.6
以下のコマンドを入力して、古いバージョンの vue-cli scaffolding を強制的に上書きします。
npm install -g @vue/cli --force
実行後、+ @vue/[email protected]インストールが。
+ @vue/[email protected]
added 842 packages from 491 contributors in 84.507s
Vue creat はプロジェクトを作成します
- コマンド ラインで次のコマンドを入力して、Vue プロジェクトを作成します。
vue create 项目名称
vue create コマンドを使用してプロジェクトを作成するのに失敗すると、次のようなエラーが表示されます。
D:\study_html\vueApp>vue create demoApp
Invalid project name: "demoApp"
Warning: name can no longer contain capital letters
D:\study_html\vueApp>vue create myApp
Invalid project name: "myApp"
Warning: name can no longer contain capital letters
vue コマンドは、名前に大文字が含まれるプロジェクトを作成できません。したがって、コマンド ラインでvue プロジェクトを作成する場合は、小文字の英字を使用してプロジェクトに名前を付けるか、vue ui ビジュアル インターフェイスを使用してプロジェクトを作成します。
プロジェクト構成手順の説明
①以下のように正しく作成し、yを入力
D:\study_html\vueApp>vue create demo-app
? Your connection to the default yarn registry seems to be slow.
Use https://registry.npmmirror.com for faster installation? Yes
② 2 番目のオプションを選択し、手動で機能を選択し、より多くのカスタマイズ オプションをサポートします
- デフォルトは、デフォルトの構成を使用し、デフォルトでbabelとeslintをチェックし、Enterを押した後にパッケージを直接入力することを意味します
- 機能構成を手動でカスタム チェックし、選択が完了したら、パッケージを入力できます
Vue CLI v5.0.8
? Please pick a preset:
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
> Manually select features
③ インストールするプラグインをカスタマイズします。(スペースを押してチェックマークを付けるかどうかを選択し、Enter キーを押して確定します。)
babel: ES6 構文を ES5 構文に変換するプラグイン
ルーター: vue-router、ルーティング。プロジェクトはルーティング ジャンプを使用する必要があるため、確認してください。
Vuex: 私たちのプロジェクトでも使用しますが、まだ学習していないので、今はチェックせず、学習したらダウンロードしてください。
CSS プリプロセッサ: CSS の前処理。私たちのプロジェクト スタイルでは使用量が少ないため、より少ないものと sass を選択できます。したがって、報酬が提供されます。
注: スペースを押してチェックするかどうかを選択し、Enter を押して確定します。
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
>(*) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
④vueのバージョンを選択し、2.xプロジェクトを選択
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with
3.x
> 2.x
⑤履歴モードルーティングを使用するかどうか、必要なし、nを入力します（以前に使用したルートはすべてハッシュモードです）
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
⑥css前処理言語を選択し、チェックする Less
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
Sass/SCSS (with dart-sass)
> Less
Stylus
⑦ コード形式の検証に使用する検証仕様を選択し、3 番目のタイプを選択して、Enter キーを押します
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
> ESLint + Standard config
ESLint + Prettier
⑧コード検証をトリガーするタイミングを選択し、スペースを押してチェックし、すべてを選択してEnterを押します
- エラーファイルが変更されると、保存時にリントがトリガーされます
- git committ submit の実行時にコミット時にリントと修正を行う
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to
proceed)
>(*) Lint on save
(*) Lint and fix on commit
⑨Babel、ESLintなどの設定ファイルに対応、ここでは独立を選択し、最初のものにチェックを入れる
- 専用の構成ファイルで生成され、別の構成ファイルに保存されます
- package.json に package.json ファイルと一緒にプラグインの設定情報を書きます
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json
⑩次回すぐに使えるように現在の設定を保存するかどうかを選択します。入力 y を保存する場合は、入力 n を保存する必要はありません。ここでは n を選択します。
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)
①①依存関係をインストールする方法を選択する、私はnpmを選択します
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies:
Use Yarn
> Use NPM
最後に、インストールが成功すると、プロンプト
added 216 packages from 110 contributors in 27.327s
152 packages are looking for funding
run `npm fund` for details
⚓ Running completion hooks...
� Generating README.md...
� Successfully created project demo-app.
� Get started with the following commands:
$ cd demo-app
$ npm run serve
テストを実行
3. プロジェクトを開始し、プロジェクトを実行します
npm run serve
①プロジェクトパスを入力
D:\study_html\vueApp>cd demo-app
② コマンドを実行してプロジェクトが正常に起動することを確認する
D:\study_html\vueApp\demo-app> npm run serve
> [email protected] serve D:\study_html\vueApp\demo-app
> vue-cli-service serve
INFO Starting development server...
DONE Compiled successfully in 5229ms 上午11:00:41
App running at:
- Local: http://localhost:8080/
- Network: http://10.12.48.22:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
2. ディレクトリ構造を調整する
(1) App.vue内の不要なコードを削除し、ルートタグを残す
<template>
<div id="app">
<!-- 路由的出口 -->
<router-view />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style lang="less">
</style>
(2) Router フォルダ内の index.js を削除すると、デフォルトのルーティング ルールもコンポーネントにインポートされます。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 路由表
const routes = []
const router = new VueRouter({
routes
})
export default router
(3) views フォルダーと components フォルダーに移動し、デフォルトの vue ファイルを削除します
(4) assets フォルダに移動し、デフォルトのロゴ画像を削除し、独自の画像を配置します
(5) src の下に、ツールが格納されている新しい utils フォルダーを作成します。
(6) src の下に、スタイルを配置する新しいスタイル フォルダーを作成します。
ここで新しい base.less ファイルを作成し、いくつかの基本的な共通スタイルを記述してから、main.js に来てこのスタイルをインポートします。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 加载全局样式
import './styles/index.less'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
3. アイコン素材のインポート
アイコンフォントの説明
はじめに: iconfont - 強力な機能と豊富なアイコン コンテンツを備えた国内のベクター アイコン ライブラリ。ベクター アイコンのダウンロード、オンライン ストレージ、フォーマット変換などの機能を提供します。
公式サイト：https://www.iconfont.cn/
インポート手順の説明
(1) iconfont Web サイトにログインし、プロジェクトでエクスポートされた SVG アイコンを使用して iconfont にアップロードし、対応する css をダウンロードします。
(2) style フォルダーに icon.css ファイルを追加します。ダウンロードしたiconfontのcssをicon.cssにコピー
// 全局样式
@font-face {
font-family: 'toutiao';
src: url('//at.alicdn.com/t/font_1715884_c380afk5f66.eot?t=1585203719136'); /* IE9 */
src: url('//at.alicdn.com/t/font_1715884_c380afk5f66.eot?t=1585203719136#iefix')
format('embedded-opentype'),
/* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAA64AAsAAAAAGWQAAA5pAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCFCAqiOJsEATYCJANUCywABCAFhGEHgWsbvRQzkpFWJtl/dcAbxhtdSaZIq20EveGtsMBUwuRMnkCPhWwVc8NzsR8LFiz4+76N+YODfT+UEp5qjvft3eV+sgH+gDweqEDCMCu0Ve34atXx7CpM5p/f5t/Ho+oh2BtpJVYCRmEiRgRGrRlGL0tdVfHPMBawiOTg1/ncykebmdWHRsy65Io6gkTUaSDJt5kWsduNrLH8uyqighRAwDbV0sqyMGV0G7N+2+uOQRQflnwg2Ulgwpgi85f1f2upvQmQujvhRoQcCRerZvY2yf7Zf/DDE+YJsEoRVF+Na4XaCZeAXE5XuBptCzWnHMbdR8SkOjQa2DZus4KslTIk+qveHwIoo5bJweeFG+BxmEqw4Em8fxN8ph4niAhhwjOu61S+wRKaL+Yr+Br8fflncwiGwGLezpV7h3cI+elnYz93pu12IXL1aeBwI7DAMnAg75lt74AjWA58ZbWhORMrhxU/m67jJ16stXtDRk6hVKkpjRkYLO74XzxPDyERSkxCCuIxZyUAQtcALX7iEFmAAiIHGhAF0IIogQ5EBQxA1EAPQoE9IBpgCEKAERR6UaEAxlAAEyiAKRTADApgDgWwgAJYQgGsoADWUAAbAHB7f31gEbwEBHvg/zPj34M2h197OkIBaQTm2GYJVpkfMG87JBjOBiWVJk0kSzKZCSfEZSLPjWtKUZAax0mVy8wII7nRKrWzrdNJr1SyoOqtvjptdYHcl8iXT0tTk0kihSv3I+pUEisNIq00zxKZ8eKkYcb85eIIlWUplaJIpdfa4kJXOuRhwRMOOKcdAXoi3frtBe7+tNx3cD91Kw+DrkTfKSPgu5xLOTz8UPJpcAgNCGAmOCVJawh0shqpzU7syTj5qKwcl1tFCZWJSZwqejOfLSI3KxXg2MnLqzsbSy2gL8kFVz3dirE2JGpulGJBdQLfBkbr9S0iKLXCefwzE6D5tk+ALIsFnQGBMpM5dfxk0rb2ZdqSIANcYzO/vAMqLJZ+jMtJT/LmOcmEsRl5ip9AiB+N3ZJ3NUFxiiCR4XBuBQ3kaLR6mQWMFt1PScyr7YIU2OZo+kqtwcDuob5fxmTZrLcaDjMUUO+8hb1dhNeuADeM9I4G/maAolHHMW1tHxEgnr0ZuK7lwf2qk+j5RDp6Abt1ZXPAK/ZWZPOU42BJ98Ie3ykw0FfLybEc/xR0MiLoPJWp4Nmcet1vctudIhzgUt4uvNBl+sO8JyU7mjbNSyHsJnKmYSqw+0zeHGceNbrJxim3J7pRhbob+B84j4bS6wjU/rGOhlFfjtzJa/RJwQ4k9kjWSuft6z8i0OZg9m57F7OP3b0diXt7QyZ/MmdPN7HOtvfuYfcyhiWGEyc4Nu3u4nAnX2gXX5bjV571B2+aV8TTFmNNNdeVJkWTSnE53pfLXsmCCRMcmz+FxIOutTyvnJj8/gOOOQCGpqd3FmrDm6cs6T7FwFygKjavECxHEHRP0tUEL9JTa6c32CM+v147/rrSM3Zlhckhdb+2XKYYit27GbrqmPzeKdCWi8bjS5oOVNHj8Um6J2phq/1knt6X9OgJfjRBdQS1+2g0lhVbUIP/H96dq7m80jE6suIPZiuduB4YTSCRX47nqN10oha2dY605mq9x4Tmnhj5J9Iq93/PZNt/vJv3fs1g4p8ePWteP53EhkPQWJAGEyRzqriWOt1bNXubs4Fid/id5lP03Hry4JGKiR5bL/CYWgiPW6lx7pBniWKraf9BtxRvm8KB/SAsKjp0ACDxzIP7dImCX8yOfj63sapCzHIIN5PgfcFjNzVrXoq5mUkqu09M0lWLN6nlW3n+Wpa9SjHcIdpwsnfUT5dqC72ruckaauobmMkVT8MmLsDmDgj8OYI3C4zK3aeTmdFna6oPXkxjW893V3EygUhIK1WqTGVPBQ1Jskr4A3AV4pGPAoDMHU7Qxf1oi8rDM5zqPDWf4RfW86NfE2w/6Up/5FeKF6lIUdfMakfoS154PEthW0u5jmar+WiiA3ELZxdjadpbTcBlelqS8FEXnQ2ECw72IvHiHrQodaHUz9NKEiQAokWzIB95fWUvBE1ljbZUAlKvsUptXVc0UjpyEDcu/r1iE6WcPqOQbzWijkhFa3ZebDxWWenz5wjBrUFVt1WafYtCeOJAYhFbhkyHWoiPv7S0NksXWyb7JnUgmdACi9k3mYzGoth5fTeu1I4BUygKQplDpZvTqXOix/g3W48q7+srh8qg/j6oXD/GzoFh1b79KpRS+/dngAcn5z4bkpaVSS0MlZcNn56bza6I0eqT38pQyptCZf39ZVAJanAQVazlNaHA2bvl0LIOUhmurGmoxLiUsbuYU2RZlHwk116Q0w+fPAX3wf0r1Y8SnTrlen0eyOAbk1evX9+DR8y6e9qWuCk+EEEAtzppxxfeMm4jlIKKvLvC2BVyxGcICARc1Yrh+hucbsZvoy5On8Wi1nmyxV757b8xCSPQSIJQ2TgvBeWYS70MkVdsHT6Ab2OhjcJDEp6/aZoBSTk1omqjZWZv9PVykHU43DHcut3RyRHVRScyeqDIhrdYZrHScSWjm1NRuYS9ojrQacDpQL/jgOP+fiN4AHiDlgvRUEEBFD0Yos6JhjJLXQ+fCg0PZw4yMxx6ITGMHkTvmXhB+GyyWD0+QS2mToxTnPsG//TU4iEt6wthZRJVF5O6nYoXf67bJxaTdCxthqmFCcWHYmLO0H9e9/5/a9r7TzadsQSdgffBz/3A/bhuJa7oyzoEDawKA6wyGloKU4cd+tJkKHzLYoB/TACLBSKQn0wUObmliqV1XRAzG5fsKBRdxdBfBj1Z1s8Rx32VF6x3SqBhRLkILo4hB8Yx40Pefk5uVSFeFwSPm3UVsG3lYvuomvXjJe5vbn4i/e34tcQCE6Y2jHERFX6NeJpQFWVDUFFyfP2nm29K3EdqohwIa6mMGz/fwAX2hDXiAuHYeyWuESE3480/IPbodQuaN5h/ROww6xbkO/yd55E73yNP+Befv24B2h75aL6hORw2i7/Z+vARmvf480HAEAFjwUynRVqLhem7KtoIkUiWAkihjLa2DCgTWh7UX4M0UxGFzCLsqnBPt5bQI6IEiMfBBH3CpaqlQJSWJoZEENIVZzhdBMTA9zaN1g/tIdAZ4dQQC9eUHdmGEOVZXHuGM+jmp4fAFha5Oya6x7QnW7pNef7NPD08PbvNEAoIAPs0mosXhWbCzi53i5myixc0D4Q+woEBD2+hRjM8JCNYvcdg4v5z/WqtTN24kXPHgwN8nw+1JYikq0sCSqaGhyWpMppsYIAEPniwYwca+PuPDGufzGUMpXKtqTu9qTxCD9MItg6jhU31EZuvXi1lapn+6yOCyflmG8y9bQ3s3fuPfFv/xKn+kwBVU6bb2uZevrVUN+/HZ0GB0+Seb4/PsZtta/A2n/M85l7d27/36n1pwruuS0p0S/+JPvP5R+7uP6zbwrc1GP3G36+3s7e7V2/62+hu4W/R/f52d4/yPvNF+IWlOqUrICYpsGG19XT1E1o0WaeOUuvIUtpj9WLh4pAv6ET4KyuKOQ1LsZOuM3CNkob62npJI67C3GNxnqK+GHvgjIUJcNZ0mppqYGGnt0x6vhnMTLzbcJ5WXxA5r71dZ6fjfrH7ompv/VO2U0gMKh+QdL1KRYAr8TraVSCaeGmBYYGlzBKxTDlgfkBCQkhhltdD8dc66qKjcQguOxTmiiiwrsr2KoCDzqINBjTDZw2TZ2HpyUnYD5g0nJVMYDhs9ATE4dBhNJuDmSDFZvOMKDiYjFgglDTqznPbdiiNTNcc3hAFQnfPCbltfztk3+sL9LODVtYcFrpyZrPKr2gMnMShu+ha6Bmkpe/i3CUBd+/Y7kJkQKAXuMlq0NP16p3ZYSRDnwEoy4ChldhuShf2jrso3VjmRcrEgOXAOypW66zFAqbrAaHX+tn/XuLdtRrFLXb690dLQvmeCeaV2bj8QTC7wSokRMZMAwvAJ3le0kk10Pazv0gTeCK/0+y2Z48kAckz15czQHxiFLbTT7mTzihnn4oRn47gx6amCXNsCm+z277dmpTOdOCdqG5halHNZ293Mp7AzWdugWkHXcqNZTc1cWI58XujmxPT1HzvIeXKIT8ousO7vMyrYwWixIfLzyuj/eQcKSe2qUnBS+IJ7t/3IxDcQLdC0VqrAMHT/wq6Ab3guoD/dBCm8HXegEv4NbfAvrw7XLiFX3IrHMhXqoZrjP3eh6XAtJorqA8AdHvUwMng84KHF7TtjSDLR9TCWXxR+LCiTRlYlPqugI5p57WCQ6cHHFRl8RMa98AO/x22Art/e3bn0gJ+40m/JwZ/jFRiA6nO5vkLv/XaUQDc3H8KhBYIQlO19xoT2ofGEZyqwIk4RQeMHxfgaF4Sy9ZNTyP2gY4W9H03MgNqDQI6YHZVQNeOeKvseIDLuAdmsi2ZzeYzl21fGAAScCv0AAcCChU4APHKGBiBGgADqIcDLAIlCiFABbsZKvskg7OvM3T2aCEGGIOXhVhABfpCIjD/P97mdXWbfXnLoBms6p8qGkIXN+QLk3DU9A1eks73an+7f8glEqq2agqTX4CQ379CmX3H7JTLNKrPih4MUiI1ZRrAcBWYp3tdO9YVK0Pj6rJ6kwGNvdKW0ntWjgyCnGYXRxPBvxRp5BvwRKJl9jqZ0v9AVhwtl6e0Ko2Yffmosm4bzGLmdfcR5igHMpkYKZ+tEkA6jBFlYsNAZxusEt4YmdzV1vGcql/1Lj4ufQAHYf4xbRQSGp3BZLE5PLxcPv5IRqPMrMYOJZA84fLU+AqAftSHQlKEjjbmRSw7lqDRBJGaiFPEU9mV232bgJXdQhYuL6HB6GGSQ+woOBo9w5X8fgG0+uBFYx+PTNMnwX2KFdHR19VmhT4+c4jnRRbNM+nkAB8xqVutAAAA')
format('woff2'),
url('//at.alicdn.com/t/font_1715884_c380afk5f66.woff?t=1585203719136')
format('woff'),
url('//at.alicdn.com/t/font_1715884_c380afk5f66.ttf?t=1585203719136')
format('truetype'),
/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('//at.alicdn.com/t/font_1715884_c380afk5f66.svg?t=1585203719136#toutiao')
format('svg'); /* iOS 4.1- */
}
.toutiao {
font-family: 'toutiao' !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.toutiao-shouye:before {
content: '\e608';
}
.toutiao-yanzhengma:before {
content: '\e609';
}
.toutiao-sousuo:before {
content: '\e60a';
}
.toutiao-dianzan:before {
content: '\e60b';
}
.toutiao-shanchu:before {
content: '\e60c';
}
.toutiao-shipin:before {
content: '\e60d';
}
.toutiao-dianzan1:before {
content: '\e60e';
}
.toutiao-yuedu:before {
content: '\e60f';
}
.toutiao-wode:before {
content: '\e610';
}
.toutiao-zuojiantou:before {
content: '\e611';
}
.toutiao-zuopin:before {
content: '\e612';
}
.toutiao-shoucang:before {
content: '\e613';
}
.toutiao-wenda:before {
content: '\e614';
}
.toutiao-guanbi:before {
content: '\e600';
}
.toutiao-pinglun:before {
content: '\e601';
}
.toutiao-lishi:before {
content: '\e602';
}
.toutiao-gengduo:before {
content: '\e603';
}
.toutiao-shouji:before {
content: '\e604';
}
.toutiao-wuwangluo:before {
content: '\e605';
}
.toutiao-youjiantou:before {
content: '\e606';
}
.toutiao-fenxiang:before {
content: '\e607';
}
(3) icon.less をグローバルスタイル構成の index.less にインポートする
// 全局样式
// 加载图标样式
@import './icon.less';
(4)テスト、App.vueでアイコンが正常かテスト
<template>
<div id="app">
<!-- 路由的出口 -->
<router-view />
<div>
<i class="toutiao toutiao-dianzan"></i>
</div>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style lang="less">
</style>
(5) プロジェクトで必要な対応する画像リソースを、ページ レイアウト用の assets ディレクトリにインポートします。
(6) 公開されている favicon.ico アイコンを置き換えて、独自のものを使用する
4. Vant コンポーネント ライブラリの導入
バント公式サイト
Vant2 中国語ドキュメント アドレス: https://vant-contrib.gitee.io/vant/v2/#/zh-CN/
Vant の統合: npm 経由でインストール
Vant を既存のプロジェクトで使用する場合はnpm、yarnまたは でインストールできます。
# Vue 3 项目，安装最新版 Vant：
npm i vant -S
# Vue 2 项目，安装 Vant 2：
npm i vant@latest-v2 -S
ヴァントインポートの説明
-
グローバル インポート:
-
- 利点: 使いやすく、main.js に vant をインポートする限り、このプロジェクトのどこでも vant コンポーネントを直接使用できます。
- 短所：使用済みまたは未使用のものがプロジェクトにインポートされるため、プロジェクトが大きくなります
- プロジェクトでパフォーマンスの最適化を考慮する必要がある場合は、グローバル インポート メソッドを使用しないでください。
-
オンデマンドでインポート:
-
- 利点：オンデマンドでインポートし、プロジェクトがパッケージ化されると、使用するものに応じて使用済みのものを個別に取り出してパッケージ化するため、ボリュームに無駄がなく、Webページを開く速度が比較的速くなりますもっと早く
- 短所: 開発には不向きであり、開発用に書くのはより面倒です。
コンポーネントをオンデマンドで自動的にインポートする (推奨)
- 最初にプラグインをダウンロードします: babel-plugin-import
- babel-plugin-import は、コンパイル プロセス中にインポートの文言をオンデマンドのインポート メソッドに自動的に変換するバベル プラグインです。
# 安装插件
npm i babel-plugin-import -D
- 次に、プロジェクトのルート ディレクトリに移動し、babel.config.js ファイルを見つけて、次の構成を追加します。
// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
次に、Vant コンポーネントをコードに直接インポートできます。プラグインは、2 番目の方法でコードをオンデマンド インポート フォームに自動的に変換します。
import {
Button } from 'vant';
- src ディレクトリに移動し、utils という新しいフォルダーを作成します。このフォルダーはツールの意味を表し、今後開発に必要なすべてのツールをこのフォルダーに入れます。たとえば、vant もツールなので、このフォルダーに入れます。フォルダ
- そのため、utils フォルダーに vant.js を新規作成し、vant オンデマンドを自動的にインポートするためのコードを記述します。
- 次にmain.jsに来て、このvant.jsをインポートします
- 最後に、デバッグが完了しました。冗長なテスト コードとファイルを削除することを忘れないでください。
ヴァント テスト インポート ステップ プロセス
(1) Vant を npm でインストールして実行するnpm i vant@latest-v2 -S. ここにあるプロジェクトは vue2.x 版である. vant2 をインストールするだけでインストールは成功する.
PS D:\study_html\vueApp\demo-app> npm i vant@latest-v2 -S
npm WARN @vue/[email protected] requires a peer of eslint-plugin-vue@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {
"os":"darwin","arch":"any"} (current: {
"os":"win32","arch":"x64"})
+ [email protected]
added 4 packages from 3 contributors in 6.158s
152 packages are looking for funding
run `npm fund` for details
(2) main.js でのグローバル インポート: すべてのコンポーネントを一度にインポートできます. すべてのコンポーネントをインポートするとコード パッケージのサイズが大きくなるため、この方法はお勧めしません.
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
(3) 効果をテストするには、App.vue の vant コンポーネントを使用して、有効かどうかを確認します。
<template>
<div id="app">
<!-- 路由的出口 -->
<router-view />
<div>
<i class="toutiao toutiao-dianzan"></i>
</div>
<div>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
</div>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style lang="less">
</style>
注：vantのインストール後にエラーを実行してください
ここで、誤ってvantの最新バージョンをインストールしてしまい、非互換になりました
PS D:\study_html\vueApp\demo-app> npm i vant -S
npm WARN @vue/[email protected] requires a peer of eslint-plugin-vue@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of vue@^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @vant/[email protected] requires a peer of vue@^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {
"os":"darwin","arch":"any"} (current: {
"os":"win32","arch":"x64"})
+ [email protected]
added 3 packages from 1 contributor in 11.659s
152 packages are looking for funding
run `npm fund` for details
vant 3 以降をインストールした後、vue2 での vant コンポーネント ライブラリの導入が有効にならず、エラーが報告されます。
ERROR in ./node_modules/vant/es/uploader/UploaderPreviewItem.mjs 72:28-40
export 'createVNode' (imported as '_createVNode') was not found in 'vue' (possible exports: EffectScope, computed, customRef, default, defineAsyncComponent, defineComponent, del, effectScope, getCurrentInstance, getCurrentScope, h, inject, isProxy, isReactive, isReadonly, isRef, isShallow, markRaw, mergeDefaults, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, provide, proxyRefs, reactive, readonly, ref, set, shallowReactive, shallowReadonly, shallowRef, toRaw, toRef, toRefs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useListeners, useSlots, version, watch, watchEffect, watchPostEffect, watchSyncEffect)
@ ./node_modules/vant/es/uploader/Uploader.mjs 10:0-60 178:26-45
@ ./node_modules/vant/es/uploader/index.mjs 2:0-39 3:29-38 5:0-47 6:0-61
@ ./node_modules/vant/es/index.mjs 94:0-48 97:963-971 200:0-37 200:0-37
@ ./src/main.js 10:0-24 12:8-12
npm uninstall vantアンインストール後、 vant 2を再インストールします。
5. モバイル端末のREM適応
レムレイアウト適応
Vant のスタイルは、デフォルトでpx単位として使用されます。rem適応のために単位を使用する必要がある場合は、次の 2 つのツールをお勧めします。
- postcss-pxtorem は、 px 単位を rem 単位に変換するための PostCSS プラグインです。
- lib-flexible はrem ベンチマーク値を設定するために使用されます
次に、これら 2 つのツールをプロジェクトに構成して、rem の適応を完了します。
レムユニットのレビュー
- rem は、html タグの font-size のサイズに応じて変化する変形可能な単位です。
- 具体的には、htmlのフォントサイズは何ですか。1remはピクセル数です
- 例: html の font-size を 28 に設定したとします。その場合、1rem は 28px です
柔軟なプラグインの紹介
-
htmlのフォントサイズによってremの単位が変わるので、どうすればhtmlのフォントサイズを変えることができるのでしょうか？
-
メディアクエリを自分で書いたり、画面幅に合わせてhtmlのフォントサイズを変えたりするのですが、モバイル端末は画面が多く、メディアクエリを書くと疲れて血を吐くのも面倒なので、これは面倒です。他の人が書いたものをプラグインで使えるように、画面サイズに合わせてhtmlのフォントサイズを自動設定
-
flexible は、画面に合わせて html のフォントサイズを自動設定できるプラグインです
-
- 特徴：画面幅を10等分するのでhtmlフォントサイズは画面幅の1/10、例えば375ワイド画面ならhtmlフォントサイズは37.5なので10remだと画面いっぱいになります
lib-flexible を使用して、rem 参照値 (html タグのフォント サイズ) を動的に設定します。
(1)npmのインストール
#yarn add amfe-flexible
npm i amfe-flexible
(2)main.jsモジュールをロードして実行する
// 导入flexible
import 'amfe-flexible'
(3) テスト、ブラウザーでの異なる携帯電話デバイス サイズ間の切り替え、および html タグfont-sizeの
postcss の紹介
-
後処理cssプラグインです：書いた後、プロジェクトをパッケージ化する際に書いたcssを処理します
-
- さまざまなプラグインがあります。たとえば、autoprefix があります。これは、作成後にプロジェクトをパッケージ化するときに、互換性の問題があるコードにブラウザーの識別プレフィックスを自動的に追加できるものです。
- transfrom: コードに直接 transfrom を記述します。postcss-autoprefix プラグインを使用している限り、パッケージ化時に -webkit-transform を自動的に生成できます: このフォーム -moz-transform
- postcss-pxtorem：
-
-
- 私たちのモバイルユニットは rem を使用しており、アーティストから提供されたグラフィックユニットはピクセル、つまり px であるため、rem ユニットを使用する場合は、アーティストのピクセルを rem に計算する必要があり、非常に面倒です。
- このプラグインを使用すると、引き続き px を単位として使用できます。このプラグインを使用すると、パッケージング時に px が rem に自動的に変更されます。
-
-
前処理 css と呼ばれる less、sass は、ページが開かれたときに処理されます。たとえば、less 変数と構文を通常の css 構文に解析します。
postcss-pxtorem を使用して px を rem に変換します
(1)npmインストール
#yarn add postcss-pxtorem
#-D是 --save-dev的缩写
npm install postcss-pxtorem -D
(2)プロジェクトのルート ディレクトリに.postcssrc.jsファイルを作成する基本的な PostCSS のサンプル構成を以下に示します。この構成に基づいて、プロジェクトの要件に応じて変更できます。
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 8']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
(3) 設定が完了したら、サービスを再起動します。ブラウザーを更新し、要素のスタイルを調べて、px が rem に変換されるかどうかを確認します。
.postcssrc.js構成ファイルについて
.postcssrc.jsPostCSS の設定ファイルです。- 現在 PostCSS には、さまざまな機能を持つ 200 以上のプラグインが既に存在します。開発者は、プロジェクトのニーズに応じて独自の PostCSS プラグインを開発することもできます。PostCSS は通常、単独では使用されず、既存のビルド ツールと統合されます。
- Vue CLI はデフォルトで PostCSS を統合し、autoprefixer プラグインはデフォルトで有効になっています。
- Vue CLI は内部で PostCSS を使用します。
- .postcssrc または postcss-load-config でサポートされている任意の構成ソースを介して PostCSS を構成できます。vue.config.js の css.loaderOptions.postcss で postcss-loader を設定することもできます。
- デフォルトで autoprefixer を有効にします。ターゲット ブラウザーを構成する場合は、package.json の browserslist フィールドを使用できます。
6.パッケージリクエストモジュール
前のプロジェクトと同様に、ここでも axios をプロジェクトのリクエスト ライブラリとして使用しますが、使いやすいように、必要なときに直接ロードできるリクエスト モジュールとしてカプセル化します。
1. axios をインストールする
npm i axios
2.src/utils/request.js を作成する
/**
* 封装 axios 请求模块
*/
import axios from "axios"
const request = axios.create({
baseURL: "http://localhost:8080/" // 基础路径
})
export default request
3. 使い方
方法 1 (シンプルで便利ですが、インターフェイスのメンテナンスには役立ちません): request オブジェクトを Vue.prototype プロトタイプ オブジェクトにマウントし、コンポーネント内の this.xxx を介して直接アクセスできます。それぞれの独立した機能関数にカプセル化され、ロードされ
、必要に応じて呼び出されるため、このアプローチはインターフェイスの管理とメンテナンスに便利です