0%

后台管理项目入门(一)

入门(一)

1.项目克隆到本地:

git clone https://github.com/PanJiaChen/vue-element-admin.git

2.项目目录介绍:

├── build                      // 构建相关  
├── config                     // 配置相关
├── src                        // 源代码
│   ├── api                    // 所有请求
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件
│   ├── directive              // 全局指令
│   ├── filtres                // 全局 filter
│   ├── icons                  // 项目所有 svg icons
│   ├── lang                   // 国际化 language
│   ├── mock                   // 项目mock 模拟数据
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   ├── styles                 // 全局样式
│   ├── utils                  // 全局公用方法
│   ├── vendor                 // 公用vendor
│   ├── views                   // view
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口 加载组件 初始化等
│   └── permission.js          // 权限管理
├── static                     // 第三方不打包资源
│   └── Tinymce                // 富文本
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置项
├── .gitignore                 // git 忽略项
├── favicon.ico                // favicon图标
├── index.html                 // html模板
└── package.json               // package.json

2.1 components :

 components 放置的都是全局公用的一些组件,如上传组件,富文本等等。一些页面级的组件建议还是放在各自views文件下,方便管理。

2.2 store:

 不要为了用vuex而用vuex!

2.3 webpack:

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

 从 webpack v4.0.0 开始,可以不用引入一个配置文件。然而,webpack 仍然还是高度可配置的。在开始前你需要先理解四个核心概念

  入口(entry)
  输出(output)
  loader
  插件(plugins)

2.4 axios的封装

目的:帮助我们简化代码和有利于后期的更新和维护。

   axios库经常被用在vue项目和后台交互数据方面,可以运行在浏览器端和node.js中。

优点:拦截请求和响应、取消请求、转换json、客户端防御XSRF

2.4.1 安装

  npm install axios; // 安装axios

2.4.2 引入

 在src目录之中新建request文件夹,然后新建http.js和一个api.js文件。其中

  http.js:封装我们的axios
  api.js:统一管理我们的接口

 关于环境切换、设置请求超时、post请求头设置系列操作参考《vue中Axios的封装和API接口的管理》

2.5 安装ESLint插件

ESLint插件+VSCode进行代码编写

 对VSCode进行扩展设置 文件 > 首选项 > 设置 打开 VSCode 配置文件,添加如下配置:

"files.autoSave":"off",
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
{ "language": "vue", "autoFix": true }
],
"eslint.options": {
"plugins": ["html"]
}

-------------    本文结束  感谢您的阅读    -------------