【admin-mini】搭建底座

创建项目

  npm create vue@latest

选择模块

项目名称随意，输入什么就会自动创建一个对应的文件夹（后期可修改）

typescript，这里选择NO 保持使用javascript（不引战 ts很好）

jsx、router、pinia（vuex替代品）统统yes

eslint、prettier语法检查酌情

Vue.js - The Progressive JavaScript Framework

√ Project name: ... vue-project
√ Add TypeScript? ... No 
√ Add JSX Support? ...  Yes
√ Add Vue Router for Single Page Application development? ...  Yes
√ Add Pinia for state management? ...  Yes
√ Add Vitest for Unit Testing? ... No 
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ...  Yes
√ Add Prettier for code formatting? ...  Yes

安装依赖

    cd vue-project
    npm i

运行

npm run dev

输出下面内容即可正常访问一个Vue3项目了

  VITE v4.4.11  ready in 758 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

访问 http://localhost:5173/ 🎉

常用库安装

npm i axios --save 
npm i normalize.css --save
npm i nprogress --save
npm i element-plus --save
npm i @element-plus/icons-vue --save

规范目录结构

/src/api 所有API请求，axios封装

/src/components 全局通用组件

/src/directive vue指令

/src/layout 布局模版

/src/plugins 自定义插件

/src/router 路由

/src/stores 状态库

/src/style 样式

/src/utils 项目工具函数以及字典定义

/src/views/ 视图文件

【admin-mini】搭建底座 vue3手摸手