VUE快速实战-新建项目

目录

前期软件准备

1. 环境：nodejs安装
2. 开发工具：vscode安装
3. 安装vue及脚手架vuecli

搭建项目

1、创建项目

vue create myproject
脚手架创建项目，可以设置vuex、vueRouter、style、Linter等

2、安装基础npm包

• 做项目必装组件：前端组件库、 http库

npm i element-ui -S npm install axios 

• 做项目建议使用组件，
  npm install lodash
  JavaScript 实用工具库

优化代码结构（前端框架）

以下列举一些改造思路、及目标：

vue-router改造

1. 改造

• 路由按照模块，独立js文件
• 创建permission.js文件，增加router.beforeEach、router.afterEach
• 在第二步基础上，增加验证权限、权限管理，进度管理（nprogress）

2. 路由能力

• 控制路由页面是否缓存
• 设置路由显示名字、图标、高亮、路由树展示效果等

vuex改造

1. 改造

• 创建modules文件夹，分模块管理，可配和require.context 写法，遍历文件夹一次性导入所有的module

axios改造

1. 改造

• 创建api文件夹，分模块管理访问后台方法
• utils创建request.js文件
• 添加请求拦截

service.interceptors.request

• 添加响应拦截

service.interceptors.response

• 添加统一文件下载方法

2. 能力

• 登录过期提醒
• 接口错误统一提醒
• 请求超时时长设置

常用需求

以下内容将在后续文章详细展开来讲，此处仅作为链接跳转

excel操作

echart图表

svg及vue使用svg