既然选择了远方,便只顾风雨兼程! __hans许
提示:本篇图片较多,所以篇幅较长。
在前面几篇文章我们讲了vue的基本内容,语法,组件,插件等等。但例子却是是以平常样式那样引用js来创建,那接下来我们就是node
的环境来创建项目。
cli(command-line interface)命令行界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行。
我们先创建一个文件夹"vue",然后在"vue"里面创建创建两个文件夹"vuecli"和"vueui",那第一个我们用命令创建,另一个我们用界面创建。
安装
执行命令npm install vue -g
与npm install -g @vue/cli-service-global
,vue与vue-cli都全局安装。在终端执行vue -v
,就查看vue的版本。
命令创建
执行vue create cliproject
在项目根目录文件夹,执行上述命令,会出现下面的图片,有两个选项,第一个就是默认了,直接创建项目,我们选择第二个,进行定制化,下移,确定。
接着我们上下移,按空格键,选择,按确定键
这样我们就创建了一个vue项目。
界面创建
执行vue ui
接着访问http://www.lhsxpumps.com/_localhost:8000/
,可以看到如下界面
我们可以指定一个目录,创建vue项目
我们可以在ui这边可视化添加插件,添加依赖,配置项目,运行任务
如果项目熟悉,用第一种方式去创建项目更快,若是新手可以使用第二种,第二种会避免较少的错误。
最终效果:
作为开发人员,我们肯定要学会调试的。,官方说明:
浏览器要安装插件(vue-devtools),大家可以去这边博客进行下载:
安装完后之后,就可以在浏览器的插件看到,记得要把插件的“允许访问文件网址”的权限打开
在引用的vue.js
等不是压缩的,按起f12
便会出现一个vue的选项,可以在窗口查看修改data
,vuex
,event
在编辑器上的调试按钮,添加新的调试配置
讲以下的代码覆盖到调试配置文件
{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "vuejs: chrome", "url": "http://localhost:8080", "webroot": "${workspacefolder}/src", "breakonload": true, "sourcemappathoverrides": { "webpack:///src/*": "${webroot}/*" } }, { "type": "firefox", "request": "launch", "name": "vuejs: firefox", "url": "http://localhost:8080", "webroot": "${workspacefolder}/src", "pathmappings": [{ "url": "webpack:///src/", "path": "${webroot}/" }] } ] }
设置断点
f5
运行,便可以调试到代码了
个人而言,我比较喜欢第一种调试方式,vue-devtools可以做到我们在调试工具改数据,页面立马响应。边切有很好的可视化效果。还有一点就是配合“热更新”可以做到一个很好的调试效果。
vue-resource提供了使用xmlhttprequest或jsonp 发出web请求和处理响应的服务。
也就是可以进行服务端请求
安装
同样的道理,你可以直接引用<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"> </script>
也可以npm install vue-resource
初始化
但是最重要的是要将插件引用到vue里面,在main.js
里面引用。
import vueresource from 'vue-resource' vue.use(vueresource)
用法
this.$http.get('url').then(res=>{ console.log(res.data) },res=>{ alert(res.data) }) this.$http.post('url', {foo: 'bar'}).then(res=>{ console.log(res.data) },res=>{ alert(res.data) })
更多用法:
axios/vue-axios
axios 是一个基于 promise 的 http 库,可以用在浏览器和 node.js 中。
用于将axios集成到vuejs的插件
所以两者都是可以进行http请求的。
安装
同样道理,可以引用js,也可以使用npm install --save axios vue-axios
,将两者都引用起来。
初始化
axios
的情况,他是不支持vue,use(axios)
,所以引用进来,我们可以创建vue的一个属性给他,然后通过这个属性调用。import axios from 'axios' vue.prototype.$axios = axios
vue-axios
依托与axios
,所以两者都要引用过去。并且有个先后顺序。import axios from 'axios' import vueaxios from 'vue-axios' vue.use(vueaxios, axios)
用法
this.$axios.get('url',params).then(res=>{ alert(json.stringify(res.data)) },res=>{ alert(res.data) })
更多用法:
vue.axios.get(api).then((response) => { console.log(response.data) }) this.axios.get(api).then((response) => { console.log(response.data) }) this.$http.get(api).then((response) => { console.log(response.data) })
更多用法:
**如何选择呢?**vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,所以你懂得!
跨域问题:
我们在开发的过程中,可能会去请求不同服务器上的接口,所以我们会经历到跨域的问题。由于vue-cli3.x将所有的配置(vue配置,webpack配置等)全部集成在vue.config.js
上,所以以前与现在不太一样,但是配置节点,内容是一样的。那下面提供2个链接,针对以前与现在:
- 以前:
- 现在:
特别强调配置完跨域,f12
看请求的时候,上面的链接还是原来的链接,但是内部已经绑定转到你配置的地址上去了。
感言:终于把零基础搭建前后端分离项目写完了。前端的知识还有很多很多,要学的还有很多很多。后面也可能用实际的项目还讲讲自己遇到的坑,怎么解决的。那这个系列就这了,下个系列在再见。
如对本文有疑问, 点击进行留言回复!!
asp.net中ajax和一般处理程序(handler.ashx)的交互
egg.js创建项目,目录介绍,简单使用,sequelize mysql使用
网友评论