脚手架创建vue项目
由于要修改的项目只有一个页面,因此脚手架只需要配置babel即可。
安装jquery
由于原来的页面很多的动效是依赖jquery实现的,为了方便这里不再重写,直接把原来的相关代码拿来用。
- 安装jquery
npm install jquery --save
- 导入并使用
import $ from 'jquery';
const jQuery = $;
- 将jquery的插件代码复制过来逐个导入
静态素材
- 将原本文件夹中的public文件夹下的素材全部放入到assets文件夹中,然后使用查找与替换功能将路径中的public全部换为assets
- 项目中用到了font-awesome,在vue中可以直接安装,然后引入
npm install font-awesome --save
import 'font-awesome/css/font-awesome.min.css'
- 原有的css也直接引入,不再重写。
组件化
将页面中重复出现的部分抽离为组件,并使用props将数据传入。
这里要注意,对于图片资源的传入,不可以直接传递路径,要使用require方法将图片引入
双向数据流
将表单数据和页面中的一些资源抽离到data中去,实现双向数据绑定,这样做还可以将数据集中在一起统一管理,便于日后的修改。
对于列表形似的数据改用v-for书写,减小代码量。
修改完成之后,某些功能出现的问题,暂时先这样,解决之后再来填坑。