创建vue脚手架

创建vue脚手架

1.vue init webpack demo01  初始化webpack打包项目

2.cd demo01          #切换项目

3.npm i element-ui -S 安装element ui

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中使用element ui
Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

Button.vue组件

<template>
  <dev>
    <input type="button" value="这是一个按钮">
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
  </dev>
</template>

<script>
export default {
  name: "Button.vue"
}
</script>

<style scoped>

</style>

index.js配置路由

import Vue from 'vue'
import Router from 'vue-router'
import Button from "../components/Button";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/button',
      name: 'Button',
      component: Button
    }
  ]
})

app.vue配置路由

<template>
  <div id="app">
    <a href="#/button">这是一个连接</a>
    <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>