关于VUE Cli项目

        VUE Cli创建的项目通常称之为“VUE脚手架项目”。

        VUE Cli项目时一种单页面的项目，在这种项目中，只有一个HTML文件！具体的内容显示，是由各个.vue文件（视图组件文件）来实现的，每个显示效果都可能是由多个.vue共同组成的，每个.vue的显示位置也可以轻松替换为另一个.vue文件的显示效果，就可以实现“搭积木”的方式来构建页面。

关于VUE Cli里项目的结构

        ● 【.idea】：由Intellij IDEA打开的项目都有此文件夹，是由Intellij IDEA维护的，不需要手动管理，如果此文件夹下的文件出错，删除即可，后续IDEA会自动重新创建所需的文件

        ● 【node_modules】：当前项目的所有依赖项，此文件夹通常会被配置到.gitignore文件中，如果项目中缺少此文件夹，或缺少此文件夹下的部分依赖项，都可能导致项目无法正常使用，需要通过npm install命令来安装相关软件（下载必要的依赖项），此命令会根据package.json文件

        ● 【public】：项目的静态资源文件夹，用于存放 .html、.css、.js、图片等静态资源（不随着请求参数变化的资源），在具体使用时，可以按需自行创建文件夹来管理各文件，在访问时，此文件夹相当于主机的根路径，例如在public下直接存放a.jpg，访问路径则是http：//localhost：8080/a.jpg           

                ● favicon.ico：图标文件

                ● index.html：当前项目唯一的HTML文件

        ● 【src】：源代码

                  ● 【assets】

                  ● 【components】

                  ● 【router】：路由配置文件的文件夹

                        index.js：默认的路由配置文件

                  ● 【store】

                  ● 【views】：存放视图组件的文件夹

                  ● app.vue：默认会注入到index.html中的视图组件

                  ● main.js：当前项目主要配置文件

        ● .gitignore：用于配置使用GIT仓库时忽略的文件或文件夹，再次文件中配置的文件、文件夹均不会提交到GIT中

        ● babel.config.js：~

        ●  jsconfig.json：~

        ● package.json

        ● package-lock.json

        ● vue.config.js：~

关于视图组件

        在VUE Cli项目中，以.vue作为拓展名的文件就是视图组件文件，这类文件通常可能包含：

                ● <template>：用于设计页面中的元素

                        ● 注意：此标签只能有一个直接子标签

                ● <script>：用于编写JavaScript程序

                ● <style>：用于编写CSS样式

关于路由配置

在VUE Cli项目中，src/router/index.js是默认的路由配置文件，此文件中配置了“路径”与“视图组件”的映射关系

默认的配置如下：

import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  }
]

以上routes常量是数组类型的，其中的元素是对象，每个对象都是一个“路由对象”！

在路由对象中，path 表示访问路径，component是表示视图组件，name是可以缺省的！

其中，component属性的值可以通过import语句来导入某个视图组件，也可以通过import（）函数来导入某个视图组件。 

关于<router-view/>标签

        在VUE Cli项目中，在视图组件中可以添加<router-view/>标签，表示此标签所在的位置将由其他视图组件来完成显示及对应的功能！具体由那个视图组件来显示，取决于路由配置！

使用Element UI 

在VUE Cli项目中，当需要使用Element UI时，需要现在当前项目中安装，安装命令为：

npm i element-ui -S

并且，在main.js中补充添加配置：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

 至此，配置完成，并且，整个项目的任何视图组件都可以直接使用Element UI。

 关于跨域访问

服务器端默认不允许异步的跨域请求

        关于跨域：只要主机名、端口号、通讯协议中的任何一项不同，即为跨域访问。

        跨域访问导致的错误信息中，关键字为：CORS。完整的错误信息大致如下：

Access to XMLHttpRequest at 'http://localhost:8080/v1/users/login' from origin 'http://localhost:8081' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 在基于Spring MVC的服务器端项目中，可以自定义配置类，实现WebMvcConfigurer接口，重写其中的addCorsMappings（）方法，以配置允许的跨域访问！

简单的配置如下：

import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * Spring MVC配置类
 *
 * @author java@tedu.cn
 * @version 2.0
 */
@Slf4j
@Configuration
public class WebMvcConfiguration implements WebMvcConfigurer {

    public WebMvcConfiguration() {
        log.debug("创建配置类对象：WebMvcConfiguration");
    }

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedHeaders("*")
                .allowedMethods("*")
                .allowedOriginPatterns("*")
                .allowCredentials(true)
                .maxAge(3600);
    }

}

 在VUE Cli项目中使用axios

首先，需要安装axios，安装命令为

npm i axios -S

然后再main.js中添加配置

import axios from "axios"; 

Vue.prototype.axios=axios

嵌套路由

在VUE Cli项目中，只要访问“非静态资源”，都会认为你尝试访问index.html，则会由app.vue注入到页面中，而App.vue基本通过<router-view/>由其他视图组件来完成显示的，其他视图中可能也包含<router-view/> ，就出现了<router-view/> 的嵌套，则在配置路由时，也需要配置嵌套的路由！

在src/router/index.js中配置路由时，如果某个视图组件使用到了<router-view/> ，则可以在对应的路由对象中添加children属性，此属性的配置方式与routes常量完全相同

简单理解：

        ● 如果把路由对象配置在routes常量中，此视图组件将显示在App.vue的<router-view/> 位置

        ● 如果把路由对象配置在某个路由的children中，此视图组件将显示再此路由对应的视图组件的<router-view/>位置

需要注意：由于HomeView中设计了<router-view/>，则这个HomeView是一个不完整的View，不应该允许直接访问，可以再当前路由对象上添加redirect属性，表示“重定向”，即：当尝试访问HomeView时，直接重定向（跳转）到另一个视图组件。