website·Indexed 30 days ago
https://mamba-in.github.io/cloud-notes/Documentation for Mamba-Forever, a project based on Vue 3.0 and Vite. It includes guides on routing, component registration, styling with Less and Tailwind CSS 2.5.0+, external module integration, and linting configurations using CommitLint.
The project integrates several tools to ensure code consistency, reduce bugs, and improve maintainability. The primary tools used are:
pnpm for dependency management. If pnpm is not installed, use one of the following commands to install it globally.# Install pnpm globally via npm
npm install -g pnpm
# Or install via Homebrew on Mac
brew install pnpm
# Verify installation
pnpm -vTo start a new project with Mamba-Forever, you must first install the nk-cli globally.
Critical Constraint: Ensure that the directory where the code is stored and all its parent directories contain no Chinese characters or spaces, otherwise the project will fail to start after installing dependencies.
# Install CLI
pnpm add -g nk-cli
# Create project
kk create <app-name>
# Or use: nk-cli create <app-name>
# Run project
cd <app-name>
pnpm serveCurated educational resources for frontend and security:
useGo hook provided by the project.import { useGo } from '/@/hooks/web/usePage';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const go = useGo();
// Navigate to a specific page enum or path
go(PageEnum.Home);
return {};
},
});src/router/routes. Files located in src/router/routes/modules are treated as route modules and are automatically registered by the system without requiring manual imports. Each module should export a default object of type AppRouteModule.import type { AppRouteModule } from '/@/router/types';
import { LAYOUT } from '/@/router/constant';
const dashboard: AppRouteModule = {
path: '/about',
name: 'About',
component: LAYOUT,
redirect: '/about/index',
meta: {
hideChildrenInMenu: true,
title: 'About',
orderNo: 100000,
},
children: [
{
path: 'index',
name: 'AboutPage',
component: () => import('/@/views/sys/about/index.vue'),
meta: {
title: 'About',
icon: 'simple-icons:about-dot-me',
hideMenu: true,
},
},
],
};
export default dashboard;The project uses commitlint to enforce a standardized Git commit message format based on the Angular/Vue convention. Commit messages should start with one of the following types to categorize the change:
feat: A new featurefix: A bug fixstyle: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)perf: A code change that improves performancerefactor: A code change that neither fixes a bug nor adds a featurerevert: Reverts a previous committest: Adding missing tests or correcting existing testsdocs: Documentation only changeschore: Updates to build tasks, package manager configs, etc.workflow: Improvements to workflowsci: CI configuration changesmod: Modifications that do not fit other categorieswip: Work in progresstypes: Type definition changesTo develop with Cloud Notes, ensure the following software is installed on your local machine:
.svg files in the src/assets/icons directory. You can then render these icons using either the SvgIcon component or the generic Icon component.<template>
<!-- Method 1: Using SvgIcon component directly -->
<SvgIcon name="test" />
<!-- Method 2: Using Icon component with |svg suffix -->
<Icon name="test|svg" />
</template>
<script>
import { defineComponent } from 'vue';
import { SvgIcon, Icon } from '/@/components/Icon';
export default defineComponent({
components: { SvgIcon, Icon },
});
</script>A collection of repositories for improving programming skills and exploring creative frontend projects:
To improve development efficiency and ensure consistent code formatting, the following VS Code extensions are recommended:
.env file syntax highlighting.