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>

結果圖：