登录页
项目说明：一个微信小程序的后台配置系统
页面框架：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]。个别特殊页面的面包屑会按照业务再处理~另外，导航的选中效果根据路由的地址模糊匹配控制显示，因此对路由配置路径有一定的规则要求，一个业务逻辑下的功能页面同属于一个父路由~路径前缀取名需要一样的
有疑问或建议请留言交流~非常感谢
完...
网友评论