当前位置: 首页 > news >正文

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

http://www.taodudu.cc/news/show-6110207.html

相关文章:

  • vite和webpack的区别
  • ARM cache 结构与访问方式
  • app提示已到期_有了这个App的提醒,再也不用担心商品什么时候过期啦
  • Matlab App Designer编译打包exe后读取文件路径问题
  • App断网提醒设计
  • 到站提醒APP应用 隐私声明
  • 精品基于Uniapp+Springboot实现的患者服药提醒APP
  • “日历提醒app”程序说明文档
  • 地铁到站提醒APP
  • 数学 {n次方根,根号,平方根}
  • 万能Markdown数学公式
  • Java中开根号,你还记得吗
  • 【数学】-1的根号二次方等于多少?
  • 数据库——关系模型之关系演算(元组演算与域演算)
  • 南航计算机科学与技术学院院徽,南京航空航天大学计算机科学与技术学院简介...
  • RSA2
  • RSA C语言实现
  • 业务中继承关系研究(数据库)
  • 三峡大学计算机与信息学院王,周欢,三峡大学 计算机与信息学院
  • 信息安全-RSA
  • RSA--------------
  • RSA实践
  • hwui简介
  • 信息安全与管理2002_李付贵
  • 江苏大学的计算机,毛启容-江苏大学计算机科学与通信工程学院
  • 河海大学计算机与信息科学,刘凡 - 河海大学 - 计算机与信息学院
  • 杭电操作系统实验三--- 实现模拟shell(arm架构华为云)
  • 信安实验-RSA(备课)
  • 输入法半角和全角的快捷转换_搜狗输入法经常用到的冷门小技巧,复制文章空白行取消方法...
  • iThenticate查重系统的使用及如何去除参考文献