前言
在学习React.js后,为了将学习React.js的相关知识综合运用起来，我决定把自己用Vue.js写的ZYU商城项目用React.js改写一下。这样后台和数据库都可以重复利用，一些静态资源也可以共享，所以对该项目重新回顾，总结其中的经验和技巧。
这里主要关注于前端，后台（express）和数据库(mongodb)不涉及。
1.项目结构
项目由vue-cli脚手架工具直接生成。这里主要总结一下，在项目目录中比较容易混淆的几点。
- 1.1 静态资源目录
项目结构中我们有两个静态资产目录：src/assets和static/
src/assets存放需要webpack打包的静态资源，这些资源作为模块依赖项由Webpack解决。一般存放项目开发中需要引用的资源。（相对路径访问）需要用require引入
相比之下，static/下的资源， Webpack根本不处理：它们直接被复制到最终目的地，并且具有相同的文件名。您必须使用绝对路径（／static／...）来引用这些文件。
- 1.2配置文件
build/
该目录保存开发服务器和生产webpack版本的实际配置。通常情况下，除非要定制Webpack加载器，否则不需要触摸这些文件，在这种情况下，您应该看看build/webpack.base.conf.js
config/index.js
这是主要的配置文件，它为构建设置提供了一些最常见的配置选项。开发过程中的API代理和与后端框架集成。
2.组件
-
2.1一般组件和页面组件
一般组件我们习惯放在src/components ，这些组件可以被公用。
页面组件（其实也是一个组件，但这个组件由其他组件一起构成页面）放在自己新建的目录下（一般命名为views,pages之类）
-
2.2具有“交互”能力的公用组件
这种组件的内容和显示都是有父组件来控制。比如项目中用到的一个模态框组件。
组成： 模态框组件=弹出框+遮罩层
弹出框分为顶部栏+展示内容+按钮，其中展示内容和按钮可以作为插槽动态添加内容。
父子通信：利用父子通信机制来控制组件的显示。
父->子：属性绑定控制模态框的展示
子->父 通过事件机制关闭模态框
3.数据接口代理
4.CSS
-
4.1 CSS不同书写导入方式的作用域
import 和 <style></style> 都是全局的
<style scoped></style>是局部的（增加样式hash属性来实现） -
4.2 响应式布局
布局上使用css3媒体查询实现响应式布局
@media screen and (min-width: 1200px) {
}
@media only screen and (min-width: 992px) and (max-width:1200px){
}
@media only screen and (min-width: 768px) and (max-width:991px){
}
@media only screen and (max-width: 767px) {
}
response.png
-
4.3 svg的处理
项目一开始将svg内容放入相应组件的template当中，导致这些使用svg的组件结构很不清晰。后来我将这些svg提取到一个Svg.vue组件中，然后在App.vue中引入。
Svg.vue.png
App.vue.png
use.png
这样以来每个组件的代码瞬间清晰很多。
但是这种方法不能做到按需加载svg,当symbol越来越多，代码结构也混乱。因此我们可以使用
vue-svg-icon插件来帮助我们管理svg 文件。
使用参考：在 React、Vue项目中使用 SVG
5.引用的插件
（1）vue-router
vue路由
（2）axios
异步请求插件
（3）vue-infinite-scroll
无限滚动加载数据（类似于分页加载数据），主要实现商品的滚动加载
（4）vue-lazy-load
图片懒加载
（5）vuex
vue的状态管理器，项目中管理购物车数量。个人总结的话，一般情况下，需要用vuex管理的状态具有两个特征:
- 这个状态依赖的组件被不同的页面复用
- 同时，这个状态还会被在这些页面的组件中修改
6.实用模块
参考Vue.js作者尤雨溪使用范例中的一个金额格式化模块currency
Vue.filter("currency",currency); //过滤器
网友评论