从零开始，手把手教程（来源于网络上做得比较典型的实例，做了一些加工，便于新手理解）； ## 一、创建项目 ``` vue init webpack ray ```  ``` npm run dev ```  [http://localhost:8080/#/](http://localhost:8080/#/)  ## 二、为项目增加第三方库支持 ``` npm install --save axios npm install --save element-ui npm install --save font-awesome npm install --save-dev node-sass npm install --save-dev sass-loader npm install --save-dev mockjs npm install --save-dev axios-mock-adapter ```        ## 三、为element-ui设定主题 进去https://elementui.github.io/theme-chalk-preview/#/zh-CN网站，选择喜欢的颜色并下载主题；  把下载的主题放置目录下 src\\assets\\theme；  ## 四、main.js程序入口 在main.js中导入“font-awesome”和“element-ui”； ``` import 'font-awesome/css/font-awesome.min.css' import ElementUI from 'element-ui' import './assets/theme/element-#004F87/index.css' Vue.use(ElementUI) ``` ## 五、App.vue文件 修改,增加一个ElementUI过渡动画组件： ``` <template> <div id="app"> <transition name="fade" mode="out-in"> <router-view></router-view> </transition> </div> </template> ``` ## 六、开发 在src目录下新建pages文件夹，并添加两个空vue文件：“Main.vue”和“Dashboard.vue”； Main.vue主体代码： ``` <template> <section> </section> </template> <script> export default {} </script> <style scoped> </style> ``` Dashboard.vue主体代码： ``` <template> <section> <el-container class="container"> <!--左边--> <el-aside :width="collapsed? '65px' : '200px' "> <el-container> <el-header> <span class="menu-button" v-if="collapsed" @click.prevent="collapsed=!collapsed"> <i class="fa fa-align-justify"></i> </span> <span v-else class="system-name">{{systemName}}</span> </el-header> <el-main> <el-menu :collapse="collapsed"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-menu"></i> <span>菜单一</span> </template> <el-menu-item-group> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </el-main> </el-container> </el-aside> <!--内容--> <el-container> <!--页眉--> <el-header class="header"> <el-row> <el-col :span="18" class="header-title"> <span v-if="collapsed" class="system-name">{{systemName}}</span> <span v-else class="menu-button" @click.prevent="collapsed=!collapsed"> <i class="fa fa-align-justify"></i> </span> </el-col> <el-col :span="6"><span class="el-dropdown-link userinfo-inner">你好：{{userName}}</span></el-col> </el-row> </el-header> <!--中间--> <el-main class="main"> <transition name="fade" mode="out-in"> <router-view></router-view> </transition> </el-main> </el-container> </el-container> </section> </template> <script> let data = () => { return { collapsed: false, systemName: '后台管理', userName: '系统管理员' } } export default { data: data, methods: { }, mounted: function() { } } </script> <style scoped="scoped" lang="scss"> ... } </style> ``` 然后，调整路由设定：  ``` import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) import Main from '@/pages/Main' import Dashboard from '@/pages/Dashboard' let routes = [{ path: '/', component: Main, hidden: true, children: [{ path: '/', component: Dashboard, name: '首页' }] }] const router = new Router({ routes: routes }) export default router ``` 到这里，就完成了一个简单的支持导航和页面布局的完整实例了；