01-项目准备工作

项目演示地址:

www.escook.cn:8086/ev/#/login

• 1.接口文档: www.showdoc.com.cn/14254575969…

• 2.老版本基地址和在线网址

  • 在线网址：www.escook.cn:8086/ev/#/login
  • 基地址：www.liulongbin.top:3008

• 3.新版本基地址和在线网址

  • 在线网址：heimazxk.gitee.io/vue-cms/
  • 基地址：big-event-vue-api-t.itheima.net

1.1-项目学习目标介绍

• 1.复习vue基础知识

  • 指令

  • 插槽、作用域插槽

  • 全家桶

    • vue-cli组件化开发

    • axios网络请求

    • vue-router路由

      • 路由跳转
      • 二级路由

    • vuex全局数据管理

      • actions异步更新数据

    • elementui布局

      • 大量深度使用各种组件

• 2.登录注册的业务实现流程

• 3.在项目中使用 vuex 管理全局共享的数据

• 4.element-ui 组件在实际开发中的应用

• 5.文件上传、富文本编辑器在 Vue 项目中的应用

• 6.复杂业务逻辑处理能力（难点）

  • dialog弹窗复用
  • 分页组件复杂逻辑
  • 筛选功能复杂逻辑

1.2-项目整体结构分析

1.3-脚手架创建项目

• 1.Manually select features（手动选择配置项,勾选router、vuex、css预处理）

  • Choose Vue version
  • Babel
  • TypeScript
  • Progressive Web App (PWA) Support
  • Router
  • Vuex
  • CSS Pre-processors
  • Linter / Formatter
  • Unit Testing
  • E2E Testing

• 2.Choose a version of Vue.js that you want to start the project with (Use arrow keys)

  • 选择vue版本，这里选择vue2
  • 2.x
  • 3.x

• 3.Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

  • 路由模式是否用history,这里选否。 默认用hash模式
  • n

• 4.Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)

  • 选择你的css预处理语言，这里选less
  • Sass/SCSS (with dart-sass)
  • Sass/SCSS (with node-sass)
  • Less
  • Stylus

• 5.Pick a linter / formatter config: (Use arrow keys)

  • 选择你的eslint标准，这里选择默认标准
  • ESLint + Airbnb config
  • ESLint + Standard config
  • ESLint + Prettier

• 6.Pick additional lint features: (Press to select, to toggle all, to invert selection)

  • 选择你的代码检查方式，选择第一个（保存的时候检查代码）， 第二个是编译时检查
  • Lint on save
  • Lint and fix on commit

• 7.Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)

  • 选择要不要把 Babel, ESLint, etc单独放在一个配置文件中。（选择第一个）
  • In dedicated config files
  • n package.json

• 8.Save this as a preset for future projects? (y/N)

  • 是否保存本次配置，选择否
  • N

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  //关闭eslint
  lintOnSave:false
})

import Vue from 'vue'
import VueRouter from 'vue-router'
​
Vue.use(VueRouter)
​
const routes = []
​
const router = new VueRouter({
  routes
})
​
export default router
​

<template>
  <div>App 根组件</div>
</template>
​
<script>
export default {
  name: 'App'
}
</script>
​
<style lang="less" scoped>
​
</style>
​