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

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

大学刚毕业，作为一个半道还俗的程序员，第一次尝试本人从0到1搭建一个前端我的项目，本人也是在前端的路线上一直摸索。心愿通过这个我的项目能够坚固本人的常识，查漏补缺，同时也心愿能够帮忙刚刚入门的同学一起成长和提高。

1. 首先应用vue脚手架:vue-cli搭建一个初始化我的项目：（脚手架的装置）
   vue init webpack
   
2. 接下来开始启动我的项目
   npm run dev
   相熟的前端界面
   
3. 接下来对初始空白工程进行再加工
   界面的次要显示是主目录下的App.vue当中，其中次要是自带的图片以及<router-view/>路由标签
   
   在<router-view/>中会依据path的变动展现绝对应的组件，所以当浏览器的网址为：localhost:8080/#/时路由匹配到的path是’/’，所以会把import的HelloWorld组件给展现进去。
   
   所以只须要改变HelloWorld组件就能够实现想要的款式展现。

4. 所以编辑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/>'
})

5. 将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我哦，第一次写博客请多指教！！！