Vue + Vux + Axios build a simple front-end frame

1. Preparations

Please confirm first Whether you have installed node and vue on your computer, if you don’t have the installed partner, “Baidu it” by yourself~

1, check this The node version of the machine

node -v 

2. Check the vue version of this machine

vue -V (note that -V is capitalized here)

2. Install vue-cli and configure the vue command environment (this step is enough, if your computer has installed this environment before, you can skip this step.)

cnpm install vue-cli -g

If the following picture appears, it proves that you have succeeded~

< span style="font-size: 18px;">Three, initialize a project, give it a cool name, such as first-vue-project

The result is shown in the figure:

The content in the yellow box above is the basic configuration, and the content in the blue box is what you need to do next

First enter the project: cd first-vue-project



Run the project again: npm run dev

Finally, enter the link in the web page: http://localhost:8080

If the following picture appears, congratulations on your success~~~~

Fourth, package output, go online

npm run build 

(To terminate the current operation is ctrl+c )

Five. Install vux

• Open the project with vscode and create a new command terminal

• Install vux

Enter: npm install vux --save

(Note: Don’t think that you can use vux happily in this way, because the official document writes vux2 Must be used with vux-loader, so next Just need to install vux-loader)

• Install vux-loader

Enter: npm install vux- loader --save-dev

• Modify the configuration file of webpack.base.conf.js (refer to the official document: https://doc.vux.li/zh-CN/install/npm.html)

• Install less-loader (I thought this step is on-demand, so I didn’t install it at the beginning. Run directly and report an error. After returning and installing, you can run successfully)

Enter: npm install less less-loader --save-dev  

VI. About the use of vux:

• First create a vue file, and then configure its routing (you can also write directly in HelloWorld. vue file)

• Add in mian.js

import {AlertPlugin, ToastPlugin} from ‘vux‘

Vue.use(AlertPlugin)

Vue.use(ToastPlugin)

• Install axios

Input: npm install axios

• Effects:

• You can see the configuration information in the package.json folder of the project:

Axios example:

 1 

Result image:

< /p>

Share for the first time, if you have any shortcomings, please point out, I hope everyone can make progress together (#^.^#)!

node -v 

vue -V (note that -V is capitalized here)

cnpm install vue-cli -g

vue init webpack first-vue-project

 First enter the project: cd first-vue-project



Run the project again: npm run dev

npm run build 

Enter: npm install vux --save

input: npm install vux-loader --save-dev

input: npm install less less -loader --save-dev 

import {AlertPlugin, ToastPlugin} from'vux'

Vue.use(AlertPlugin)

Vue.use(ToastPlugin)

• VuxDemo.vue file code:

• Effects:

Seven, about axios

import {AlertPlugin, ToastPlugin} from'vux'

Vue.use(AlertPlugin)

Vue.use(ToastPlugin)

Enter: npm install axios

 1