angular1混合vue项目指导

448 阅读2分钟

废话

我也是醉了,我觉得我和重构项目,技术架构迁移杠上了。每次看到一个项目都喜欢拿到手上看看,能不能改成自己喜欢的风格。

这不又来一个项目

1、新建一个vue项目

用vue create 项目名称 创建一个新的vue项目

参考当前目录结构,其中public下面的文件是不会被打包的,直接拷贝到打包后的目录,并且可以直接访问运行。

2、对angular项目简单改造

1、入口index.html

新增一个div:

2、拷贝整个ag项目到public下面

1、注意webpack打包之后的出库js文件为app.js,如果ag项目出口为app.js请修改app.js名称或者修改webpack出口js文件名称

2、可能有项目在开发的时候使用了js代码的关键词,或者内置函数的,请提前修改好,否则容易引起vue项目挂掉。比如:map内置函数

3、关于路由

1、ag项目不要定义404路由,如果设置重定向到首页请在vue的项目中定义404页面或者重定向到ag项目首页

2、vue路由的运行在ag路由之后,所以vue的路由不容易覆盖ag的路由。但是类似跳转到ag路由需要用原生的路由跳转功能。

上述的全局404重定向,请在vue单文件内部create生命周期之前进行重定向到ag项目

4、数据共享问题

关于全局数据共享等问题,请参考监听缓存数据等方式。

3、双框架优缺点

优点

1、新的开发有完整的新的生态链支持

2、新的开发支持模块化开发(非常重要)

3、可以采用新的语法开发了

4、后期首屏加载不会因为不断的开发增大

缺点:

1、需要双框架熟悉

2、老的页面不重构的情况下需要继续维护

3、所有开发之前比如css响应式定义需要以ag为准