Vue+Vite项目初建(axios+Unocss+iconify)

一. 创建项目

   npx --package @vue/cli vue
  项目乐成启动后，进入http://localhost:3200，即可进入创建好的页面(假设启动端口为3200)
二. 测试网络通讯模块

假设有本地服务器地点localhost:8000提供接口服务，接口为localhost:8000/token，修改代码
  

1. <script setup>
3. import {ref} from 'vue'
4. import axios from 'axios'
5. import qs from 'qs'
6. import 'unocss'
8. defineProps({
9.   msg: String,
10. })
12. function clickTest() {
13.   console.log("按钮点击")
15.   // var axios = require('axios');
16.   var data = qs.stringify({
17.     'username': 'hahaha',
18.     'password': '123456'
19.   });
20.   var config = {
21.     method: 'post',
22.     url: 'http://localhost:8000/token',
23.     headers: {
24.       'Access-Control-Allow-Credentials': 'True',
25.       'Access-Control-Allow-Origin': '*/*'
26.     },
27.     data: data
28.   };
30.   axios(config)
31.       .then(function (response) {
32.         console.log(JSON.stringify(response.data));
33.       })
34.       .catch(function (error) {
35.         console.log(error);
36.       });
37. }
39. const count = ref(0)
40. </script>
42. <template>
43.   <h1>{{ msg }}</h1>
44.   <button v-on:click="clickTest">测试</button>
45.   <p>
46.     Check out
47.     <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
48.     >create-vue</a
49.     >, the official Vue + Vite starter
50.   </p>
51.   <p>
52.     Install
53.     <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
54.     in your IDE for a better DX
55.   </p>
56.   <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
57. </template>
59. <style scoped>
60. .read-the-docs {
61.   color: #888;
62. }
63. </style>

复制代码

   实行代码，如果后端服务器实行正常，就会有相应的返回值
  

  三. 集成、测试UnoCSS

1. 安装

   npm install -D unocss
  2. 集成

   修改 vite.config.js

1. import UnoCSS from 'unocss/vite'

复制代码

   新建 uno.config.js

1. import {defineConfig, presetUno, presetIcons, presetAttributify} from 'unocss'
2. import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'
4. export default defineConfig({
5.     presets: [
6.         presetUno(), // 添加 UnoCSS 的默认样式预设
7.         presetAttributify(),
8.         presetIcons({
9.             warn: true,
10.             prefix: ['i-'],
11.             extraProperties: {
12.                 display: 'inline-block',
13.             },
14.             collections: {
15.                 me: FileSystemIconLoader('./src/assets/isme'),
16.                 fe: FileSystemIconLoader('./src/assets/feather'),
17.             },
18.         })
19.     ],
20. })

复制代码

以上代码用于配置unocss到体系中，注意“collections”中的配置是自定义图标的路径
  3. 显示

1.   <div class="text-center text-red-500">
2.     Hello World!
3.   </div>

复制代码

显示出以上效果阐明unocss配置乐成。
4. 图标()

1.   <div m2 f-c hover="op80">
2.     <a i-carbon-logo-github text-3xl text-black href="https://github.com/chris-zhu" target="_blank" />
3.     <div i-carbon:3d-cursor text-3xl text-blue />
4.     <button text-green text-3xl class="i-carbon-sun" />
5.     <i class="i-me:gitee mr-12 cursor-pointer"/> // 自定义图标
6.   </div>
7.   <div class="i-carbon:content-view w-1em h-1em"></div>
8.   <div class="i-carbon:humidity w-1em h-1em"></div>
10.   <div class="card">
11.     <button type="button" @click="count++">count is {{ count }}</button>
12.     <button v-on:click="clickTest">测试</button>
13.     <p>
14.       Edit
15.       <code>components/HelloWorld.vue</code> to test HMR
16.     </p>
17.   </div>

复制代码

终极显示效果，基本完成前期开发配置需要

3. 在线图标网站

1. npm i @iconify/json

复制代码

  Open Source Icon Sets - Iconify
  

四. 断点调试

   WebStorm + Vite + Vue 断点调试（新手版） - 掘金 (juejin.cn) 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。