winfrom里面使用类似于table的合并的控件_「今日学习」UE脚手架4使用教程

前言：这章节我们将把VUE-CLI常用的配置信息全部说清楚，例如：组件设置、ui配合、Ajax等...当这些全部学会以后，我们就啥都不怕了哟，很6吧，开始我们的学习课程吧。

1、安装JQuery插件

点击项目名称右键 -> Open in Terminal -> 输入指令，安装JQuery插件 -> npm install jquery

在对应需要使用jquery的vue文件中，引入jquery插件：import $ from "jquery";

例如：

启动项目测试：启动方式在上一个章节已经说过了哈。

2、添加组件

选择src文件夹下找到components文件夹，选择这个文件夹，右键New -> Vue Component

输入Vue组件名称：我这边取名叫做CustomComponent。

创建之后，我们就会看到这些信息了，其中template标签用来写html代码，script写js代码，style写css样式咯，简单吧。

编写CustomComponent.vue代码，如下图：

在需要的视图层的vue里面引入需要的组件：import CustomComponent from "@/components/CustomComponent.vue";

然后在vue的js代码中调用组件：

最后在html位置使用组件即可

注意：这里的export default中的name就是组件的名称(类似于Java的类名)，其他的使用方式和Vue.js的使用一致哦。

3、路由的使用

点击项目名找到view文件夹右键 -> new -> Vue Component

之后还是老套路，弹框输入文件名哈，这里取名叫：CustomView，以下是截图：

确定之后就是酱紫哈：

开始编写内部代码，其实很简单的哟：

路由的对应界面已经编写好了哟，接下来，就是注册路由了哈：

找到router文件夹下的index.js文件：

按照以下的套路也来注册路由数据：

编写前：

编写后：

最后将路由数据添加到界面上：

找到App.vue文件添加上控件：

然后面对疾风吧，咩哈哈哈：

4、Ajax使用(跨域)

这边因为jquery已经可以导入，可以使用jquery的ajax，但是vuecli推荐使用axios来使用数据提交，所以这边给大家介绍的就是该技 术哟。好，那么我们现在就来研究下如何使用吧。

首先点击项目名称右键 -> Open in Termainal

在DOS界面输入：npm install --save axios 回车开始安装，安装成功后如下图。

好，那么接下来开始使用咯。

这边再附上axios的官网教程哈：http://www.axios-js.com/zh-cn/docs/index.html，这里面还有很多很多配置可以添加上去哈，我仅仅 是做最最最基本的哈。

点击项目名右键 -> new -> File -> 输入：vue.config.js 创建这个文件

输入文件名：vue.config.js 回车即可

在vue.config.js文件夹中配置：

其中：

host:这个是本vue的ip地址；

port：这个是本vue的项目端口号；

proxy则是跨域的代理，

其中/test字符串意思是，只要是含有test的url都执行这个代理；

其中traget则是访问的其他服务器的ip地址，最后一定要/test结束哟；

ws意思是websocket也执行此代理；

changeOrigin意思是：是否采用跨域模式访问。

更多的配置请参考：https://cli.vuejs.org/zh/config/#devserver-proxy

之后，在需要请求的页面script标签中配置：

1、导入axios包

2、开始请求

其中url和method我就不再说咯，还有一个就是withCredentials参数的意思是：表示跨域请求时是否需要使用凭证，具体使用方 式请查看官网哈。

5、导入静态资源(图片的使用)

导入方式依照官网的教程来说有两种方式：

第一种：通过相对路径被引用。这类引用会被 webpack 处理。

当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。

相对路径的资源都存放在asstes文件夹中即可，如下图，以下两种写法都可以使用

第二种：放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。

打包后访问效率会提高，所以推荐使用方式1，来进行访问。

注意：这里css文件也可以按照这样的方式导入哟，script不行哦

6、使用UI控件

这里的UI推荐IView哦，因为Element(饿了么)，以及官网推荐的Vant都是手机版的UI界面，如果有使用手机界面的童鞋，大家可以 了解一下哦，俺是后端程序员，所以...我就介绍下IView如何使用哈，理解下哦，这里给大家一个官网哦：https://www.iviewui.com/docs/introduce，这里的IView有两种版本，在VueCli4.0之后，IView和Vue合并都叫做VueUI了哦，早期的 IView官网：http://v1.iviewui.com/，我更喜欢早期的IView的UI界面，哈哈哈。

好了，开始装x：

点击项目名右键 -> open in Termainal -> 打开DOS窗体

执行下列命令：npm install view-design --save

安装iview插件哟~

然后：开始测试咯：

在main.js文件中添加：

在template标签中，使用：

好的开始测试：(那条绿绿的就是对应的按钮哈)

这里的iview基本上所有控件都有了哦，但是要注意哈，没有富文本控件以及图表控件哦，所以到时候要注意哈。

这里的部分标签元素需要个别导入哦，在对应需要的vue界面上 import进行引入，例如：Message(弹框)。

还有部分的标签不能使用哦，需要在.eslintrc.js文件中的rules标签添加以下信息：

"vue/no-parsing-error": [2, { "x-invalid-end-tag": false }]

7、项目打包

点击项目右键 -> open in Termainal -> 打开DOS界面 -> 输入命令：

npm run build

执行完成后，点击项目名，你就会发现，多了一个dist的文件夹哦

复制这个文件夹出来，打开文件夹，你会发现：

好，双击index.html文件，你会发现空白的哦，通过检查，你会发现原来是css以及js数据找不到了哈。

看到了吧，数据都丢到c盘了，所以是路径不对，找不到这些文件了，那怎么办呢？

Vuecli官网教我们如何配置https://cli.vuejs.org/zh/config/#publicpath咯，来，看看吧：

我们在项目根目录创建一个文件叫做：vue.config.js，如下图(之前做ajax提交数据已经创建过得童鞋就略过哈)：

在内部添加

// 其中，publicPath就是路径配置的参数，process.env.NODE_ENV环境变量参数，如果是production(生产环境)，否则不进行配置。

publicPath: process.env.NODE_ENV === 'production' ? './' : '/'

然后你再导出试试看吧，哈哈哈。

这里还有发现有问题吧，所以不推荐数据丢在public文件夹哦，导出就有bug咯。

Tomcat配置：

将导出的代码直接丢在webContent中即可哦