乐趣区

关于前端: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/>'
})
  1. 将 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 我哦,第一次写博客请多指教!!!
退出移动版