vue项目搭建步骤

一、创建vue项目

vue init webpack project_name

会让你选择一些配置

二、运行项目

// 进入到指定目录
cd project_name
// 执行启动命令
npm start

浏览器显示如下界面代表脚手架启动成功

三、搭建elementUI

# 下载elementUI的依赖
npm i element-ui -S
# 在main.js中引入elementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
# 在vue脚手架中使用elementui
Vue.use(ElementUI);

// main.js实例代码如下
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

再次启动项目看看浏览器是否有错误， 没有错误就搭建成功了！！！

四、router以及app.vue

1.router

import Vue from 'vue'
import Router from 'vue-router'
import Button from "../components/Button";
import ContrainerDemo from "../components/ContrainerDemo";
import Radio from "../components/Radio";
import Messages from "../components/Messages";
import Tables from "../components/Tables";
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/button',
      name: 'Button',
      component: Button
    },
    {
      path: '/contrain',
      name: "Contrain",
      component: ContrainerDemo
    },
    {
      path: '/radio',
      name: "Radio",
      component: Radio
    },
    {
      path: '/msg',
      name: "Messages",
      component: Messages
    },
    {
      path: '/table',
      name: "Tables",
      component: Tables
    },
  ]
})

2.app.vue

<template>
  <div id="app">
    <a href="#/button" :underline="false">点我显示按钮</a>
    <el-link href="#/button">点我显示按钮</el-link>
    <a href="#/contrain" :underline="false">点我容器</a>
    <a href="#/radio" :underline="false">单选框</a>
    <a href="#/msg" :underline="false">alert提示</a>
    <a href="#/table" :underline="false">table组件</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>

Hello World！！！

Q.E.D.