直接clone

如果你不想自己手动创建，可以直接点此，但是我建议你至少自己创建过一次项目，再直接clone。

创建项目

  1. 任意路径启动vue uivue ui
  2. 点击创建按钮，并选择路径，选好后点击在此创建
  3. 输入文件名称
  4. 点击手动配置
  5. 选择功能，这里是：Babel、router、vuex、Linter / Formatter、使用配置文件，点击下一步
  6. vue.js选择2.x，格式校验选择ESLint + Standard config，点击创建项目

安装element

  1. 创建完成后进入仪表盘，点击插件
  2. 点击右上角添加插件，在输入框中输入vue-cli-plugin-element
  3. 点击第一个，点击右下角安装
  4. 安装完成后修改第一个下拉框，选择import on demand，为按需导入，点击完成安装

安装axios

  1. 点击依赖
  2. 点击右上角安装依赖，在运行依赖中输入axios
  3. 选择第一个，点击安装

删除多余配置

  1. 点击任务
  2. 点击serve，点击运行
  3. 运行成功后点击启动app
  4. 打开app.vue文件，代码替换 
    <template>
      <div id="app">

      </div>
    </template>

    <script>
    export default {
      name: 'app'
    }
    </script>

    <style>
    #app {}
    </style>
  5. 打开router下的index.js文件，代码替换 
    import Vue from 'vue'
    import VueRouter from 'vue-router'

    Vue.use(VueRouter)

    const routes = [

    ]

    const router = new VueRouter({
      routes
    })

    export default router
  6. 删除整个views文件
  7. 删除components下的helloworld文件

创建文件

  1. 在components新建一个自己需要的vue文件，代码替换 
    <template>
      <div></div>
    </template>

    <script>
    export default {

    }
    </script>

    <style lang="less" scoped>

    </style>
  2. 在router下面的index.js将组件进行关联，其中MyBoard是我的组件的名称，这里需要替换成你自己的： 
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import MyBoard from '../components/MyBoard.vue'

    Vue.use(VueRouter)

    const routes = [
      { path: '/myboard', component: MyBoard }
    ]

    const router = new VueRouter({
      routes
    })

    export default router

  3. 在app.vue中填入路由占位符 
    <template>
      <div id="app">
        <router-view></router-view>
      </div>
    </template>

    <script>
    export default {
      name: 'app'
    }
    </script>

    <style>
    #app {}
    </style>

安装less

  1. 在vue ui界面，点击依赖
  2. 点击右上角安装依赖，在开发依赖中输入less-loader
  3. 选择第一个，点击安装
  4. 继续点击右上角安装依赖，在开发依赖中输入less
  5. 选择第一个，点击安装

修改默认样式

  1. 打开代码文件，选择assets
  2. 在此文件夹下新建css文件夹
  3. 在css文件夹下新建globel.css文件
  4. 写入代码 
    html, body, #app {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  5. 在main.js中引入此文件import './assets/css/global.css'