egg+vue全家桶 前后端分离项目(一)

前言
由于要开发本科毕业设计;制作一个后台书籍管理系统;想着记录一下开发过程;温故知新的同时分享给各位。
开发软件：vscode；
技术栈
前端：

• 前端MVVM框架：vue：vue-cli4搭建
• 路由管理：vue_router
• 组件库：vuetify
• 前后端交互：axios（比较老了）
• 数据化视图：echart.js(第一次尝试)

后端(node):

• egg.js(阿里后端框架 第一次尝试)

搭建前端

直接看看官网搭建vue-cli4;讲的很详细;也可以看本文

1全局安装vue-cli4

npm install -g @vue/cli-service-global

2创建项目

vue create demo  (demo 为你创建的项目名称)

Manually select features 指的是自己手动选择配置项

这几个基础模块就够了

创建出来就是这样

配置Eslint和prettier

Eslint是代码规范工具;搭配prettier可以发挥eslint的威力;要知道代码规范得好;效率才会更高;哈哈;
我根据网上好多推荐;装了一下插件


然后配置vscode中配置文件setting.json;里面设置了eslint和prettier的选项。设置这个的好处：当我们保存代码是就会自动格式化；并且会按照。eslintrc.js和。prettierrc的具体配置来格式化代码；节省很多时间；
.eslintrc.js的配置如下(可以看看网上大神们的配置)

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    'plugin:vue/strongly-recommended',
    '@vue/standard',
    'plugin:vue/recommended',
    'vuetify'
  ],
  globals: {
    MozWebSocket: true
  },
  plugins: ['vue', 'vuetify'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'prettier/prettier': 'off', // 关闭prettier，使用pretyhtml格式化
    'vue/html-indent': [
      'error',
      2,
      {
        attribute: 1,
        baseIndent: 1,
        closeBracket: 0,
        alignAttributesVertically: true,
        ignores: []
      }
    ],
    'vue/script-indent': [
      'error',
      2,
      {
        baseIndent: 1,
        switchCase: 1
      }
    ],
    'vue/multiline-html-element-content-newline': 'off',
    'vue/attributes-order': 0,
    'vuetify/no-deprecated-classes': 'error',
    'vuetify/grid-unknown-attributes': 'error',
    'vuetify/no-legacy-grid': 'error',
    overrides: [
      {
        files: ['*.vue'],
        rules: {
          indent: 'off'
        }
      }
    ],
    // camelcase: 2, // 双峰驼命名格式
    'one-var': 1, // 连续声明
    'no-var': 0, // 禁用var，用let和const代替
    semi: ['error', 'never'],
    'no-multi-spaces': ['error', { ignoreEOLComments: true }],
    'no-callback-literal': 0,
    indent: 'off',
    'space-before-function-paren': 0
  },
  parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 2018,
    sourceType: 'module'
  }
}

前端项目搭建基本就完成;

搭建后台项目

1 看的官方文档

npm i egg-init -g  
egg-init stuer-server--type=simple  (这里stuer-server 是你的项目名称)
cd stuer-server 
npm i  (安装依赖包)
npm run dev (运行项目  如果出现 hi,egg  说明项目创建成功啦)

2 安装mysql数据库

这里我附上一个非常详细的教程
https://blog.csdn.net/sophie1314/article/details/83409339

安装完成后;最好安装一个mysql的可视化管理界面----Navicat ;这个直接在官网下载就可以了;

好了,到这里!项目基本搭建完成;

下期文章:

1. egg 连接mysql数据库配置
2. axios 二次封装使用