关于前端: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 我哦，第一次写博客请多指教！！！