本文主要是介绍后端开发的前端瞎搞之路——新建Vue工程,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
哈喽,大家好,我是一条。
众多周知我是个后端程序员,但当初学习编程的时候我是学过前端的,奈何太久不用,都换还回去了。
现在工作呢,也用不上,只是隔壁的大佬们都是前后端都会,妥妥的全栈,这显得我就很low了,索性就搞一搞。
后端程序员的前端瞎搞之路,就开始了!
从新建项目开始
开始不着急,先建个项目看看啥样,前端的编辑器我也用过几款,像Hbuilder、VSCode、WebStrom。同事大佬都用的 VSCode ,但我实在是用不惯,我更喜欢 WebStrom。
但是!!!
我发现WebStrom过于傻瓜,可自定义配置的部分比较少,所以就选择先在命令行创建完,再导入WebStrom。
安装Vue/Cli
npm install -g @vue/cli
vue --version
其实我以前安装过的,所以这步就略过,之间创建工程。
vue create java-book
接下来就是关键部分,
配置项目
首先,选择手动创建,自定义配置,然后用空格键添加需要的组件或功能。
再选择vue的版本,这里用的是ts和Vue 3。
回车之后就开始创建工程了,完成如如下:
然后再导入webstorm,就可以愉快的开发了。
集成 ant-design-vue
人们数值的vue框架都是element ui,但我觉得太丑,问了一下前端同事,推荐antd,使用的方式和java差不多,先下载依赖,再导入。
sudo npm i --save ant-design-vue
在main.ts
全局导入,
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
然后就可以参考官网文档,引入各种组件了。
非常的简单。
官网:www.antdv.com/components/…
效果图
简单看一下效果图吧,这里已经接入后端的数据了,就是样式还没调整。
最后
前端其实搞起来还是很好玩的,下期介绍前后端联调。
这篇关于后端开发的前端瞎搞之路——新建Vue工程的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!