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

1、準備工做

要先確認本身的電腦是否安裝了node和vue，若是沒有安裝的小夥伴自行「百度一下」~

一、查看本機的node版本

node -v  

二、查看本機的vue的版本

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

 2、安裝vue-cli ,配置vue命令環境（這個步驟一次就能夠了，若是你的電腦之前安裝過這個環境，則能夠跳過本步驟。）

cnpm install vue-cli -g

若是出現下圖，證實你成功了~

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

vue init webpack first-vue-project

結果如圖：

上圖黃色框裏面的內容爲基本配置，藍色框的內容是你接下來須要進行的操做

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

再運行項目：npm run dev

 最後在網頁中輸入連接： http://localhost:8080

若是出現下圖，那麼恭喜你成功啦~~~~

 4、打包輸出，上線

npm run build 

（終止當前操做爲 ctrl+c）

5、安裝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  

 6、關於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>

• 效果圖：

 7、關於axios

• 安裝axios

輸入：npm install axios

• 效果圖：

•  在項目的package.json文件夾裏面能夠看到配置信息：

 axios例子：

 1 <script>
 2 import {Group,Calendar }from 'vux'
 3 import axios from 'axios'
 4 export default {
 5   name:"vuxDemo",
 6    components:{
 7   Group,
 8   Calendar
 9   },
10   data(){
11     return{
12       msg:"這是一個vuxdemo",
13       value:""
14     }
15   },
16   created(){
17      axios
18         .get('https://localhost:5001/sku/getgoods')//後端提供的接口
19         .then(response => {
20           console.log(response.data);//直接輸出，沒有在頁面顯示
21         })
22         .catch(function (error) { // 請求失敗處理
23           console.log(error);
24         });
25   }
26 }
27 </script>

結果圖：