Nodejs后端极简支持版（道阻且长，行则将至；行而不辍，未来可期。）

1.安装Nodejs

（1）检查是否安装Nodejs

打开cmd控制台输入 node --version

 看到版本即已安装

（2）安装步骤

官网下载地址：Download | Node.js

注意不要安装在中文目录下

2.安装npm

如果你安装了nodejs 默认会安装NPM

查看版本

npm --version

 

3.安装vue脚手架

使用vue --version 查看当前是否安装vue脚手架

npm install -g @vue/cli
-g: global全局

 官方安装文档：安装 | Vue CLI

4.使用vue脚手架创建工程

1.cmd控制台输入

vue ui

2.会自动跳到vue的仪表盘页面：默认是空的，这里是因为已经创建过了

3.输入项目名，下一步

 

 4.选择手动，点击下一步

5.使用配置文件，关闭Linter/Formatter，格式规范，主要是太严格 tmd

6.选用vue2，点击创建项目

5.引入element-ui插件

5.1通过命令安装

npm install -s element-ui

 5.2使用图形化界面（推荐）

（1）选择插件

（2）右上角添加插件

（3）搜索---选中---安装element

6.引入axios依赖

6.1使用命令

npm install -s axios

6.2图形化界面（推荐）

（1）左侧点击依赖

（2）安装依赖

（3）搜索，选中，安装即可

7.使用工具打开vue工程

常用工具：

• Visual Studio Code

• WebStorm

• idea  

这里使用的是WebStorm

打开readme.md, 点击绿色按钮启动工程

若是报错就如下设置：

目录介绍 ：

8.vue工程的组件引用

(1) 引入被引用的组件

 (2)声明该组件

(3)使用组件

8.1父组件向子组件传递数据

（1）在子组件中使用props来声明变量 用来接受父组件传递的数据。

（2）父组件在使用子组件时 属性名来传递

9.路由（跳转）

vue中的跳转都是通过路由进行跳转的。不能再使用location.href=""

10.vue脚手架工程+调用后台接口

<template>
  <div>
    <el-form :model="loginForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="账号" prop="username">
        <el-input type="text" v-model="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="loginForm.password"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
        <el-button >重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return{
      loginForm:{},
    }
  },
  methods: {
    login(){
      this.$http.post("http://localhost:8088/login",this.loginForm).then(result => {
        console.log(result)
      })
    }
  }
}

 在main.js中导入axios并挂载到vue对象中

 注：以下是解决前后端分离后的跨域问题    配置类（springboot）

@Configuration
public class CorsConfig {

 // 当前跨域请求最大有效时长。这里默认1天
 private static final long MAX_AGE = 24 * 60 * 60;

 @Bean
 public CorsFilter corsFilter() {
     UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
     CorsConfiguration corsConfiguration = new CorsConfiguration();
     corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
     corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
     corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
     corsConfiguration.setMaxAge(MAX_AGE);
     source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
     return new CorsFilter(source);
 }
}