刚大学毕业,作为一个半路出家的程序员,尝试搭建一个前端第一次从0到1项目本身也在前端的道路上不断探索。希望通过这个项目,巩固自己的知识,查漏补缺。同时也希望能帮助刚入门的同学们一起成长进步。首先使用vue脚手架:vue-cli搭建一个初始化项目:(脚手架安装)vueinitwebpack接下来启动项目npmrundev熟悉的前端界面接下来重新处理初始的空白项目界面主要显示在主目录下App.vue中,中的主要图片和路由标签会根据路径的变化显示相应的组件,所以当浏览器的URL为:localhost:8080/#/,路由匹配的路径为'/',所以会显示导入的HelloWorld组件。所以只需要修改HelloWorld组件就可以实现想要的样式显示。因此,通过编辑HelloWorld组件,您可以显示主页面。为了提高开发效率,推荐使用现成的UI框架。这里推荐使用Element-UI官网的安装方式:npmielement-ui-S然后在src目录下找到main.js修改代码如下//Vue构建版本加载`import`命令//(仅运行时或独立)已在webpack.base.conf中设置为别名。importVuefrom'vue'importAppfrom'./App'importrouterfrom'./router'importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';Vue.config.productionTip=falseVue.use(ElementUI);/*eslint-disableno-new*/newVue({el:'#app',router,components:{App},template:''})将App.vue中的代码改成如下默认按钮
npmrundev启动项目后,如果修改了按钮样式,说明Element-UI已经安装完成。下一节将修改HelloWorld组件以制作第一个博客页面。如果您对此部分有任何疑问或错误,请在评论区给我打电话。第一次写博客请多多指教!!!