毕业设计电商网站源码-Vue_demo:基于vue.js框架的webapp网上商城

## vue_demo 项目记录 ### 初始化项目配置 + `npm init -y` 使用默认初始化 + `npm init` 自定义初始化 + `npm i` 安装包(根据package.json) + npm命令 + npm install xxx 安装模块如不指定版本号，默认会安装最新的版本，安装但不写入package.json + npm install xxx 0.0.1 安装指定版本的模块 + npm install --save xxx 安装并把模块的版本信息保存到dependencies（生产环境依赖）中，即你的package.json文件的dependencies字段中 + npm install --global xxx 全局安装 + npm install --save-dev xxx 安装并把模块版本信息保存到devDependencies（开发环境依赖）中，即你的package.json文件的devDependencies字段中 + npm install --save-optional xxx 安装并把模块安装到optionalDependencies（可选环境依赖）中，即你的package.json文件的optionalDependencies字段中 + npm install --save-exact xxx 精确的安装指定版本的模块，dependencies字段里每个模块版本号前面的^会取消掉 + npm 常用命令 + --save相当于-s，--global相当于-g，--save-dev相当于-d，--save-optional相当于-o，--save-exact相当于-e。 需要注意的是，我们在安装第三方包的时候通常会用到-s、-g、-d后缀，其他的很少用到。 + npm i XX -S 写入dependencies 开发环境 + npm i XX -D 写入devDependencies 生产环境 + npm i XX -g 全局安装 + dependencies 开发环境 devDependencies 生产环境 区别 + devDependencies 节点下的模块是我们在开发时需要用的，比如项目中使用的 gulp ，压缩css、js的模块。这些模块在我们的项目部署后是不需要的，所以我们可以使用 -save-dev(-D) 的形式安装。 + 像 express 这些模块是项目运行必备的，应该安装在 dependencies 节点下，所以我们应该使用 -save(-S)的形式安装。 ### 升级最新npm包 https://www.jianshu.com/p/a33702a4b096 + 使用npm-check + npm-check是用来检查npm依赖包是否有更新，错误以及不在使用的，我们也可以使用npm-check进行包的更新。 + 安装`npm install -g npm-check` + 检查npm包的状态(全局)`npm-check -u -g` + 检查npm包的状态(局部)`npm-check -u` + 通过上下键可以移动光标，使用空格键可以选择需要处理的包，回车直接进行处理。 ### 制作初始模板配置项目，上传github + 使用的是win7虚拟机 ``` git init git config --global user.name "Demonck" git config --global user.email "953432964@qq.com" ``` + 生成秘钥 ``` ssh-keygen -t rsa -C "953432964@qq.com" ``` + 在github配置秘钥 C:\Users\Dickesin\.ssh + 把代码存储到.git仓储中 ``` git add ./ git commit -m "这是对这次添加的东西的说明" ``` + 把项目推送到github上 ``` git push git@github.com:Demonck/Vue_demo_template.git master git@github.com:Demonck/Vue_demo.git ``` ## 开始项目 ## [主流开源协议之间有何异同？](https://www.zhihu.com/question/19568896) ## 用(传统方式git命令)命令行把修改过后的代码上传到码云或者github 1. git add ./ 2. git commit -m "提交信息" 3. git push --- # 主页面 ## 制作首页App组件 1. 完成 Header 区域，使用的是 Mint-UI 中的Header组件 2. 制作底部的 Tabbar 区域，使用的是 MUI 的 Tabbar.html + 在制作 购物车 小图标的时候，操作会相对多一些： + 先把 扩展图标的 css 样式，拷贝到 项目中 + 拷贝 扩展字体库 ttf 文件，到项目中 + 为 购物车 小图标 ，添加 如下样式 `mui-icon mui-icon-extra mui-icon-extra-cart` 3. 要在 中间区域放置一个 router-view 来展示路由匹配到的组件 ## 改造 tabbar 为 router-link 1. 更改tabbar中的a标签为router-link ## 设置路由高亮 1. 设置覆盖默认的路由高亮的类，默认的类叫做 router-link-active ## 点击 tabbar 中的路由链接，展示对应的路由组件 1. 创建各个组件，在router注册组件，配置路由规则 ## 制作首页轮播图布局 1. 使用Mint-UI的轮播图mt-swipe组件 ## 加载首页轮播图数据 1. 获取数据，使用 vue-resource 2. 使用 vue-resource 的 this.$http.get 获取数据 3. 获取到的数据，要保存到 data 身上 4. 使用 v-for 循环渲染 每个 item 项 ## 改造 九宫格 区域的样式 1. 使用MUI的九宫格样式，改造成六宫格 2. 添加router-link --- # 新闻页 ## 改造 新闻资讯 路由链接 1. 创建新闻组件 2. 注册新闻路由和匹配规则 ## 新闻资讯 页面 制作 1. 绘制界面，使用 MUI 中的 media-list.html 2. 在main.js中全局设置请求的根路径，使用vue-resource时路径不用写根域名 3. 使用 vue-resource 获取数据 4. 渲染真实数据 5. 导入格式化时间的插件，使用全局过滤器，实现时间格式化 ## 实现 新闻资讯列表 点击跳转到新闻详情 1. 把列表中的每一项改造为 router-link,同时，在跳转的时候应该提供唯一的Id标识符 2. 在新闻详情页中将 URL 地址中传递过来的 Id值，挂载到 data上，方便以后调用`id: this.$route.params.id` 3. 创建新闻详情的组件页面 NewsInfo.vue 4. 在 路由模块中，将 新闻详情的 路由地址 和 组件页面对应起来 ## 实现 新闻详情 的 页面布局 和数据渲染 1. 创建新闻详情页布局，新闻标题主标题-时间点击信息副标题-新闻内容html区-评论子组件区 2. 创建评论组件，在新闻详情页导入评论子组件，注册子组件，通过父组件向子组件传递新闻id值 --- # 评论组件 ## 单独封装一个 comment.vue 评论子组件 1. 先创建一个 单独的 comment.vue 组件模板 2. 在需要使用 comment 组件的 页面中，先手动 导入 comment 组件 + `import comment from './comment.vue'` 3. 在父组件中，使用 `components` 属性，将刚才导入 comment 组件，注册为自己的 子组件 4. 将注册子组件时候的，注册名称，以 标签形式，在页面中 引用即可 ## 获取所有的评论数据显示到页面中 1. 通过api获取评论内容 2. 每当获取新评论数据的时候，不要把历史数据清空覆盖，而是应该以历史数据，拼接上新数据 ## 实现点击加载更多评论的功能 1. 为加载更多按钮，绑定点击事件，在事件中，请求 下一页数据 2. 点击加载更多，让 pageIndex++ , 然后重新调用 this.getComments() 方法重新获取最新一页的数据 3. 为了防止 新数据 覆盖老数据的情况，我们在 点击加载更多的时候，每当获取到新数据，应该让 老数据 调用 数组的 unshift 方法，在头部拼接上新数组 ## 发表评论 1. 把文本框做双向数据绑定 2. 为发表按钮绑定一个事件，按钮使用mint-ui中的button 3. 校验评论内容是否为空，如果为空，则Toast提示用户 评论内容不能为空 4. 通过 vue-resource 发送一个请求，把评论内容提交给服务器 5. 当发表评论成功后，重新刷新列表，以查看最新的评论 + 如果调用 getComments 方法重新刷新评论列表的话，由于pageIndex页面增加，可能只能得到 后几页或最后一页的评论，前几页的评论获取不到 + 换一种思路： 当评论成功后，在客户端，手动拼接出一个 最新的评论对象，然后 调用 数组的 unshift 方法， 把最新的评论，追加到 data 中 comments 的开头；这样，就能 完美实现刷新评论列表的需求； + 全局设置 post 时候表单数据格式组织形式， 6. vue-resource——post请求， + 参数1： 请求的URL地址 + 参数2： 提交给服务器的数据对象 { content: this.msg } + 参数3： 定义提交时候，表单中数据的格式 { emulateJSON:true }，已在main中全局设置省略 --- # 图片分享页 ## 改造 图片分享按钮 为路由的链接并显示对应的组件页面