vue项目学习日志

通过vue+Element-ui搭建前端项目并实现接口调用和数据渲染

一、环境搭建

1.nodejs ：目的是使用nodejs中的apm管理器去安装vue项目中的一些依赖 

下载地址

/安装完成后打开cmd输入node -v验证

2.npm config set registry=http://registry.npm.taobao.org：配置镜像

3.npm install vue -g：安装vue

4.npm install -g @vue/cli：安装脚手架

默认安装vue-cli最新版本

下载完成后用vue -V查询vue的版本

5.配置环境变量&验证在cmd中输入vue -V出现版本号说明环境变量配置成功

6.npm install：初始化依赖

二、创建项目

1.vue create /创建项目项目名称

创建完成后输入打印出来的这两行命令就可以运行项目了

2.运行npm run serve /可使用指定域名访问

- Local: http://localhost:8889/
- Network: http://xxx.xx.xxx.xx:8889/​​​​​

三、安装依赖

npm i -s axios   /axios：用来请求接口

npm i -s element /element-ui:前端的ui组件

并在main.js文件中导入库和样式

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)

四、vue项目文件介绍

（1）build 和 config ：关于webpack的配置，里面包括一些server,和端口；
（2）node_modules：依赖代码库
（3）src ：源码目录
（4）src.router：定义路由
（5）App.vue：所有页面入口
（6）.editorconfig：编辑器的配置；
（7）.vue.config.js：vue项目里的一些配置，可以配置端口、跨域等

五、使用element-UI开发前端页面

1.vue组件

<template>
    <!--编写html内容-->
</template>
<script>
    编写js内容
</script>
<style scoped lang='scss'>
编写样式，scoped仅当前组件生效，私有化样式
<style>

2.app.vue

3.HomeView.vue

4.写一个输入框el-input

  <el-input v-model="Form.userId"  placeholder="默认文案"></el-input>

5.style标签代码，对上面的div块进行样式渲染

<style scoped>
    /*当前页面样式*/
    .radis-page{
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    /*模块样式*/
    .radis-form{
        width: 490px;
        background-color: rgba(234,234,234,0.5);
        padding: 40px 60px;
        border-radius: 4px;
    }
    /*按钮样式*/
    .radis-btn{
        width: 100%;
    }
</style>

6.页面布局

每个页面创建内容：

可参考官网组件内容

7.输入框&单选框校验，失去焦点和提交时验证并显示提示文案

实现效果

六、遇到的问题：

问题1、启动脚本后的本地页面无法访问
原因：端口号被占用，防火墙拦截
解决：【异常解决】vue项目localhost:8080无法访问此网站或者无法访问此页面，localhost拒绝了我们的连接请求_localhost 拒绝了我们的连接请求。-CSDN博客

问题2、请求地址和传参都配置正确，但是接口报错
原因：未将参数封装成 JSON 格式
解决：

• 在 radis.vue 文件中，修改 submit 方法：

 postAction('/recommend/api/data/radis/modify', requestData, {
        headers: {
          'Content-Type': 'application/json'
        }
      })

• src/utils/request.js 中，确保 axios 实例配置正确

问题3、跨域（CORS）错误
解决：添加代理配置，在 vue.config.js 文件中添加以下内容：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://xxx.xxxxxxx.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' // 这里可以根据需要重写路径
        }
      }
    }
  }
}