vue2从0到1搭建一个后台管理系统（一）

vue2从0到1搭建一个后台管理系统

第一步：创建项目

项目启动：

npm run serve

第二步：配置

ESLint配置

• 禁用ESLint

vue.config.js 文件 

(process.env.NODE_ENV 配置在后面 )

lintOnSave:process.env.NODE_ENV === 'development',

• 配置文件

.eslintignore 文件 

        （ESLint配置文件）

.eslintrc.js 文件 

        （ESLint忽略配置）

vue.config.js 文件配置

配置基本信息

代理转发

webpack打包处理

开发 / 测试 / 生产 环境变量配置 

信息包括：

# 页面标题

VUE_APP_TITLE = '标题'

# 开发环境配置

ENV = 'development'

# 开发环境

VUE_APP_BASE_API = 'base地址'

# 路由懒加载

VUE_CLI_BABEL_TRANSPILE_MODULES = true

# 后端接口地址

VUE_APP_SERVER_API_URL = '后端地址'

# Mqtt消息服务器连接地址

VUE_APP_MQTT_SERVER_URL = 'Mqtt消息服务器连接地址'

# 百度地图AK

VUE_APP_BAI_DU_AK = '你的百度地图AK'

路由配置

• 新建route文件夹以及对应的index.js文件

•  APP.vue设置嵌套路由并且把空路由重定向到首页

为什么强转到首页而不是登录页？

       假设：用户已经登录然后重新输入网址，这时候应该跳转到登录还是首页？

        当然是首页，那判断用户登录状态这一步怎么实现？

        后续全局设置，利用路由拦截器，在路由跳转前判断用户登录状态（利用token），如果有token就代表用户登录成功并跳转到目标地址，如果没有就强转到登录页面。

• 注册路由  

第三步：引入ElementUI组件库

第四步：基础页面搭建（登录+首页）

因为是练习项目，所以就不细扣样式问题喽！

写这篇的主要目的还是在于梳理项目搭建的思路 and 整理一个后台管理的基础模板方便以后起项目的时候可以快速使用

登录页

效果：

代码：

关键代码：

   watch: {
      $route: {
        handler: function(route) {
          this.redirect = route.query && route.query.redirect
        },
        immediate: true,
      },
    },
    created() {
      this.getCookie()
    },
    methods: {
      getCookie() {
        const username = Cookies.get('username')
        const password = Cookies.get('password')
        const rememberMe = Cookies.get('rememberMe')
        this.loginForm = {
          username: username === undefined ? this.loginForm.username : username,
          password: password === undefined ? this.loginForm.password : decrypt(password),
          rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
        }
      },
      //密码icon
      changeIcon() {
        this.password = !this.password
      },
      //登录
      handleLogin() {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.loading = true
            //记住我
            if (this.loginForm.rememberMe) {
              Cookies.set('username', this.loginForm.username, {
                expires: 30,
              })
              Cookies.set('password', encrypt(this.loginForm.password), {
                expires: 30,
              })
              Cookies.set('rememberMe', this.loginForm.rememberMe, {
                expires: 30,
              })
            } else {
              Cookies.remove('username')
              Cookies.remove('password')
              Cookies.remove('rememberMe')
            }
            // 占位（一会用dispatch处理）

          }
        })
      },
    }
  

首页

首页需要和 Layout 结合

开发顺序问题

（个人想先把项目配置，比如请求封装，路由拦截等搞完再进行Layout搭建）

所以后续再操作

第五步：配置vuex 

第六步：请求拦截器和通用下载方式

第七步：请求封装（举个例子）

 

下一篇：vue2从0到1搭建一个后台管理系统（二）

（Layout组件封装、路由拦截器、用户权限）

#占位

写完下一篇更新