vue学习笔记

工具

webstorm、vscode

vue工具链官方教程

https://cn.vuejs.org/guide/scaling-up/tooling.html#try-it-online

相关版本

vue3
nodejs v18.17

目标

使用vscode和vite以及npm搭建前端开发环境，开发过程使用单文件组件（SFC）

vscode配置

https://www.cnblogs.com/zhangycun/p/10812223.html

安装插件

然后直接输入要安装的插件的名字即可，如果要查看安装了哪些，直接输入@installed即可
安装vuter和eslint、Local History

配置空格显示为点，tab显示为点

File -》 Perferences->Settings
然后搜索框中输入renderControlCharacters,选中勾选框,即可显示

tab显示为4个空格在搜索框中输入renderWhitespace,选择all,即可显示空格.

nodejs安装

按照后查看版本（一般建议不要安装在C盘）

nodejs下运行vue3项目

vue3的SFC组件中使用bootstrap5

参考资料：https://nii.cn/4142.html
安装

引入

使用

运行结果

VUE3引入axios

参考资料https://www.cnblogs.com/zyzlb/p/16591702.html

vue3中使用element-ui

参看资料：https://blog.csdn.net/ftell/article/details/130752173

参看资料

1、nodejs官网 https://nodejs.org/en
2、vue官网 https://cn.vuejs.org/
3、如何在vue3中使用bootstrap5
4、https://www.1024nav.com/blog/how-to-use-bootstrap5-in-vue3
5、https://element.eleme.cn/#/zh-CN/component/descriptions