1. Use vue-cli to build the project
Install vue/cli
1. Install vue/cli, execute the following command to install or upgrade
npm i -g @vue/cli
Install vue/cli error reporting solution
If the installation error is as follows
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
Check the version of vue vue -V, the main reason is that the version of vue installed is too low.
D:\study_html\vueApp>vue -V
2.9.6
Enter the following command to forcibly overwrite the old version of vue-cli scaffolding.
npm install -g @vue/cli --force
After the execution, you can see that + @vue/[email protected]the installation is successful.
+ @vue/[email protected]
added 842 packages from 491 contributors in 84.507s
Vue creat creates a project
- Enter the following command on the command line to create a Vue project
vue create 项目名称
When using the vue create command to create a project fails, it is found that the error is as follows:
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
The vue command cannot create a project whose name contains uppercase letters. Therefore, when creating a vue project on the command line , use lowercase English letters to name the project, or use the vue ui visual interface to create the project.
Project Configuration Operation Step Description
① Correctly create as follows, enter 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
② Choose the second option, manually select features, and support more customization options
- Default means to use the default configuration, check babel and eslint by default, and enter the package directly after pressing Enter
- Manually custom check the feature configuration, after the selection is complete, you can enter the package
Vue CLI v5.0.8
? Please pick a preset:
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
> Manually select features
③ Customize the plug-ins to be installed. (Press the space to choose whether to tick or not, and press Enter to confirm.)
babel: A plugin that converts ES6 syntax to ES5 syntax
Router: vue-router, routing, because the project needs to use routing jumps, so check it
Vuex: Our project will also use it, but we haven't learned it yet, so don't check it for now, and download it when we learn
CSS Pre-processors: CSS preprocessing, you can choose less and sass, because our project style uses less, so a reward is offered
Note: Press the space to select whether to check or not, and press Enter to confirm
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
④ Select the version of vue and select the 2.x project
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
⑤ Whether to use history mode routing, no need, enter n (the routes we used before are all hash mode)
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)
⑥Choose css preprocessing language, check 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
⑦ Select which verification specification to use for code format verification, select the third type, and press 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
⑧ Select when to trigger the code verification, press the space to check, select all and press Enter
- Lint on save is triggered when an error file is modified
- Lint and fix on commit when executing git committ submission
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
⑨Corresponding to configuration files such as Babel, ESLint, etc., select independent here, and check the first one
- In dedicated config files generated and saved to a separate configuration file
- In package.json Write the configuration information of the plugin together with the package.json file
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
⑩Choose whether you want to save the current settings for quick use next time. If you want to save the input y, you don't need to save the input n. Here I choose 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)
①① Which way to choose to install dependencies, I choose 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
Finally, after the installation is successful, the prompt
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
run test
3. Start the project and run the project
npm run serve
① Enter the project path
D:\study_html\vueApp>cd demo-app
② Execute the command to check that the project starts successfully
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. Adjust the directory structure
(1) Delete unnecessary code in App.vue and leave a root tag
<template>
<div id="app">
<!-- 路由的出口 -->
<router-view />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style lang="less">
</style>
(2) Delete index.js in the Router folder, the default routing rules are also imported into components
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 路由表
const routes = []
const router = new VueRouter({
routes
})
export default router
(3) Go to the views folder and components folder and delete the default vue files
(4) Go to the assets folder, delete the default logo picture, and put our own picture
(5) Under src, create a new utils folder, where tools are stored
(6) Under src, create a new styles folder, which is where our styles are placed
We create a new base.less file here, write some basic common styles, and then come to main.js to import this style
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. Import icon material
iconfont description
Introduction: iconfont - domestic vector icon library with powerful functions and rich icon content, providing vector icon download, online storage, format conversion and other functions.
Official website: https://www.iconfont.cn/
Import Step Description
(1) Log in to the iconfont website, use the exported SVG icon in my project to upload to iconfont, and download the corresponding css.
(2) Add icon.css file in the styles folder. The downloaded css of iconfont is copied to 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) Import icon.less into the global style configuration index.less
// 全局样式
// 加载图标样式
@import './icon.less';
(4) Test, test whether the icon is normal in 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) Import the corresponding image resources required in the project into the assets directory for page layout
(6) Replace the favicon.ico icon in the public and use your own
4. Introduce the Vant component library
vant official website
Vant2 Chinese document address: https://vant-contrib.gitee.io/vant/v2/#/zh-CN/
Integrate vant: install via npm
When using Vant in an existing project, it npmcan yarnbe installed via or :
# Vue 3 项目，安装最新版 Vant：
npm i vant -S
# Vue 2 项目，安装 Vant 2：
npm i vant@latest-v2 -S
Description of vant import
-
Global import:
-
- Advantages: easy to use, as long as you import vant in main.js, you can directly use vant components anywhere in this project
- Disadvantages: Whether used or unused things will be imported into the project, which will cause the project to become larger
- If the project needs to consider performance optimization, then you must not use the global import method
-
Import on demand:
-
- Advantages: import on demand, then when the project is packaged, it will take out and package the used things separately according to the things you use, so that there will be no waste in volume, and the speed of opening the webpage will be relatively faster
- Disadvantages: It is not conducive to development, and it is more troublesome to write for development
Automatically import components on demand (recommended)
- Download a plugin first: babel-plugin-import
- babel-plugin-import is a babel plug-in, which will automatically convert the wording of import into an on-demand import method during the compilation process.
# 安装插件
npm i babel-plugin-import -D
- Then go to the root directory of the project, find the babel.config.js file, and add the following configuration
// 在.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']
]
};
Then you can directly import the Vant component in the code, and the plug-in will automatically convert the code into the on-demand import form in the second method
import {
Button } from 'vant';
- Go to the src directory, create a new folder called utils, this folder represents the meaning of tools, and put all the tools needed in development into this folder in the future, for example, vant is also a tool, so put it in this folder
- Therefore, in the utils folder, create a new vant.js, and then write the code for automatically importing vant on demand into it.
- Then come to main.js and import this vant.js
- Finally, the debugging is completed, remember to delete the redundant test code and files
Vant test import step process
(1) Install Vant through npm and execute it npm i vant@latest-v2 -S. The project here is vue2.x version. Just install vant2 and the installation is successful.
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) Global import in main.js: It supports importing all components at once. Importing all components will increase the size of the code package, so this approach is not recommended.
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
(3) To test the effect, use the vant component in App.vue to verify whether it is valid.
<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>
Note: run error after installing vant
Here, I installed the latest version of vant by mistake, resulting in incompatibility
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
After installing vant 3 or above, the introduction of the vant component library in vue2 does not take effect, and an error is reported:
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 vantAfter uninstalling , reinstall vant 2 .
5. Mobile terminal REM adaptation
Rem layout adaptation
Styles in Vant use by default pxas units. If you need to use remunits for adaptation, the following two tools are recommended:
- postcss-pxtorem is a PostCSS plugin for converting px units to rem units
- lib-flexible is used to set the rem benchmark value
Next, we configure these two tools into the project to complete the rem adaptation.
review rem unit
- rem is a transformable unit that changes according to the size of the font-size of the html tag
- Specifically, what is the font-size of html, then 1rem is how many pixels
- For example: if I set the font-size of html to 28. Then 1rem is 28px
Introduction to flexible plugin
-
Because the unit of rem changes according to the font size of html, how can the font size of html be changed?
-
Either we write media queries ourselves, and set different font sizes for html according to different screen widths, but this is more troublesome, because there are so many screens on the mobile terminal, and we are too tired to vomit blood if we write media queries ourselves, so we can use other people’s written ones Plug-in, automatically set the font size of html according to the screen size
-
flexible is a plug-in that can automatically set the html font size according to the screen
-
- Features: The screen width will be divided into 10 equal parts, so the html font size is 1/10 of the screen width, for example, for a 375 wide screen, the html font size is 37.5, so if it is 10rem, it will fill the screen
Use lib-flexible to dynamically set the rem reference value (font size of html tags):
(1) npm installation
#yarn add amfe-flexible
npm i amfe-flexible
(2) main.jsLoad and execute the module in
// 导入flexible
import 'amfe-flexible'
(3) Test, switch between different mobile phone device sizes in the browser, and check the changes font-sizein
Introduction to postcss
-
It is a post-processing css plug-in: process the css we wrote when the project is packaged after writing
-
- It has a variety of plug-ins: for example, there is autoprefix, which can automatically add the browser's identification prefix to the code you wrote that has compatibility issues when the project is packaged after writing
- transfrom: Write transfrom directly in the code, as long as you use the postcss-autoprefix plug-in, it can automatically generate -webkit-transform for you when packaging: this form -moz-transform
- postcss-pxtorem：
-
-
- Our mobile unit uses rem, and the graphic unit that the artist gives us is pixel, that is, px, so if we want to use rem unit, we have to calculate the pixel of the artist into rem, which is very troublesome
- This plugin allows us to continue to use px as the unit. Through this plugin, it will automatically change px to rem when packaging
-
-
less, sass, called preprocessing css, is processed when the page is opened, for example, parsing less variables and syntax into ordinary css syntax
Use postcss-pxtorem to convert px to rem
(1) npm install
#yarn add postcss-pxtorem
#-D是 --save-dev的缩写
npm install postcss-pxtorem -D
(2) Create a file in the root directory of the project A basic PostCSS sample configuration is provided below, which can be modified according to project requirements on the basis of this configuration..postcssrc.js
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 8']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
(3) After the configuration is complete, restart the service. Refresh the browser, inspect the style of the element to see if it converts px to rem.
About .postcssrc.jsconfiguration files
.postcssrc.jsis the configuration file for PostCSS.- Currently PostCSS already has more than 200 plugins with different functions. Developers can also develop their own PostCSS plug-ins according to the needs of the project. PostCSS is generally not used alone, but integrated with existing build tools.
- Vue CLI integrates PostCSS by default, and the autoprefixer plugin is enabled by default.
- Vue CLI uses PostCSS internally.
- You can configure PostCSS via .postcssrc or any configuration source supported by postcss-load-config. You can also configure postcss-loader through css.loaderOptions.postcss in vue.config.js.
- We enable autoprefixer by default. If you want to configure the target browsers, you can use the browserslist field of package.json.
6. Package request module
Like the previous project, here we still use axios as the request library in our project. For the convenience of use, we encapsulate it as a request module, which can be loaded directly when needed.
1. Install axios
npm i axios
2. Create src/utils/request.js
/**
* 封装 axios 请求模块
*/
import axios from "axios"
const request = axios.create({
baseURL: "http://localhost:8080/" // 基础路径
})
export default request
3. How to use
Method 1 (simple and convenient, but not conducive to interface maintenance): We can mount the request object to the Vue.prototype prototype object, and then directly access it through this.xxx in the
component Encapsulated into each independent functional function, loaded and called when needed, this approach is more convenient for interface management and maintenance