实战"/>
vue3+vite环境搭建 vue3+vite实战
目录
- 1、安装 vue-cli 3
- 2、安装vite
- 3、安装成功后**package.json**中会添加
- 4、通过@vitejs/plugin-vue插件来支持Vue
- 5、安装路由
- 6、在入口文件里初始化vue实例，并引入所需要的插件
- 7、在**index.html**中载入main.js
- 8、App.vue
- 9、路由配置
- 10、vite.config.js
- 11、启动项目
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
更多推荐
vue3+vite环境搭建 vue3+vite实战
发布评论