vite搭建vue3项目

参考视频

1.使用npm搭建vite项目,会自动搭建vue3项目

javascript 复制代码
npm create vite@latest
yarn create vite

2.手动搭建vue3项目

  • 创建一个项目名称的文件夹
  • 执行命令:npm init -y 快速的创建一个默认的包信息
  • 安装vite: npm i vite -D
    -D开发环境的依赖
  • 安装vue,现在默认是vue3. 执行命令: npm i vue -D/-S都可以
  • 创建index.html文件,src="入口js文件" ,添加id="app"挂载点
javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="./src/main.js"></script>
</body>
</html>
  • 创建src目录下的js入口文件main.js
  • 创建App.vue组件,并定义路由出口
javascript 复制代码
<template>
    <router-view /> <!--  定义路由出口 -->
</template>
  • 在main.js文件中引入App.vue文件
javascript 复制代码
import { createApp } from "vue";
import App from './App.vue';
const app = createApp(App);
app.mount('#app');
  • 由于html文件中不能跑App.vue文件,需要安装一个插件:执行命令 npm i @vitejs/plugin-vue -D ,如果npm run dev不报错不需要安装

  • 配置vite.config.js文件,如果npm run dev不报错不需要配置以下代码

javascript 复制代码
import { defineConfig } from "vite";
import Vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [Vue()]
})

3.在vite+vue3项目中使用vue-router和pinia

  • 安装vue-router,执行命令: npm i vue-router -D
  • src目录下创建router.js文件
javascript 复制代码
import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
    routes: [],
    history: createWebHistory()
})

export default router;

然后需要在入口js文件中挂载路由

javascript 复制代码
入口main.js文件中
import { createApp } from "vue";
import App from './App.vue';
import router from './modules/router.js'; // 导入路由
const app = createApp(App);
app.use(router); // ----挂载路由----
app.mount('#app');
  • 安装pinia 执行命令: npm i pinia -D
  • 创建pinia.js文件
kotlin 复制代码
import { createPinia } from "pinia";
const pinia = createPinia();
export default pinia;

还需要在入口main.js文件中挂载使用pinia

javascript 复制代码
import { createApp } from "vue";
import App from './App.vue';
import router from './modules/router.js';
import pinia from './modules/pinia.js'; // 引入pinia

const app = createApp(App);
app.use(router);
app.use(pinia); // ------挂载pinia------
app.mount('#app');
  • 使用pinia
    先创建一个store/counter.js文件
javascript 复制代码
import { defineStore } from "pinia";

// defineStore第一个参数是它的id,
export const useCounterStore = defineStore('counter', {
    state() {
        return {
            num: 1, // 初始值为1
        }
    },
    actions: {
        // 只有actions了
        inc() {
            this.num++;
        }
    }
})

然后在需要使用的组件里使用

javascript 复制代码
<script setup>
import { useCounterStore } from "../stores/counter.js";
const counter = useCounterStore();

</script>

<template>
    <div @click="counter.inc()">我是首页 {{ counter.num }}</div>
</template>

4.vite+vue3中使用按需加载

  • 为了解决在一个文件中引入多个组件,安装插件:unplugin-vue-components
javascript 复制代码
npm i unplugin-vue-components -D

在vite.config.js文件中配置插件

javascript 复制代码
import { defineConfig } from "vite";
import Vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite'; // 导入插件

export default defineConfig({
    plugins: [Vue(), Components()] // -----挂载插件------
})

在需要使用的组件中:

javascript 复制代码
<script setup>
// 安装了unplugin-vue-components插件后,components中的组件可以不用引入直接使用
// import Common from "../components/Common.vue";
</script>

<template>
    我是about页面
    <Common />
</template>
  • 在element-plus中使用按需加载
    在vite.config.js中配置
javascript 复制代码
import { defineConfig } from "vite";
import Vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver, NaiveUiResolver } from 'unplugin-vue-components/resolvers'; // 配置element-plus, naiveUi

export default defineConfig({
    plugins: [Vue(), Components({
        resolvers: [ElementPlusResolver(), NaiveUiResolver()]
    })]
})

还需再安装element-plus:执行命令: npm i element-plus -D然后就可以再组件中使用点击一下 element-plusUI了

javascript 复制代码
<el-button>element-plus按钮</el-button>

如果上面配置了NaiveUiResolver,则需要安装naive-ui,执行命令:npm i naive-ui -D

在组件中使用naive-ui会自动寻找依赖,不需要配置这些组件库直接用就好了

javascript 复制代码
<n-button>naive-ui按钮</n-button>
  • 安装unplugin-auto-import插件可以不用import { ref } from 'vue';
javascript 复制代码
npm i -D unplugin-auto-import

在vite.config.js文件中挂载插件

javascript 复制代码
import { defineConfig } from "vite";
import Vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import AutoImport from "unplugin-auto-import/vite";
import { ElementPlusResolver, NaiveUiResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
    plugins: [
        Vue(),
        AutoImport({
            imports: ['vue', 'vue-router', 'pinia']
        }), // -------挂载插件-------需要imports值
        Components({
        resolvers: [ElementPlusResolver(), NaiveUiResolver()]
    })]
})

在组件中使用:

javascript 复制代码
<script setup>
// import { ref } from "vue"; // 安装了插件后可以不用在导入ref
const counter = ref(100);
const inc = () => {
    counter.value ++;
}
</script>

<template>
    <div @click="inc">Common组件{{counter}}</div>
</template>
相关推荐
「、皓子~18 分钟前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了21 分钟前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_23 分钟前
Ajax 入门
前端·javascript·ajax
京东零售技术38 分钟前
京东小程序JS API仓颉改造实践
前端
老A技术联盟1 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游1 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟1 小时前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor1 小时前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
FogLetter1 小时前
初识图片懒加载:让网页像"懒人"一样聪明加载
前端·javascript