Vue项目简单上手

Vue项目简单上手

1. 创建新项目npm init vite [项目名] -- --template vue
2. 进入项目目录，安装sudo npm install --save-dev @arco-design/web-vue
3. 完整引入

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');

4. 安装vue-routersudo npm install vue-router@4
5. 创建 /src/router/index.js

import { createRouter, createWebHistory } from "vue-router";
import HelloWorld from "../components/HelloWorld.vue"
const routes = [{
    path: "/",
    component: HelloWorld,
    meta: {
        title: "前端学习"
    }
}]
const router = createRouter({
    history: createWebHistory(),
    routes
})
router.beforeEach((to, from, next) => {
    if (to.meta.title) {
        // console.log(to.meta.title)
        document.title = to.meta.title
    }
    next()
})
export default router

6. 加载路由/src/main.js

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

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

7. router-view的使用 APP.vue

<script setup>
</script>

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

8. 设置vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  base:'/.../', //设置根目录

  plugins: [vue()],

  server: {
    proxy: {
      // 将请求地址中的 /aaa 代理到 bbb
      '/aaa/': {
        target: 'bbb',
        changeOrigin: true, }
    }
  }
})