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