# hejiu45Zgkj

**Repository Path**: hejiu45/hejiu45-zgkj

## Basic Information

- **Project Name**: hejiu45Zgkj
- **Description**: 给我的朋友做的官网
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-03-16
- **Last Updated**: 2023-03-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 新疆卓观科技

## README

## 卓观科技

### 项目介绍:

项目是由Joy提出研发，项目前段所使用的的部分技术有Vue3、Axios、Naive UI、Vue-router、Pinia等等，卓观科技官网下的一个产品集合网站，整个项目的由鹤酒操刀开发，在公司业务需求的需要下这个网站便就此诞生了。

### 项目需求：

#### 页面：

##### 首页、产品页、招商加盟、关于我们

### 依赖下载:

[Vue3](https://cn.vuejs.org/)、[Axios](https://www.axios-http.cn/docs/intro)、[Naive UI](https://www.naiveui.com/zh-CN/dark/docs/installation)、[Vue-router](https://router.vuejs.org/zh/installation.html)、[Xicons](https://www.xicons.org/#/zh-CN)、[Pinia]()

```shell
# npm下载axios依赖
npm install axios

# npm下载Naive UI
npm i -D naive-ui
# 字体下载
npm i -D vfonts
# 图标下载
# 适用于 vue3
npm i -D @vicons/fluent
npm i -D @vicons/ionicons4
npm i -D @vicons/ionicons5
npm i -D @vicons/antd
npm i -D @vicons/material
# font awesome
npm i -D @vicons/fa 
npm i -D @vicons/tabler
npm i -D @vicons/carbon
# 适用于 vue2
npm i -D @v2icons/fluent
npm i -D @v2icons/ionicons4
npm i -D @v2icons/ionicons5
npm i -D @v2icons/antd
npm i -D @v2icons/material
npm i -D @v2icons/fa # font awesome
npm i -D @v2icons/tabler
npm i -D @v2icons/carbon

# 使用 SVG
npm i -D @sicons/fluent
npm i -D @sicons/ionicons4
npm i -D @sicons/ionicons5
npm i -D @sicons/antd
npm i -D @sicons/material
npm i -D @sicons/fa # font awesome
npm i -D @sicons/tabler
npm i -D @sicons/carbon

# 图标的安装工具
npm i -D @ricons/utils  # react
npm i -D @vicons/utils  # vue3
npm i -D @v2icons/utils # vue2

# npm下载Vue-router
npm install vue-router@4

# pinia状态安装
npm install pinia
```

### 图标在Vue3中的使用：

```vue
<script>
  import { Money16Regular } from '@vicons/fluent'
  // or
  import Money16Regular from '@vicons/fluent/Money16Regular'

  // 你可以直接使用渲染为 SVG 的组件
  // 或者把它包裹在 @vicons/utils 提供的 Icon 组件中

  import { Icon } from '@vicons/utils'

  export default {
    components: {
      Icon,
      Money16Regular
    }
  }
</script>

<template>
  <Icon>
    <Money16Regular />
  </Icon>
</template>
```

### main.js的配置：

```js
import { createApp } from "vue";
import App from "./App.vue";

// 应用全局，全局配置
// 引入vue-router
import Router from "@/router";
// 引入pinia
import { createPinia } from "pinia";

// import * as echarts from "echarts";

// 引入axios
import axios from "axios";

// 使用use方法导入到全局配置
const app = createApp(App)
  .use(Router)
  .use(createPinia())
  // .use(axios)
  .mount("#app");
```

### Vue-router的配置：

```js
// 引入vuerouter的相关包
import { createWebHashHistory, createRouter } from "vue-router";

// 引入要使用的相关vue组件文件
import Login from "../components/Login.vue";

// 创建实例化对象
const history = createWebHashHistory();
const router = createRouter({
  history,
  routes: [
    {
      name: "登录页",
      path: "/login",
      component: Login,
    },
    {
      name: "注册页",
      path: "/register",
      component: Register,
    },
    {
      name: "主体页",
      path: "/main",
      redirect: "/gz",
      component: Main,
      children: [
        {
          name: "里程分析",
          path: "/all_orders",
          component: All_orders,
        },
      ],
    },
  ],
});

// 把router路径暴露出去
export default router;
```