Vue2- 移动端购物商城

最新推荐文章于 2024-05-02 20:15:50 发布

Lucy-

最新推荐文章于 2024-05-02 20:15:50 发布

阅读量1.3k

点赞数

分类专栏： Vue 移动端文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/lm1022/article/details/118712679

版权

移动端同时被 2 个专栏收录

13 篇文章

订阅专栏

Vue

9 篇文章

订阅专栏

项目完整地址：mall-vue2.zip-HTML5文档类资源-优快云下载

vue-cli 快速创建vue2 基础项目

vue create mall-vue2

创建基础文件夹目录，src文件夹下文件夹目录：
① views 文件夹存放界面
② components 文件夹存放界面中局部组件
③ config 文件夹存放各种全局配置
④ images 文件夹存放图片
⑤ plugins 文件夹存放各种插件
⑥ router 文件夹存放路由
⑦ store 文件夹存放vuex相关文件
⑧ service 文件夹存放服务器端相关操作，接口等
⑨ styles 文件夹存放样式

Vue组件命名：参考Vuejs的官方文档风格指南

必要的：

组件名应该始终是多个单词的，
组件的 data 必须是一个函数。
prop 的定义应该尽量详细，至少需要指定其类型。
总是用 key 配合 v-for。
永远不要把 v-if 和 v-for 同时用在同一个元素上。
为组件样式设置作用域：<style scoped> <style module>

强烈推荐 (增强可读性，选取部分)：

组件文件：只要有能够拼接文件的构建系统，就把每个组件单独分成文件。
单文件组件文件名的大小写：单词大写开头 (PascalCase)，横线连接 (kebab-case)
基础组件名：应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。
模板中的组件名大小写：PascalCase 相比 kebab-case 有一些优势：
Prop 名大小写：在声明 prop 的时候： camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
多个 attribute 的元素：多个 attribute 的元素应该分多行撰写，每个 attribute 一行。
模板中简单的表达式：组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。
简单的计算属性：应该把复杂计算属性分割为尽可能多的更简单的 property。
带引号的 attribute 值：非空 HTML attribute 值应该始终带引号
指令缩写：指令缩写 (用 : 表示 v-bind:、用 @ 表示 v-on: 和用 # 表示 v-slot:) 应该要么都用要么都不用。

Vue组件中的方法书写顺序

- name
- components
- props
- data
- created
- mounted
- methods
- filter
- computed
- watch

Vue css BEM命名方法

BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目。

.block 代表了更高级别的抽象或组件。

.block__element 代表.block的后代，用于形成一个完整的.block的整体。

.block--modifier代表.block的不同状态或不同版本。

Vant自定义引入iconfont图标

//icon-xxxxx 为图标名称

 // font class  引入iconfont.css
 <i class="iconfont icon-xxxxx"> </i>

// Symbol    进入main.js文件，引入iconfont.js
import '@/xxx/iconfont.js'

 
<svg class="font-icon" aria-hidden="true">
  <use xlink:href="#icon-xxxxx"></use>
 </svg>

Vue-Cli 选择Default(vue 2)。安装less和less-loader报错：Syntax Error: TypeError: this.getOptions is not a function

【原因】less-loader的版本过高导致

【解决】安装低版本

npm i --save-dev less@3.10.3
npm i --save-dev less-loader@5.0.0

Vue 只认组件本身那层 class，其内部继续产生的 class 是不认的

【解决】Vue2.0 style样式scoped使用less时样式穿透覆盖：加上 /deep/ 让其作用域往下钻

<style lang="less" scoped="">

.van-grid{
    padding: 10px 0;
}
/deep/.van-grid-item .van-grid-item__content {
  padding: 5px;
}

</style>

Vue使用本地json数据（vue-cli4.5：访问本地 json文件并读取数据使用 axios）

新建vue项目，在终端安装

npm install --save axios vue-axios

导入下列代码

import axios from 'axios'

创建你的本地json数据（注意，json文件一定要创建在public文件夹中）

在需要数据的页面引入axios，

异步加载数据（链接是你打开vue页面的链接，后面是json文件名称）mounted:页面加载完成后执行这个方法

 mounted() {
    axios.get('./data.json').then((res) => {
      console.log('res.data = ', res.data)
    })
  }

浏览器 console 显示：

json数据原格式：

Vant Grid 怎么从json循环出数据和图片

<van-grid :column-num="4">
  <van-grid-item v-for="nav in navList"  :key="nav.id" :text="nav.name" >
    <div class="icon-img">
      <img :src="nav.img_url" />
    </div>
    <div class="icon-text">
      <span>{{nav.name}}</span>
    </div>
  </van-grid-item>
</van-grid>

vue router 判断是否登录

requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的


移动app 只需验证首页是否登陆

meta: {
  title: 'index',
  requireAuth: true
}
main.js中

router.beforeEach((to, from, next) => {
  if (to.matched.some(m => m.meta.requireAuth)) {
    console.log(store.getters.token)
    // 对路由进行验证
    if (store.getters.token) { // 已经登陆
      next() // 正常跳转到你设置好的页面
    } else {
      // 未登录则跳转到登陆界面
      next({ path: '/login' })
    }
  } else {
    next()
  }
})

vue 中 query传参 / params传参 this.$route.query、this.$route.params

1.用法

query可以用name或path来引入

//传参:

this.$router.push({
        path:'/detail/:id',
        query:{
          id:id
        }
      })

//接收参数:

this.$route.query.id

params必需要用name来引入，接收参数都是类似的，分别是:

params传参，push里面只能是 name:‘xxxx’,不能是path:’/xxx’,
因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined

// 传参:

this.$router.push({
        name:'Detail',
        params:{
          id:id
        }
      })


// 接收参数:

this.$route.params.id

2. 地址栏表现形式上:

query： /login?id=1&name=zs
params： login/1/zs

切换路由

简单说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，浏览器刷新页面不会消失，

而params相当于post请求，参数不会在地址栏中显示，浏览器刷新页面后消失。

// query通过path切换路由

<router-link :to="{path: 'Detail', query: { id: 1 }}">前往Detail页面</router-link>

// params通过name切换路由

<router-link :to="{name: 'Detail', params: { id: 1 }}">前往Detail页面</router-link>