【Vue】前端博客从0到1（1.脚手架初始化项目+安装Element-UI）前端vue.jsnpm

【Vue】前端博客从0到1（1.脚手架初始化项目+安装Element-UI）

大学刚毕业，作为一个半道出家的程序员，第一次尝试自己从0到1搭建一个前端项目，自己也是在前端的道路上不断摸索。希望通过这个项目可以巩固自己的知识，查漏补缺，同时也希望可以帮助刚刚入门的同学一起成长和进步。

首先使用vue脚手架:vue-cli搭建一个初始化项目：（脚手架的安装）
vue init webpack

文章图片
接下来开始启动项目
npm run dev
熟悉的前端界面

文章图片
接下来对初始空白工程进行再加工
界面的主要显示是主目录下的App.vue当中，其中主要是自带的图片以及路由标签

文章图片

在中会根据path的变化展示相对应的组件，所以当浏览器的网址为：localhost:8080/#/时路由匹配到的path是'/'，所以会把import的HelloWorld组件给展示出来。

文章图片

所以只需要改动HelloWorld组件就可以实现想要的样式展示。
所以编辑HelloWorld组件，就可以实现主页面的展示
为了增加开发的效率，建议使用现成的UI框架，这边推荐使用Element-UI官网

安装方法：npm i element-ui -S

文章图片

然后找到src目录下的main.js 将代码修改为如下

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.config.productionTip = false Vue.use(ElementUI); /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '' })

将App.vue里面的代码改成如下

#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; }