关于VUE Cli项目

关于VUE Cli项目

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

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

关于VUE Cli项目的结构

●   [.idea]：由IDEA打开的项目都有此文件夹，是由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仓库

●   bable.config.js：~

●   jsconfig.json：~

●   package.json：

●   pachage-lock.json：

●   vue-config.js：~

关于视图组件

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

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

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

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

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

关于路由配置

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

默认的配置如下：

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../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() 方法，以配置允许的跨域访问！

在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时，直接重定向（跳转）到另一个视图组件。

在VUE Cli项目中使用qs

qs是前端技术中，可以实现“对象与FormDate格式的字符串”的转换的工具包！

安装命令为：

npm i qs -S

并且，需要在main.js中补充配置：

import qs from 'qs';
Vue.prototype.qs=qs;

然后，就可以在视图组件中，通过qs将对象转换成FormData格式的字符串，例如：

let formData = this.qs.stringify(this.ruleForm);
console.log('formData = ' + formData);

指定服务端口

在Spring Boot项目中，可以通过配置文件中的server.port属性指定端口号，例如： 

server:
  port: 28182

        在VUE Cli项目中，可以通过package.json中的scripts属性的serve属性值修改端口号，在原值的基础上添加--port 新端口号即可，例如：