项目初始化-导入vant组件库

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
+    "vant": "^2.12.50",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"

src/App.vue

@@ -1,6 +1,12 @@
 <template>
-  <div>
+  <div id="app">
     <h2>黑马头条</h2>
+    <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>
+    <!-- <i class="toutiao toutiao-shanchu"></i> -->
     <router-view></router-view>
   </div>
 </template>

src/css/index.css

@@ -1,3 +1,77 @@
-body {
-  background-color: pink;
+@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,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') 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";
 }

src/main.js

@@ -3,6 +3,9 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import '@/styles/index.less'
+import Vant from 'vant'
+import 'vant/lib/index.css'
+Vue.use(Vant)
 Vue.config.productionTip = false
 
 new Vue({

src/styles/icon.less

@@ -0,0 +1,100 @@
+@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,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') 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";
+}

src/styles/index.less

@@ -1,3 +1,2 @@
-body {
-    background-color: pink;
-}
+// 引入icon.less
+@import './icon.less';

yarn.lock

@@ -924,7 +924,7 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/runtime@^7.12.13", "@babel/runtime@^7.8.4":
+"@babel/runtime@7.x", "@babel/runtime@^7.12.13", "@babel/runtime@^7.8.4":
   version "7.19.0"
   resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.19.0.tgz#22b11c037b094d27a8a2504ea4dcff00f50e2259"
   integrity sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==
@@ -1302,7 +1302,17 @@
   dependencies:
     "@types/node" "*"
 
-"@vue/babel-helper-vue-jsx-merge-props@^1.4.0":
+"@vant/icons@^1.7.1":
+  version "1.8.0"
+  resolved "https://registry.npmmirror.com/@vant/icons/-/icons-1.8.0.tgz#36b13f2e628b533f6523a93a168cf02f07056674"
+  integrity sha512-sKfEUo2/CkQFuERxvkuF6mGQZDKu3IQdj5rV9Fm0weJXtchDSSQ+zt8qPCNUEhh9Y8shy5PzxbvAfOOkCwlCXg==
+
+"@vant/popperjs@^1.1.0":
+  version "1.3.0"
+  resolved "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz#e0eff017124b5b2352ef3b36a6df06277f4400f2"
+  integrity sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw==
+
+"@vue/babel-helper-vue-jsx-merge-props@^1.0.0", "@vue/babel-helper-vue-jsx-merge-props@^1.4.0":
   version "1.4.0"
   resolved "https://registry.npmmirror.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz#8d53a1e21347db8edbe54d339902583176de09f2"
   integrity sha512-JkqXfCkUDp4PIlFdDQ0TdXoIejMtTHP67/pvxlgeY+u5k3LEdKuWZ3LK6xkxo52uDoABIVyRwqVkfLQJhk7VBA==
@@ -6314,6 +6324,17 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+vant@^2.12.50:
+  version "2.12.50"
+  resolved "https://registry.npmmirror.com/vant/-/vant-2.12.50.tgz#ee507a337e6e00b18acbf174cfaf1c5e2f527a88"
+  integrity sha512-WKm+oc2pUh+spTzK6uCviHmOuZwuLOjg2bYmUFNJGbGPlcPFkGzOl32NR/SP4rBvGopA6s32Mkp2key46qNOzA==
+  dependencies:
+    "@babel/runtime" "7.x"
+    "@vant/icons" "^1.7.1"
+    "@vant/popperjs" "^1.1.0"
+    "@vue/babel-helper-vue-jsx-merge-props" "^1.0.0"
+    vue-lazyload "1.2.3"
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
@@ -6337,6 +6358,11 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
+[email protected]:
+  version "1.2.3"
+  resolved "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.2.3.tgz#901f9ec15c7e6ca78781a2bae4a343686bdedb2c"
+  integrity sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g==
+
 vue-loader@^17.0.0:
   version "17.0.0"
   resolved "https://registry.npmmirror.com/vue-loader/-/vue-loader-17.0.0.tgz#2eaa80aab125b19f00faa794b5bd867b17f85acb"