【Vue】前端博客从0到1（1.脚手架初始化我的项目+装置Element-UI）
大学刚毕业，作为一个半道还俗的程序员，第一次尝试本人从0到1搭建一个前端我的项目，本人也是在前端的路线上一直摸索。心愿通过这个我的项目能够坚固本人的常识，查漏补缺，同时也心愿能够帮忙刚刚入门的同学一起成长和提高。
- 首先应用vue脚手架:vue-cli搭建一个初始化我的项目：（脚手架的装置）
vue init webpack - 接下来开始启动我的项目
npm run dev
相熟的前端界面 - 接下来对初始空白工程进行再加工
界面的次要显示是主目录下的App.vue当中，其中次要是自带的图片以及<router-view/>路由标签
在<router-view/>中会依据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 = falseVue.use(ElementUI);/* eslint-disable no-new */new Vue({ el: '#app', router, components: { App }, template: '<App/>'})- 将App.vue外面的代码改成如下
<template> <div id="app"> <img src="./assets/logo.png"> <el-button>默认按钮</el-button> <router-view/> </div></template><script>export default { name: 'App'}</script><style>#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;}</style>利用npm run dev启动我的项目后，如果按钮款式已批改，那么Element-UI曾经装置实现。
下一节将批改HelloWorld组件来制作第一个博客页面，如果本节有什么疑难和谬误欢送在评论区call我哦，第一次写博客请多指教！！！