# Vue-Cms **Repository Path**: disent/Vue-Cms ## Basic Information - **Project Name**: Vue-Cms - **Description**: Vue-Cms - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2019-03-27 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README #关关关 #//cnpm i vue-router -S 安装vue路由 #用git来管理代码 ##先建一个 .gitignore 文件 忽略文件 ## git 配置 ## 1. 初始化用户名：$ git config --global user.name "用户名" 用户名修改为自己的用户名。 ## 2. 初始化邮箱：$ git config --global user.email "邮箱地址"。 ## 注：如果用户名或邮箱输入错误需要重置，使用以下命令修改： ## $ git config --global --replace-all user.name "用户名" ## $ git config --global --replace-all user.email "邮箱地址" ## 将代码同步到本地git上 ## git init ## git status ## git add . ## git commit -m "init my project" ## 用码云管理代码 ### 1.先注册码云账号 ### 2.设置里-安全设置-SSH公钥-添加公钥 ## 怎样生成公钥 ### 1.打开 Git Bash 运行以下命令 ### 2. ssh-keygen -t rsa -C "xxxxx@xxxxx.com" 按照提示完成三次回车 ### 3. cat ~/.ssh/id_rsa.pub ### 4.获取到公钥,然后去添加.接着去创建一个空的仓库. ## 上传代码 ### 1.关联仓库 git remote add origin https://gitee.com/disent/Vue-Cms.git ### 2.Push代码 git push -u origin master ## 当代码修改完后,要怎么再次上传到码云 ### 1.先按上面步骤同步到本地git上 git add . ### 2.git commit -m "init my project" ### 3.git push ## 应用 vscode 工具来上传 ### 1.代码管理器 ### 2.在 Message 输入你这次修改的内容备注 ### 3.点上面的 √ 提交. 同步到本地的 git 里面 ### 4.再点 ... 更多 点 推送 (就是git push命令) ## 制作首页App组件 1. 完成 Header 区域,使用的是 Mint-UI 中的Header组件 2. 制作底部的 Tabbar 区域,使用的是 MUI 中的 Tabbar.html 3. 要在中间区域放置一个 router-view 来展示路由匹配到的内容 ## 改造 tabbar 为 router-link ## 设置路由高亮 ## 点击 tabbar 中的路由链接，展示对应的路由组件 ## 制作首页轮播图布局 ## 加载首页轮播图数据 http://vue.studyit.io/ 1.获取数据，使用vue-resource //cnpm i vue-resource -S 2.使用 vue-resonce this.$http.get 获取数据 3.获取到的数据，要保存到 data 身上 4.使用 v-for 循环渲染 每个 item 项 ## 改造9空格区域的样式 ## 码云上下载自己的代码 git clone https://gitee.com/disent/Vue-Cms.git ## 修改首页链接为路由路径 ## 用 MUI media-list.html 做新闻列表 ## cnpm i moment -S 定义全局过滤器 用 node.js 中的 moment 方法 解决日期 过滤器 ## 点击新闻列表到新闻详情 ## 单独封装一个 comment.vue 评论子组件 1.先创建一个 单独的 comment.vue 组件模板 2.在需要使用 comment 组件的页面中，先手动 导入 comment 组件 + import comment from './comment.vue' 3.在父组件中，使用 'components' 属性，将刚才导入 comment 组件，注册为自己的 子组件 4.将注册子组件时候的，注册名称，以 标签形式，在页面中引用即可 ## 获取所有的评论数据显示到页面中 ## 实现点击加载更多评论的功能 1.为加载更多按钮,绑定点击事件，在事件中，请求 下一页数据 2.点击加载更多，让 pageIndex++ ,然后重新调用 this.getCommentList() 方法重新获取最新一页的数据 数组拼接 concat() ## 页面切换动画，用了position: fixed; 固定定位 ## 发表评论功能 1.把文本框做双向数据绑定 2.为发表评论按钮绑定一个事件 3.校验评论内容是否为空，如果为空，用Toast提示用户，评论内容不能为空 4.通过 vue-resource 发送一个请求，把评论内容提交给服务器。 5.当发表评论OK后，重新刷新列表，以查看最新的评论 + 当发表成功，返回状态为200时，直接把提交的数据添加到评论列表头部去。用unshift()方法来实现 ## 改造图片分享 按钮为 路由链接，并显示对应的组件页面 ## 绘制图片列表 组件页面 结构并美化样式 1. 制作顶部的滑动条 2. 制作 图片列表 ### 制作顶部滑动 1. 需要借助MUI中的tab-top-webview-main.html页面 2. 需要把 slider 区域的 mui-fullscreen 类去掉 3. 若使用区域滚动组件，需手动初始化scroll控件 + 导入mui 脚本 + 示例：初始化scroll控件： ``` mui('.mui-scroll-wrapper').scroll({ deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006 }); ``` 4. 我们在初始化 滑动条的时候，导入了 mui.js 但是，控件台报错了 ："Uncaught TypeError:'caller','callee',and 'arguments' properties may not be accessed on strict mode" + 经过我们合理的推测，应该是mui.js中用到了这三个'caller','callee',and 'arguments'，但是webpack 打包好的 bundle.js 中默认是启用了严格模式的，所以，这两者冲突了。 + 解决方案：移除严格模式 ++ 安装 cnpm install babel-plugin-transform-remove-strict-mode -D ++ 在 .babelrc 中加入 "plugins": ["transform-remove-strict-mode"] 5. 刚进入图片分享页面，的时候，滑动条不能正常工作，如果要初始化滑动条，必须要DOM元素加载完毕，所以我们把 初始化的代码 放入到 mounted() 中去初始化。 ## 懒加载 import { Lazyload } from 'mint-ui'; ## 实现 点击图片 跳转到 图片详情页面 1. 在改造 li 成 router-link 的时候，需要使用 tag 属性指定要渲染为 哪种元素 ## vue-preview 一个Vue集成PhotoSwipe 图片预览插件 https://github.com/LS1231/vue-preview 1. cnpm i vue-preview -S ## Examples ## 绘制商品列表 ## 尝试在手机上测试自己的项目 1.要保证自己的手机可以正常运行 2.要保证手机和开发项目的电脑同一个网络 也就是说手机可以访问到电脑的IP 3.打开自己的项目中 package.json 文件，在 dev 脚本中，添加一个 --host 指令，把当前电脑的主机 WIFI IP地址，设置为 --host 的指令值 + 如何查看自己电脑所处WIFI 的IP 在cmd 终端中运行 ipconfig 查看无线网的ip地址 ## MUI 组件除了用 @click 还可以用 @tap ##在网页中有两种跳转方式 （商品列表） 1.方式1 使用 a 标签 的形式 叫做 标签跳转 2.方式2 使用 window.location.href 的形式，叫做 编程式导航 ## this.$router.go(-1) 后退 ## 引入 vuex ## cnpm i vuex -S