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
