Vite+Vue3+Element-plus+Axios+Router前端框架搭建 1

记录自己的学习路程，每天再进步一点点

1.打开VSCode

2.terminal终端输入命令npm init @vitejs/app

  vite.config.js内容如下

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

const path = require("path");



// https://vitejs.dev/config/

export default defineConfig({



  alias: {

    // 配置路径别名

    '@': path.resolve(__dirname, 'src'),

    'view': path.resolve(__dirname, 'src/view'),

    'com': path.resolve(__dirname, 'src/components'),

    'api': path.resolve(__dirname, 'src/api'),

    'utils': path.resolve(__dirname, 'src/utils'),

  },

  plugins: [vue()],

   // hostname: '0.0.0.0',

  // port: 8090,

  // 是否自动在浏览器打开

  // open: true,

  // 是否开启 https

  https: false,

  // 服务端渲染

  ssr: false,

  /**

   * 在生产中服务时的基本公共路径。

   * @default '/'

   */

   base: './',

   /**

   * 与“根”相关的目录，构建输出将放在其中。如果目录存在，它将在构建之前被删除。

   * @default 'dist'

   */

  outDir: 'dist',

  server: {

    proxy: {

      '/api': {

        target: 'http://192.168.163.154:8088/',

        changeOrigin: true,

        ws: true,

        pathRewrite: {

          "^/api": ""

        }

      },

    },

    }
})

3.配置路由(下载router4版本)

npm install vue-router@4 -s

4.在src文件夹下面创建文件夹views/login，在login文件夹下面创建login.vue

5.编辑src/router/index.js，内容如下：

目录截图如下

 6.在配置文件main.js中添加router的配置，如图