项目优化以及新建项目的流程vue
1.确定项目，和客户交流，了解需求=>分析项目的可行性 写出项目需求文档————UI设计师 2.页面设计 这个环节主要是UI设计师参与，UI设计师根据产品需求分析文档， 对产品的整体美术风格、交互设计、界面结构、操作流程等做出设计。 负责项目中各种交互界面、图标、LOGO、按钮等相关元素的设计与制作。 3.编码 前端人员写页面 后台人员写功能给前端提供接口 根据UI设计师的设计，用编码完成整个项目的各个功能 4.测试 程序测试员来完成。反复不断的测试并且将存在问题的测试结果交给程序员进行bug修复
5.维护 程序上线后后续bug的修复和项目版本的迭代更新
项目流程
-
脚手架的安装
-
创建项目（vue init webpack 项目名称）
-
分析当前项目技术栈
例：
element-ui ui框架
axios http库
vue-router 路由插件
vuex 状态管理插件
stylus css预处理器
stylus-loader@3.0.2 -
分析项目需求（确定组件=>一级路由一级&&二级路由）以及（pc端的框架确定）移动端（vantUI）
例：main.js文件夹中
//引入element-ui
import elementUI from 'element-ui'
//引入element-ui的css文件
import 'element-ui/lib/theme-chalk/index.css'
//调用element
Vue.use(elementUI)例:main.js 文件夹中
//全局引入vantUI
import VantUI from 'vant'
import 'vant/lib/index.css'
//调用插件
Vue.use(VantUI) -
脚手架初始化 （清空没有用的文件和图片）
-
全局引入共通的js和css（main.js =>import ‘./assets/文件名’）
-
在src下面创建项目目录（router路由、pages一级路由、views二级路由、util（接口）、store（vueX）、components(公共组件)，common,filter）
-
搭建一、二级路由（路由懒加载提高效率 ()=>import('路径')确定路由模式hash和history（默认））
-
书写页面以及组件的拆分（封装接口）（引入axios）（state=>vueX的五个属性的书写）
-
创建基本容器布局
-
脚手架跨域问题
proxyTable: {//代理服务 设置跨域解决代码
// /api只是自定义的，因为我们大部分官方称接口 为api
'/api':{
target:'跨域地址',//你要解决的跨域目标
changeOrigin:true,//是否跨域
pathRewrite:{
'^/api':'跨域地址'
}
}
}, -
封装全局组件（在src创建一个文件夹，在文件夹中创建组件，然后再创建一个,index.js文件
main.js中引入)
//引入封装好的全局组件模块
import comCommponent from './common'
for(let i in comCommponent){
Vue.component(i,comCommponent[i])
} -
引入阿里矢量图标库 根据需求填写（//全局引入阿里矢量图main.js中 import './assets/font/iconfont.css'）
-
封装全局过滤器（在filter文件夹找那个创建一个index.js文件）
在main.js文件夹中引用
//引入封装好的全局过滤器模块
import comFilter from './filter'
for(let i in comFilter){
Vue.filter(i,comFilter[i])
} -
根据需求----全局过渡动画
npm i animate.cssmain.js
//全局引入animate.css
import 'animate.css/animate.main.css'
项目优化
-
高阶路由（全局导航守卫以及路由独享守卫和组件守卫）
-
路由懒加载(加快加载的效率)
方法①、 const 变量名= ()=>import('组件地址') 方法②、 const 变量名 = ()=>Promise.resolve(import('组件地址'))name 以及 alias
{ path:'/home', component:()=>import('组件地址'), name:'首页', alias:'/bugbug' //别名 =>可通过这个可以访问页面 }, -
