# vue_base_project

**Repository Path**: baixiaofa/vue_base_project

## Basic Information

- **Project Name**: vue_base_project
- **Description**: vue+elementUI的基础版管理系统
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-10
- **Last Updated**: 2024-05-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue_base_project

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

该项目：该项目技术概要：vue2+elementUI+echart 技术
学习目的：
    1，清楚知道一个vue项目从0——1开发过程
    2，学习vue项目规范开发（之前实习+现在工作写的vue，都没有规范写过vue项目）
    3，学习基于elementUI来做开发
    4，学习如何规范请求后端接口
    5，学习echarts制图
    6，vue3+vite重构项目    
学习计划：
    * 7.9号完成第一阶段vue2项目全部内容。（vue3学习结束也是7.9）
    * 第二阶段7.30完成vue3+vite部份。

学习笔记：从0-1搭建

第一部份：项目初始化
1，通过vue-cli脚手架创建vue2项目：
    * vue create vue_base_project
2，vue引入elemntUI
  * 安装elementUI：npm i element-ui -S
  * 在main.js中注elementUI：全局引入/部分引入
  * 测试是否成功引入elementUI：在App.vue中引入button组件看是否有样式生效
3，vue引入router路由
    * 安装router3： npm install vue-router@3.6.5（vue2安装router3板板，vue3安装router4版本）
    * 在src新建 router 文件夹，在router文件夹新建 index.js 文件，在 index.js 中引入router
    * 测试路由跳转：在 App.vue 中引入<router-view>标签，进行页面切换
4，嵌套路由：子路由
    * 疑问，嵌套路由的用法？，使用 children 放子路由

第二部份：项目界面布局UI样式搭建
1，使用使用 container 布局（container布局只用布局，不用css样式）
2，Aside左侧布局：
    * 一级菜单：通过计算属性区分是否有有二级目录，使用es6语法动态图标
    * 二级菜单：设置菜单靠左对齐，去除边框样式：.el-menu {text-align: left; border-right: none;}
3, Header顶部布局：
    * less:  是一门向后兼容的 CSS 扩展语言(less最终会被less编译器编译成css在被浏览器识别)
    * less安装依赖： npm i less@4.1.2、npm i less-loader@6.0.0 
      * 使用less，<style lang="less"></style>
    * 需要清除elemntUI标签默认的样式：html,body,h3{
        margin: 0;
        padding: 0;
    }
    * https://www.npmjs.com/ ，vue npm 的中央仓库，类似maven的中央仓库
4，vue菜单点击路由调转：
    * 报错：Avoided redundant navigation to current location: "/user".
      * 报错原因：两次以上点击相同路由，router报错。
      * 解决：再路由调转前先判断当前路由与调转路由不一致时，才调转。  if(this.$route.path !== item.path && !(this.$route.path === '/home' && (item.path === '/')))
    * route、router区别：route是当前页的路由。router是整个vue项目的路由
5，header组件：

第三部分：vuex的使用


第四部份：




报错：
1， ERROR in [eslint] The "HelloWorld" component has been registered but not used  vue/no-unused-components
1-1：报错原因，引入组件、也注册组件了。但是没有使用组件，所报错。
1-2：解决，关闭vue报错检测。在 vue.config.js 添加：  lintOnSave:false, //关闭语法检查\

疑问：
    1，App.vu 可以被替换吗 ？换成其他界面 不可以。
        * App.vue是所有.vue界面的入口, App.vue 存放路由调转：<router-view></router-view>
        * router/index.js 中要配置路由访问的根目录以及嵌套路由：{path:'/', component: Main,children[]}
    2，menuData: [
                {
                    path: '/',
                    name: 'home',
                    label: '首页',
                    icon: 's-home',
                    url: 'Home/Home'    //url是什么，用来干嘛
                },] 中的 url 用来干嘛，有什么作用 ？
        *