Vue基础配置

配置Vue3.0+element-plus+axios

• 新建Vue项目

vue create [options] <app-name>

选择Manually select features，记得把路由勾选上。

• 设置ElementPlus

npm install element-plus

然后在main.js中把相关的组件引入，即

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

并让创建的app使用该组件，即app.use(ElementPlus)，同时可以在vscode中使用element-ui插件，以生成自动提示

• 设置axios

npm install axios
npm install vue-axios

同样在main.js中把相关的组件引入，即

import VueAxios from 'vue-axios'
import axios from 'axios'

并设置axios的post请求头

axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded'

另辟蹊径

过了一个学期，我发现自己从零配一个项目实在有点笨，受到别人启发，寻找了一些模板进行二次开发。

Vue3+javascript+element-plus

• vue-element-admin: github地址

  后台管理系统，提供了丰富的功能组件，在线预览：https://panjiachen.gitee.io/vue-element-admin/#/dashboard

• vue-admin-template: github地址

  上一个项目的精简版，适合从零开发

Vue3+typescript+element-plus

• vue-pure-admin: github地址

  后台管理系统，提供了丰富的功能组件，在线预览：https://yiming_chang.gitee.io/vue-pure-admin/#/welcome

• pure-admin-thin：github地址

  上一个项目的精简版，适合从零开发

如果对这些感兴趣，这些项目的文档和教学视频是一个不错的技术路线。