vite 项目工程化详解

使用vite进行项目工程化

npm init @vitejs/app  # npm init vite@latest
cd vite-project
npm install
npm run dev

• vite项目的入口文件是index.html

组件中使用scss

安装scss后即可使用：npm install sass --save-dev

src/styles/index.scss

div, p {
  border: 1px solid;
}

src/App.vue

<!-- 其他代码... -->
<style>
@import 'styles/index.scss';

/* 其他代码... */
</style>

配置目录别名

vite.config.js

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@styles': '/src/styles',
    }
  }
})

使用css-modules

项目中可直接使用

styles/test.module.scss

.moduleClass {
  color: yellow;
}

src/App.vue

<script setup>
import classes from '/src/styles/test.module.scss'
console.log(classes.moduleClass)
</script>

项目目录架构

├── src
│   ├── App.vue // 项目根组件，一级路由出口
│   ├── api // 接口请求
│   ├── assets // 静态资源
│   │   ├── icons // svg icon 图标
│   │   ├── images // image 图标。比如:xxx.png
│   │   └── logo.png // logo
│   ├── components // 通用的业务组件。比如：一个组件在多个页面中使用到
│   ├── constants // 常量
│   ├── directives // 自定义指令
│   ├── libs // 通用组件，可用于构建中台物料库或通用组件库，不包含业务的
│   ├── main.js // 入口文件
│   ├── permission.js // 页面权限控制中心
│   ├── router // 路由
│   │   ├── index.js // 路由处理中心
│   │   └── modules // 路由模块
│   │       ├── mobile-routes.js // 移动端路由
│   │       └── pc-routes.js // PC 端路由
│   ├── store // 全局状态
│   │   ├── getters.js // 全局状态访问处理
│   │   ├── index.js // 全局状态中心
│   │   └── modules // 状态子模块
│   ├── styles // 全局样式
│   │   └── index.scss // 全局通用的样式处理
│   ├── utils // 工具模块
│   ├── vendor // 外部供应资源。比如：人类行为认证
│   └── views // 页面组件。与 components 的区别在于：此处组件对应路由表，以页面的形式展示
│       └── layout // 用于 PC 端，分割一级路由和二级路由
│           ├── components // 该页面组件下的业务组件
│           └── index.vue // layout 组件
├── tailwind.config.js // wailwind css 配置文件，与 src 平级
└── vite.config.js // vite 配置文件，与 src 平级

安装Prettier