1、安装 vue-cli 3
yarn add vue-cli@next
2、安装vite
vue add vite
3、安装成功后package.json中会添加
"scripts": {
"vite": "node ./bin/vite"
}
"devDependencies": {
"vue-cli-plugin-vite": "~1.5.0"
}
把scripts里的serve 和 build 改成vite
"scripts": {
"serve": "vite",
"build": "vite build",
"lint": "vue-cli-service lint",
"vite": "node ./bin/vite"
},
4、通过@vitejs/plugin-vue插件来支持Vue
yarn add @vitejs/plugin-vue
5、安装路由
cnpm install --save vue-router@next
6、在入口文件里初始化vue实例，并引入所需要的插件
找到main.js文件，引入路由插件
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import axios from 'axios'
createApp(App).use(router).mount('#app')
7、在index.html中载入main.js
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title></title>
<style>
</style>
</head>
<body>
<div id="app">
<h1>正在加载中......</h1>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
8、App.vue
找到src底下的App.vue文件，此文件是项目的主组件，所有页面都是在App.vue下进行切换的。在App.vue中添加 ，用来承载路由组件
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
</style>
9、路由配置
在src底下新建文件夹和文件router/index.js，index.js里简单写下路由：
import {createRouter,createWebHistory} from 'vue-router'
const router = createRouter({
history:createWebHistory(),
routes:[
{
path: '/test2',
component: () => import("../components/test2.vue")
},
{
path: '/',
name:'home',
component: () => import("@/components/HelloWorld.vue")
},
]
})
export default router
10、vite.config.js
在项目最外层新建vite.config.js文件，简单的配置：
import { defineConfig } from "vite";
import { resolve } from "path";
import vue from '@vitejs/plugin-vue';
function pathResolve(dir) {
return resolve(__dirname, ".", dir);
}
export default defineConfig({
base: "",
plugins:[vue()],
// 配置文件别名
resolve: {
alias: {
"@": pathResolve('src'),
}
},
// 打包配置
build: {
target: 'modules',
outDir: 'dist', //指定输出路径
assetsDir: 'static', // 指定生成静态资源的存放路径
},
// 本地运行配置，及反向代理配置
server: {
cors: true, // 默认启用并允许任何源
open: true, // 在服务器启动时自动在浏览器中打开应用程序
proxy: {
'/api': {
target: 'http://192.168.0.2:8080',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})
11、启动项目
启动：yarn serve、npm run serve
打包：yarn build、npm run build
