关于前端:Vue前端博客从0到11脚手架初始化项目安装ElementUI

大学刚毕业，作为一个半道还俗的程序员，第一次尝试本人从 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 = false
Vue.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 我哦，第一次写博客请多指教！！！

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