工作生活

vue项目

2019-08-09  本文已影响0人  让风吹干寂寞

一、 项目从零到一

1 搭建脚手架

1.1 安装node.js,使用npm

1.2 安装cnpm

1.3 安装vue-cli 

2 配置插件和生态环境

2.1 核心插件

axios()

vue-router    (路由插件,必选)

vuex   (状态管理,可选)

iconfont图标(必选,未掌握)

2.2 其他插件

element-ui    (ui组件插件,可选)

还有像echarts、jquery、富文本编辑器插件。

3 进行开发

3.1 开发前的准备

http请求、响应拦截(编写js文件)

防止跨域配置(webpack配置???)

域名、版本号统一配置文件(编写js文件)

公共方法文件(util.js文件)

less常用样式文件(less公共文件)

组件设计文档(公共部分)

3.3 开发中的一些技能点

1 侧边栏、头部栏的原生布局(必须)

2 响应式布局(可选)

3 样式的兼容性(必须)

4 侧边栏iconfont的引入和使用和新增(必须)

5 单个组件的开发、引入、数据通信(必须)

6 路由的跳转、路由拦截的使用(必须)

7 less的使用(可选)

8 vuex的使用(可选)

9 浏览器缓存的使用(必须)

3.3 开发中步骤

1 引入element-ui

2 搭建路由系统

3 搭建后台界面

3.3 开发中的一些技能点

1 侧边栏、头部栏的原生布局(必须)

2 响应式布局(可选)

3 样式的兼容性(必须)

4 侧边栏iconfont的引入和使用和新增(必须)

5 单个组件的开发、引入、数据通信(必须)

6 路由的跳转、路由拦截的使用(必须)

7 less的使用(可选)

8 vuex的使用(可选)

9 浏览器缓存的使用(必须)

二、 项目套用模板

1  模板仓库

1.1 github高分后台模板一

名称:   vue2-manage

技术栈:vue2 +vuex + vue-router + webpack + ES6/7 + less + element-ui

1.2 已开发项目模板二

干货研报后台管理系统

干货研报内容发布系统

1.3  。。。

2 模板增删改

2.1 删除多余的废代码

2.2 修改不合适的样式和功能

2.3 需要储备点纯净模板,以后做类似项目可以直接拿来用。

2.4 在比较干净的模板上进行开发,增加功能

上一篇 下一篇

猜你喜欢

热点阅读