点击“卓跃教育”,选择“星标?”
前言:这章节我们将把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中即可哦往期精彩回顾