参考
之前写项目的时候用的在网上下载的框架,现在工作之余研究了一下,舍去被人项目中冗余的东西,自己按照思路重新搭建, 有些方法还是之前框架中的方法。只用于参考,也可以自己写。
所需工具
- 包管理工具:npm,基于node.js
- 模块打包工具:webpack
框架体系
- MVVM框架:Vue.js
- 项目脚手架:vue-cli
- UI组件库:Element UI
- 路由配置:vue-router
- 前端请求接口:axios
- 状态管理工具:Vuex
- 脚本语言:ES6语法
- css预处理器:scss样式预处理器
搭建项目
- 使用vue cli 3.0 搭建项目(注:安装步骤在第一个文章里) cd...(文件名) 进入项目
- 安装Element Ui组件库 (依照官网文档安装)
项目目录及文件夹的分类
文件夹的分类虽然看起来是一个小问题,但是因为一般写项目时候文件会很多且项目体系庞大,所以必须梳理好项目目录结构及文件的分类,以便于以后找相关组件起来清晰明了。
不要在意我为什么倒着描述...
- 在view文件夹存放所使用的vue组件,在这里我一般习惯于把login/404/home页放于common公共文件夹里/modules里面放页面组件
- until文件夹里会存放一些项目使用到的公共方法/封装的函数(例如session/cookie的存取/权限判断等)
- store状态管理仓库modules放一些不变的项目名称/键名(可以不用在store文件夹里面再建modules文件夹,看个人喜好)
- router路由
- components会放一些外部引入的组件(echats之类)
- assets(scss/font/image资源文件夹)
功能实现
- 页面跳转
在login组件给一个登录按钮 意思一下 @_@
- 接下来配置路由实现组件的嵌套结构
持续更新...