vue-element-admin 使用记录（搭建）

1.创建基础项目模板

操作系统: windows7

代码编辑器: vscode

vue-element-admin 有两个源码项目 推荐使用基础板,易理解好修改

基础模板项目 Git源码地址

创建vue-element-master 文件夹

打开文件夹,执行终端命令

# clone the project
git clone https://github.com/PanJiaChen/vue-admin-template.git

# enter the project directory
cd vue-admin-template

# install dependency
npm install

# develop
npm run dev

项目结构可以查看基础模板源码

2.文档帮助

vue-element-admin 使用ui组件是 element 组件样式设置,组件手册文档可查看 element官网

vue-element-admin官网

3.Eslint 语法检测设置

所有的配置文件都在 .eslintrc.js 中。 本项目基本规范是依托于 vue 官方的 eslint 规则 eslint-config-vue 做了少许的修改。大家可以按照自己的需求进行定制化配置。

比如：我个人或者项目组习惯于使用两个空格，但你可能觉得四个空格更顺眼，你可以做如下修改。 进入项目 .eslintrc.js 中，找到 indent，然后修改为 4 即可。 还有各种各样的配置信息，详情见 ESLint 文档。

在 v3.8.1版本之后，增加了eslint-plugin-vue来更好的校验 vue 相关代码。

默认情况下使用了最严格的plugin:vue/recommended来校验代码，若你觉得太严格可自行修改。

取消 ESLint 校验

如果你不想使用 ESLint 校验（不推荐取消），只要找到 vue.config.js 文件。 进行如下设置 lintOnSave: false 即可。

// https://github.com/PanJiaChen/vue-element-admin/blob/master/.eslintrc.js

module.exports = {
  extends: ['plugin:vue/recommended', 'eslint:recommended']
  //你可以修改为  extends: ['plugin:vue/essential', 'eslint:recommended']
}

4.项目结构

build：为项目生成配置选项(项目默认启用 ESLint)

mock：提供模拟数据(mock.js) mock.js官网文档

public:公用文件,图片资源

src: 项目编辑代码

tests:测试用例代码

此时我们的基础模板已经搭建完毕

不足之处还请多多指出,后续更新完成用户登陆注册功能敬请期待....