# vue_construct

**Repository Path**: L_JIA_MING/vue_construct

## Basic Information

- **Project Name**: vue_construct
- **Description**: 保存了一些简单的VUE构建代码，可以直接拉取运行，后端代码后续添加。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2022-07-07
- **Last Updated**: 2024-03-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, 定期更新

## README

# vue_construct

#### 介绍
保存了一些简单的VUE构建代码，可以直接拉取运行，后端代码后续添加。

#### 软件架构
软件架构说明


#### 安装教程

1.  拉取：将远程库克隆到新目录中
    git clone https://gitee.com/L_JIA_MING/vue_construct.git

2.  安装 必要文件：cmd => npm install

3.  开发编译:cmd => vue-cli-service serve

#### 使用说明

##### 前端

没有下载的必要，参考一下 src 包下的 main.js，src/plugins 包下的 axios.js、charts.js、element.js，src/views/entity 包下的 Student.vue 就好。（我尝试在另一台电脑克隆、开发编译，结果失败了）

- Vue 2 版本的找到问题了，我在两个项目中都把 Eslint 给禁用了，如果你也要把它禁用，需要到 package.json 文件(与src包同级)中删除对应的 ``开发环境依赖模块``

```json
// Vue 2 版本
// 删除
"@vue/eslint-config-standard": "^6.1.0",
// 删除，或 将版本改为：7.0.0
"eslint-plugin-vue": "^8.0.3",

// Vue 3 版本
// 我在 Vue 3 对应的 package.json 中没有找到 上面的 依赖项，估计自动删除了。
```
异常参考
```
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @vue/eslint-config-standard@6.1.0
npm ERR! Found: eslint-plugin-vue@8.7.1
npm ERR! node_modules/eslint-plugin-vue
npm ERR!   dev eslint-plugin-vue@"^8.0.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0
npm ERR! node_modules/@vue/eslint-config-standard
npm ERR!   dev @vue/eslint-config-standard@"^6.1.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: eslint-plugin-vue@7.20.0
npm ERR! node_modules/eslint-plugin-vue
npm ERR!   peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0
npm ERR!   node_modules/@vue/eslint-config-standard
npm ERR!     dev @vue/eslint-config-standard@"^6.1.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!                             npm ERR!
```

- Vue 3 版本的问题在于 element-plus 的版本冲突

我选择换成 2.2.0 版本。

