从0搭建vue3+arco_desgin后台管理系统-zhanghaoran's blog

默认您有一定vue基础和已经安装好node（18.+版本）环境

一、使用vite创建项目

vite官网：https://cn.vitejs.dev/

npm create vite@latest

执行完上述命令后会出现如下内容：

PS D:> npm create vite@latest
Need to install the following packages:
create-vite@5.5.3
Ok to proceed? (y) y
// 你的项目名称
√ Project name: ... admin_server
// 上下键选择要使用的框架
√ Select a framework: » Vue
// 上下键选择要使用的语言
√ Select a variant: » JavaScript

Scaffolding project in D:\admin_server...

Done. Now run:

  cd admin_server
  npm install
  npm run dev

至此，一个vue3项目就被聪明的你创建出来了；只需安装依赖后就可以运行起来了。

二、删除默认文件

用你喜欢的编辑器打开项目

这步看个人，我比较喜欢纯净

删除/src/assets/vue.svg文件
删除/src/components/HelloWorld.vue文件
删除/src/style.css文件
修改/src/main.js文件中style.css的引用。
修改/src/App.vue文件为如下内容：
```
<template>
    zhanghaoran 666
</template>
```
此时页面中只看到zhanghaoran 666

三、安装基础依赖

此步骤安装vue项目最必不可少的依赖：vue-router、axios

(一)`vue-router`的安装配置

（个性化配置与使用请看下文：路由权限控制、路由自动收集..）

官网：https://router.vuejs.org/zh/

安装
```
npm install vue-router@4
```

配置router基础路由
在/src/目录下创建router/index.js文件；并进入以下配置：

 import { createWebHistory, createRouter } from "vue-router"


 const routes = [
     {
         path: '',
         name: 'home',
         component: () => import('../views/Home.vue'),
         meta: {
             title: 'Home'
         }
     },
 ]

 export default createRouter({
     history: createWebHistory(),
     routes
 })

在/src目录下创建views/Home.vue文件哦，并随意写内容

在main.js中引用注册

 import { createApp } from 'vue'
 import App from './App.vue'
 import Router from "./router"

 createApp(App)
     .use(Router)
     .mount('#app')

渲染使用

修改APP.vue为根组件

    <template>
        <router-view />
    </template>

测试一下views/Home.vue

    <template>
        Hello Home,看到我代表你已成功配置路由啦
    </template>

此时，在页面中即可看到：Hello Home,看到我代表你已成功配置路由啦
5. 导航链接与基础API使用

一种类似a标签的组件

<router-link to="/pages/about/about">跳转到about页面</router-link>

两个常用hooks

import {useRouter, useRoute} from "vue-router"

const router = useRouter()
const route = useRoute()

useRouter用于页面跳转

    // 跳转到about页面
    router.push('/about/)
    // 返回上一个页面
    router.back()
    // 重定向
    router.replace('/about')
    ...

useRoute用于获取路由信息

console.log(route.path)
console.log(route.params)
console.log(route.query)

(二)`axios`的安装配置使用

官网：https://axios-http.com/zh/docs/intro

安装
```
 npm install axios
```

封装配置

 import axios from "axios";

 const request = axios.create({
     baseURL: "http://api地址",
     timeout: 5000
 })
 
 // 请求拦截器
 request.interceptors.request
     .use(config => {
         config.headers.token = "token"
         return config
     }, err => Promise.reject(err))
     
 // 响应拦截器
 request.interceptors.response
     .use(response => {
         const res = response.data
         // 对不同响应码进行处理
         if (res.code !== 200) {
             return Promise.reject(new Error(res.msg))
         }
         return response.data
     }, err => Promise.reject(err))

 export default request

使用

 import request from "../utils/request.js";

 request.get("/list?page=1", )
     .then(res => {console.log(res)})
     .catch(err => console.log(err))
     .finally(() => {console.log("finally")})
     
 request.post("/add", {page: 1}, {
     headers: {
         "Content-Type": "application/json"
     }
 })
     .then(res => {console.log(res)})
     .catch(err => console.log(err))
     .finally(() => {console.log("finally")})

四、安装其它依赖与配置

jsx语法支持、scss语法支持

1. jsx语法支持

安装

npm i @vitejs/plugin-vue-jsx

在vite.config.js中配置

import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
    plugins: [
        vue(),
        vueJsx({}),
    ]
})

简单使用

import { defineComponent } from "vue";

export default defineComponent({
    setup() {
        return () => (
            <>
                <div>hello world</div>
            </>
        )
    }
})

2. scss语法支持

安装

npm i sass -D

直接使用

<template>
    <div class="home">
        <p>hello Home,看到我代表你已成功配置路由啦</p>
    </div>
</template>

<style scoped lang="scss">
.home {
    p {
        color: #f00;
    }
}
</style>

全局引用
在vite.config.js中配置：

export default defineConfig({
    ...
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@import "./src/assets/css/reset.scss";`,
            }
        }
    },
    ...
})

五、安装arco desgin

官网：https://arco.design/vue/docs/start

安装

npm install --save-dev @arco-design/web-vue

在main.js中完整引入

import { createApp } from 'vue'
import ArcoVue from '@arco-design/web-vue';
import App from './App.vue';
import '@arco-design/web-vue/dist/arco.css';

const app = createApp(App);
app.use(ArcoVue);
app.mount('#app');

按需引入

安装按需引入的依赖插件

npm i unplugin-vue-components -D
npm i unplugin-auto-import -D

在vite.config.js中配置

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite';
import {ArcoResolver} from 'unplugin-vue-components/resolvers';

export default defineConfig({
    plugins: [
        AutoImport({
            resolvers: [ArcoResolver()],
        }),
        Components({
            resolvers: [
                ArcoResolver({
                    sideEffect: true
                })
            ]
        }),
})

关于后台组件的封装，可以参考：https://blog.zhanghaoran.ren/article/html/FengZhuangHouTaiTongYongXingYeMianJiBianJiDanChuangShiXianSiLuYuGuoCheng.html

关于jsx语法的使用，可以参考：https://blog.zhanghaoran.ren/article/html/vue3-JSX%20ChaCaoShiYongZhiNan.html

2024.10.09日上午完成基础安装配置!

一、 使用vite创建项目

二、 删除默认文件

三、 安装基础依赖

(一)vue-router的安装配置

(二)axios的安装配置使用