VUE + vue-cli + webpack 创建新项目

首先记录一下命令。

这是一个睿智新手的笔记。

p.s.这是配置好环境以后的命令。

-----------------------------------------------

$ npm install -global vue-cli //手脚架先装好

$ vue init webpack my-project //创建个存放项目的目录

$ cd my-project //进入此目录

$ npm install

$ npm run dev //运行项目

//安装插件

$ npm install iview --save

$npm install vuex --save

...

具体步骤参考 https://www.jianshu.com/p/f82d55df7e54

这篇博客很详尽，感恩作者，啵啵啵啵

基本要用的东西安装配置完后，main.js里是这样的：

可以看到我们的接口调用使用axios，这里需要配置接口的域名（前缀），可以方便接口域名的更改：config下的dev.env.js

然后在scr文件夹下新建api文件夹，里面新建api.js，配置url_root：

此时main.js里的第17行就可以理解了：

ps：后端也需要处理请求头以及Access-Control-Allow-Credentials为true，保证跨域资源共享

再ps：关于axios为我们做了什么，可以参看大佬的github分享的：https://github.com/leer0911/myXHR/blob/master/doc/README.md#typescript-%E9%87%8D%E6%9E%84-axios-%E5%85%A8%E6%94%BB%E7%95%A5

而我们在调用接口的时候就可以这么写了： ↓ 下面是login.vue：

 1 this.$refs["formInline"].validate(valid => {
 2                 if (valid) {
 3                     var data = new FormData();
 4                     data.append('username',formInline.user)
 5                     data.append('password',formInline.password)
 6                     this.$http({
 7                         method: "post",
 8                         url: this.$url_root + "/user/login",
 9                         data: data
10                     }).then((response) => {
11                         if(response.data.succeed){
12                           this.$Message.success("登陆成功！");
13                           this.user=''
14                           this.password= ''
15                           sessionStorage.setItem("user", formInline.user);
16                           sessionStorage.setItem("password", formInline.password);
17                           this.$router.push({path:'/home'});
18                           this.$store.state.myheadright = true
19                         }else{
20                           this.$Message.error(response.data.message);
21                         }
22                     });
23                 } else {
24                     this.$Message.error("请输入正确的用户名和密码!");
25                     this.user = "";
26                     this.password = "";
27                     this.verification_code = "";
28                 }
29             });