Vue+Vux+axios構建一個簡單的前端框架

一、准備工作

要先確認自己的電腦是否安裝了node和vue，如果沒有安裝的小伙伴自行“百度一下”~

1、查看本機的node版本

node -v  

2、查看本機的vue的版本

vue -V    （注意這里是-V 是大寫）

 二、安裝vue-cli ,配置vue命令環境（這個步驟一次就可以了，如果你的電腦以前安裝過這個環境，則可以跳過本步驟。）

cnpm install vue-cli -g

如果出現下圖，證明你成功了~

三、初始化一個項目，給它取一個炫酷的名字，比如  first-vue-project

vue init webpack first-vue-project

結果如圖：

上圖黃色框里面的內容為基本配置，藍色框的內容是你接下來需要進行的操作

先進入項目：cd first-vue-project

再運行項目：npm run dev

 最后在網頁中輸入鏈接： http://localhost:8080

如果出現下圖，那么恭喜你成功啦~~~~

 四、打包輸出，上線

npm run build 

（終止當前操作為 ctrl+c）

五、安裝vux

• 用vscode打開項目，新建命令終端

• 安裝vux

輸入：npm install vux --save

（注意：你別以為這樣你就可以開心的使用vux了，由於官方文檔中寫了vux2必須配合vux-loader使用,所以接下來就是需要安裝vux-loader）

• 安裝vux-loader

輸入：npm install vux-loader --save-dev

 

•  修改webpack.base.conf.js的配置文件（參考官方文檔：https://doc.vux.li/zh-CN/install/npm.html）

 

•  安裝less-loader（我以為這一步是按需的，所以剛開始沒有安裝，后面項目直接運行報錯，返回來安裝了之后，就能成功運行了）

輸入：npm install less less-loader --save-dev  

 六、關於vux的使用：

• 先新建一個vue文件，然后在配置它的路由（你也可以直接寫在HelloWorld.vue文件里面）

  

• 在mian.js里面加入

import { AlertPlugin, ToastPlugin } from 'vux'
Vue.use(AlertPlugin)
Vue.use(ToastPlugin)

• VuxDemo.vue文件代碼：

<template>
  <div class="vuxdemo">
    {{msg}}
    <group>
        <calendar title="這是日期組件" v-model="value"></calendar>
      </group>
  </div>
</template>
<script>
import {Group,Calendar }from 'vux'
export default {

  name:"vuxDemo",
   components:{
  Group,
  Calendar
  },
  data(){
    return{
      msg:"這是一個vuxdemo",
      value:""
    }
  }
}
</script>
<style scoped>

</style>

• 效果圖：

 七、關於axios

• 安裝axios

輸入：npm install axios

• 效果圖：

•  在項目的package.json文件夾里面可以看到配置信息：

 axios例子：

<script>
import {Group,Calendar }from 'vux'
import axios from 'axios'
export default {
  name:"vuxDemo",
   components:{
  Group,
  Calendar
  },
  data(){
    return{
      msg:"這是一個vuxdemo",
      value:""
    }
  },
  created(){
     axios
        .get('https://localhost:5001/sku/getgoods')//后端提供的接口
        .then(response => {
          console.log(response.data);//直接輸出，沒有在頁面顯示
        })
        .catch(function (error) { // 請求失敗處理
          console.log(error);
        });
  }
}
</script>

結果圖：