ToB企服应用市场:ToB评测及商务社交产业平台

标题: Vue+Vite项目初建(axios+Unocss+iconify) [打印本页]
作者: 没腿的鸟    时间: 2024-8-2 22:42
标题: 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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4