jquery转vue项目总结

脚手架创建vue项目

由于要修改的项目只有一个页面，因此脚手架只需要配置babel即可。

安装jquery

由于原来的页面很多的动效是依赖jquery实现的，为了方便这里不再重写，直接把原来的相关代码拿来用。

1. 安装jquery

npm install jquery --save
1

2. 导入并使用

import $ from 'jquery';
const jQuery = $;
1
2

3. 将jquery的插件代码复制过来逐个导入
   

静态素材

1. 将原本文件夹中的public文件夹下的素材全部放入到assets文件夹中，然后使用查找与替换功能将路径中的public全部换为assets
2. 项目中用到了font-awesome，在vue中可以直接安装，然后引入

npm install font-awesome --save
1

import 'font-awesome/css/font-awesome.min.css'
1

3. 原有的css也直接引入，不再重写。
   

组件化

将页面中重复出现的部分抽离为组件，并使用props将数据传入。

这里要注意，对于图片资源的传入，不可以直接传递路径，要使用require方法将图片引入

双向数据流

将表单数据和页面中的一些资源抽离到data中去，实现双向数据绑定，这样做还可以将数据集中在一起统一管理，便于日后的修改。

对于列表形似的数据改用v-for书写，减小代码量。

修改完成之后，某些功能出现的问题，暂时先这样，解决之后再来填坑。