vite2+JavaScript+vue3创建配置router+

vite

不支持ie11

创建项目

npm init @vitejs/app

命名：

image.png

选择要创建的框架，这里选择vue

image.png

选择语言 这里用TypeScript或者javaScript都可以

image.png

这样一个vite2+vue3项目就创建完成了

image.png

cd 项目目录
npm install
npm run dev

成功启动，几乎是秒开

image.png image.png

配置路由

要4版本

npm install vue-router@4 -s

src/router/index.ts

import {createRouter,createWebHashHistory} from 'vue-router'

const router = createRouter({
    history: createWebHashHistory(),
    routes: [{
            path: "/",
            name: "index",
            component: () => import( "@/views/index/index"),
        },
    ]
})

export default router;

main.js

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

配置vuex

src/store/index.js

npm install vuex@next --save

import { createStore } from 'vuex'

// Create a new store instance.
const store = createStore({
  state : {
      count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
     actions: {},
    modules: {}
})
export default store

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App).use(router).use(store)
app.mount('#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'),
  },
  // 引入第三方的配置
  // optimizeDeps: {
  //   include: ["echarts", "axios", ]
  // },
  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://127.0.0.1:3000/',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/api": ""
        }
      },
    },
  }
})

axios

npm install axios -S