开始

准备

• Node.js 和 Git -项目开发环境
• Vite - 熟悉 Vite 特性
• Vue3 - 熟悉 Vue 基础语法
• Es6+ - 熟悉 Es6 基本语法
• Vue-Router - 熟悉 Vue-Router 基本使用
• Element-Plus - Element-Plus Ui 基本使用

环境

• Node.js 版本18.x以上

拉取项目

github 拉取代码

ssh

git clone git@github.com:jsxiaosi/vue-xs-admin.git

https

git clone https://github.com/jsxiaosi/vue-xs-admin.git

gitee 拉取代码

ssh

git clone git@gitee.com:jsxiaosi/vue-xs-admin.git

https

git clone https://gitee.com/jsxiaosi/vue-xs-admin.git

xs-cli 创建

npx @jsxiaosi/xs-cli create [project-name]

安装依赖

推荐使用pnpm安装依赖

• pnpm

pnpm install

• npm安装

npm install

# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
# 如果下载依赖慢可以使用淘宝镜像源安装依赖
npm install --registry=https://registry.npmmirror.com

• yarn

yarn install

项目目录结构

.
├── build                         #全局公共配置目录
├── public                        #公共静态文件目录
├── src                           #项目代码目录
│   ├── App.vue                   #主vue模块
│   ├── assets                    #项目静态文件目录
│   ├── components                #公共组件
│   ├── config                    #项目配置
│   ├── enum                      #枚举
│   ├── layouts                   #布局目录
│   ├── locales                   #国际化配置
│   ├── instruct                  #指令
│   ├── main.js                   #入口文件
│   ├── router                    #路由
│   ├── server                    #请求存放目录
│   ├── store                     #vuex
│   ├── styles                    #公共样式
│   ├── utils                     #公共方法
│   └── views                     #存放vue页面目录
├── LICENSE
├── README.md
├── .editorconfig                 #规范编译器编码样式文件
├── .env.development              #开发环境变量
├── .env.production               #生产环境变量
├── .env.staging                  #测试环境变量
├── .eslintrc.js                  #esLint配置文件
├── .eslintrcignore               #esLint忽略配置文件
├── stylelint.config.js           #styleLint配置文件
├── .stylelintignore              #styleLint忽略配置文件
├── commitlint.config.js          #commitLint配置文件
├── prettier.config.js            #prettier配置文件
├── .prettierignore               #prettier忽略配置文件
├── index.html                    #根模板
├── jsconfig.json
├── package-lock.json
├── package.json
└── vite.config.js                #vite配置文件