【从零到一手撕脚手架 | 第一节】配置基础项目结构 Vite + Vue3 初始化项目配置项目结构 Vite + Vue

配置基础项目结构 Vite + Vue3 初始化项目

项目使用的依赖：

使用 Vite 进行项目构建
使用 Sass 编写样式
对 pinia，vue-router，axios 进行模块化封装
使用 ElementPlus 组件库

pnpm install axios pinia pinia-plugin-persistedstate vue vue-router nprogress

# 本项目使用 element plus 大家可以根据个人习惯选择自己常用的组件库
pnpm install element-plus @element-plus/icons-vue

下面简单介绍一下这些依赖的作用，大家根据个人习惯选择安装即可。

axios：vue官方推荐http请求库
pinia：vue官方推荐状态管理工具
pinia-plugin-persistedstate：pinia数据持久化插件
vue-router：路由管理工具
sass：css预处理
element-plus：亲民老牌组件库
nprogres：简洁美观的进度加载条组件

首先应该搭建一个基础的Vue项目结构

	|- src/		# 项目资源
		|- assets/	# 经过打包的静态资源
		|- components/	# 通用组件
		|- styles/	# 项目通用样式
		|- utils/	# 工具函数
			|- http/axios/ # axios封装
		|- views/	# 页面组件
		|- App.vue  # 项目的主组件
		|- main.js	# 入口js文件
	| - index.html # 入口html文件

/src/App.vue

编写项目的主组件

<template>
   <!-- 一般vue项目都会使用vue-router -->
   <!-- 所以我们这里直接写一个 router-view -->
   <router-view></router-view>
</template>
<script setup></script>

/src/main.js

引入样式文件，挂载Vue

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from '@/router';
import pinia from "@/store/index.js";
import '@/styles/main.scss'
const app = createApp(App);
app.use(ElementPlus)
app.use(pinia)
app.use(router);
app.mount('#app');

vue-router

然后我们需要进行对路由的配置
这里路径中用到了 @ 是我们配置的别名，指向了src，在后面会讲解到如何配置

/src/router/index.js

import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

// 配置路由
const routes = [{
    path: '/', name: 'Home', component: () => import('@/views/home/HelloWorld.vue'), meta: {}, children: [],
}, {
    path: '/Index', name: 'Index', component: () => import('@/views/index/HelloWorld.vue'), meta: {}, children: [],
}];

const router = createRouter({
    history: createWebHashHistory(), routes,
});

router.beforeEach(async (_to, _from, next) => {
    NProgress.start();
    next()
});

router.afterEach((_to) => {
    NProgress.done();
});

export default router;

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    }
  }
})

axios

/src/utils/http/index.js

import axios from 'axios';

const service = axios.create({
    baseURL: '/',
    timeout: 15000,
});

// axios实例拦截请求
service.interceptors.request.use(
    (config) => {
        return config;
    },
    (error) => {
        return Promise.reject(error);
    }
);

// axios实例拦截响应
service.interceptors.response.use(
    (response) => {
    },
    (error) => {
    }
);

export default service

引入sass，使用sass变量

安装依赖

pnpm install -D sass

vite内置对sass语法的解析，暂时不需要安装sass-loader.

我们可以单独新建一个存放变量的sass文件。例如_reset.scss

$theme-color: green;

全局使用

在vite中，我们可以在vite.config.js文件的css选项中配置。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/_reset.scss";`,
      },
    },
  },
})

组件使用

<style lang="scss" scoped>
.card{
  background-color: $theme-color;
}
</style>