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实战相关推荐

Figma 插件开发 - Vite 环境搭建
最近工作主要和 Figma 插件打交道,梳理一些踩坑的经验~ 开始官方的起始例子:www.figma.com/plugin-docs- 按步骤将插件文件保存到本地即可,调试时可以右键唤起插件,可以关 ...
vue3.0环境搭建
安装最新版nodejs Node.jshttps://nodejs.org/zh-cn/安装过程非常傻瓜,一直下一步到完成 -------------------------------------- ...
逆向工具之脱壳神器反射大师（附脱壳环境搭建、脱壳实战）
相信点击进入这篇博客的小伙伴都知道并且搞过App逆向,不过有时候会遇到各种加壳的App,不让你反编译.但是道高一尺,魔高一丈,有正向加密,就有逆向解密.此篇博客博主带大家搭建脱壳环境,并且手动脱一 ...
① Vue3开发环境搭建
一.安装node.js 在node.js官网下载安装最新版的:https://nodejs.org/zh-cn/ 然后需要更换下载源为国内的 #设置为淘宝源 npm config set regist ...
Skywalking环境搭建及demo实战
在微服务应用非常广的今天,面临必要的问题一个大型的互联网项目,采用微服务的架构设计,可能保证整个项目的完整运营就需要几十上百个服务的互相协作,那如果某个服务突然宕机或出现死锁等bug,怎么办?这个时 ...
Vue 3 组件开发：搭建基于SpreadJS的表格编辑系统（环境搭建）
Vue是一套用于构建用户界面的渐进式框架,与其它大型 JS 框架不同,Vue 被设计为可以自底向上逐层应用,更易上手,还便于与第三方库或既有项目整合,因此,Vue完全能够为复杂的单页应用提供驱动. 2 ...
vue3.0 php,使用Vue3.0收获的知识点（一）
前端发展百花放,一技未熟百技出. 茫然不知何下手,关注小编胜百书. 近期工作感觉很忙,都没有多少时间去写文章,今天这篇文章主要是将自己前期学习Vue3.0时候整理的一些笔记内容进行了汇总,通过对本文的 ...
AndroidStudio-NDK-r14b开发环境搭建
最近由于对音视频非常感兴趣,想学习NDK的开发.于是在各种资料轰炸下算是了解了点开发基础.所以想着分享出来也算是这段时间学习的小总结.这篇为环境搭建篇章,实战的NDK项目就是音视频的编解码. 一.环 ...
手把手教你从0到1搭建vue3+ts+vite+element-plus简易后台管理系统
准备工作首先请确保你的node.js版本>=12.0.0 因为vite的兼容性,Vite 需要 Node.js 版本 >= 12.0.0. 如果你不知道你的node.js的版本是多少,请 ...

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、启动项目

vue3+vite环境搭建 vue3+vite实战相关推荐

最新文章

热门文章