vue+element 后台系统搭建实践

登录页

项目说明：一个微信小程序的后台配置系统

页面框架：vue + element-ui

相关技术：vue2.0 ，element，webpack，vue router等

资料参考：

vue语法和用法 http://t.cn/RaQp8eM

vue router用法和语法 http://t.cn/R1zW62K

element组件用法 http://t.cn/Rm7k76j

搭建步骤：

step1 本地安装nodejs，npm[安装nodejs时一般会一起安装]，可以通过 node -v 和 npm -v验证是否安装

step2 全局安装webpack

  npm install webpack -g

step3 全局安装vue脚手架【用于快速构建一个vue的项目，对这种后台系统还是很方便的】

  npm install vue-cli -g

step4 新建工程目录，通过模板创建项目

  vue init webpack-simple yourProjectName [这样创建的项目结构很简单，缺少build和config等文件]

  vue init webpack yourProjectName [实例项目开发，建议使用这个]

按照提示一步一步创建完成即可，一个默认的vue项目已经建好，默认端口8080

step5 打包运行

打包 npm install [没有新增依赖，初始运行即可，npm install -save xxxx 新增依赖打包]

运行 npm run dev

起来后，打开浏览器访问 locaohost:8080即可

step6 安装element-ui，便于后台风格统一

npm install -save element-ui 这样在vue文件里可以使用其对应标签

最终的项目目录

其他说明：

1.所有一级目录是初始构建就有的，对应说明如上图，基本不去改

2.src下默认有App.vue，main.js，component文件夹，router[创建时 使用router选择Y]

3.assets文件夹下放样式，图片，和js工具类

  component下放业务所有相关的页面文件

4.其他目录根据项目业务去搭建，上述是此系统的目录结构

5.因为这次的项目左侧只有一级导航，为了没有展开效果，改了element组件样式。home页的所有导航从router配置读取，导航的名称也是读取的配置，同时导航对应页面的面包屑也读取配置文案[router的name]。个别特殊页面的面包屑会按照业务再处理~另外，导航的选中效果根据路由的地址模糊匹配控制显示，因此对路由配置路径有一定的规则要求，一个业务逻辑下的功能页面同属于一个父路由~路径前缀取名需要一样的

有疑问或建议请留言交流~非常感谢

完...