参考：[《element plus el-button不同浏览器样式兼容问题，package.json固定构建依赖包版本》](https://blog.csdn.net/wiwenqiuya/article/details/125006546)

太详细了。

```json
// 原先的 ElementPlus 版本
"element-plus": "^1.0.2-beta.28",
// 更改后的 ElementPlus 版本
"element-plus": "2.2.0",
```

更改了 ElementPlus 版本后，对应的导入配置文件也要改

```javascript
// 1、element-plus 的导入位置变了
// 原先的
import 'element-plus/lib/theme-chalk/index.css'
// 更改后的
import 'element-plus/dist/index.css'

// 2、在 vue 3 的基础上，删除 src/plugins 包下的 element.js 文件，将下面的代码添加到 mian.js 文件中。
// 然后在 .use(router) 后加上 .use(ElementPlus)，即：XXX.use(router).use(ElementPlus); 
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
```
版本更新后，对应 ui 界面改变颇大。

vue ui 构建 vue项目的流程我也会更新到 CSDN 上，欢迎大佬指点。

##### 后端

还没有呢

#### 包结构

- web 包，前端的 项目代码

    - basic4 包，vue 3、Element-plus 版

    - demo3 包，vue 2、Element-ui 版

- system 包，后端的代码（后面再加）

#### 参与贡献

欢迎大佬指点

# 介绍

## Vue的使用 -- 基于Vue搭建前端页面

首先，用到的前端技术只有 Vue、Element-ui、axios、Echarts，至于其它的技术点，我一个后端很少接触。
其次，Echarts 我也不怎么会用（就省略了）。
最后，我是使用 vue ui 界面来搭建前端的。

### 安装 Vue、Vue-cli

我使用 npm 安装 Vue、Vue 脚手架
```shell script

# 加上 [-g] 是全局安装/删除

# 如果想要删除（[]里是要删除的文件的名字）
$ npm unintall -g [vue]


# 最新稳定版 Vue
$ npm install -g vue@next

# 安装 Vue/cli
$ npm install -g @vue/cli

# 查看 版本
# cmd =>
>vue --V

```

[vue的安装教程（官网）](https://cn.vuejs.org/v2/guide/installation.html)


### 搭建 前端页面

#### vue 3 + Element-Plus + axios + Echarts ``一般推荐``

因为我不会。
嗯，现在简单了解了，与 element 2 区别不大，注意 看 官网就好。

[element-plus，官网](https://element-plus.gitee.io/zh-CN/)

我把 axios.js 放在 src/plugins 包下，而 charts.js、element.js ，在添加 element、echarts 插件时就自动放在 src/plugins 包下了

[参考：《vue3+elementui使用方式（完整，包括创建项目）》](https://blog.csdn.net/qq_42899245/article/details/125005823)

##### 配置文件 js 的编写

charts.js
```js
import * as Echarts from 'echarts';

const echarts = Echarts;

export default echarts
```

axios.js
```js
// 自行添加的文件
// 导入 axios
import axios from 'axios'

// 使用 axios 下的 create() 方法创建 axios 实例
// create([config])中，config是最基本的配置
const API = axios.create({
  // 后端的基本地址
  baseURL: 'http://localhost:8091/clond',
  // 连接超时，单位 ms
  timeout: 2000
})

// 导出 axios
export default API
```

element.js
```js
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

export default (app) => {
  app.use(ElementPlus)
}
```

main.js
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// 导入 element-plus
import installElementPlus from './plugins/element'
// 导入 axios
import axios from './plugins/axios.js'
// 导入 echarts
import echarts from './plugins/charts.js'

const app = createApp(App).use(router).use(router);
installElementPlus(app);
app.config.globalProperties.$http = axios;
app.config.globalProperties.$echarts = echarts;
app.mount('#app');
```


#### vue 2 + Element-UI + axios + Echarts ``强烈推荐``

因为我基本都是用 Vue 2。

[element-ui，官网](https://element.eleme.cn/#/zh-CN)

##### 配置文件的编写

添加 element、echarts 插件时，charts.js、element.js 就自动放在 src/plugins 包下

charts.js
```js
import Vue from 'vue'

import * as echarts from 'echarts'

Vue.prototype.$echarts = echarts
```

element.js
```js
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Element)
```

main.js
```javascript
import Vue from 'vue'
import App from './App.vue'
import './plugins/charts.js'
import './plugins/element.js'
import router from './router'
import axios from 'axios'

Vue.config.productionTip = false

// 配置请求的根路径
axios.defaults.baseURL = 'http://localhost:8091/clond'

Vue.prototype.$http = axios

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
```

#### axios 的使用

在 main.js 中，可以看到
```javascript
// Vue 2 版
Vue.prototype.$http = axios

// Vue 3 版
app.config.globalProperties.$http = axios;
```
其中，``$http`` 就是自定义用来使用 axios 插件的字段。（看个人习惯）

``echarts`` 也是同样

使用方法
```javascript
// get 方法
// const result = this.$http.get(URL);
// 其中，URL只需要写 基本 URL后的部分即可，将 result 解析后便可得到想要的数据
// 对应的URL：http://localhost:8091/clond/student/select
const result = this.$http.get('/student/select');
// 对应的URL：http://localhost:8091/clond/student/select/{id}
const result = this.$http.get('/student/select/' + 1);

// post 方法
// 对应的URL：http://localhost:8091/clond/student/save
// studentSave 是在 data() 中定义的数据类
const result = this.$http.post('/student/save/', this.studentSave);

// delete 方法
// 对应的URL：http://localhost:8091/clond/student/delete/{id}
const result = this.$http.delete('/student/delete/' + 1);

// 其他方法 省略，使用 方法与前方法类似，只要掌握了 Get/Post，就没有问题了。 
```

对应的博客[《Vue的使用 -- 基于Vue搭建前端页面》](https://blog.csdn.net/weixin_46766584/article/details/125668834)