基于vue全家桶移动端高仿小米商城、vue-cli项目笔记

项目地址:https://github.com/JerrybroDu/vue-mall

vue-cli项目注意点

  • vue-cli项目克隆到本地,需要cnpm install(即安装依赖包),再cnpm run serve(即启动项目)

  • cnpm install [插件名] --save(-S) 【保存到dependencies:{xxx}】
    cnpm install [插件名] --save-dev(-D) 【保存到devDependencies:{xxx}】
    区别:
    devDependencies下的插件,是项目上线之后不会用到的插件,即不打包到项目中;
    dependencies下的插件,是项目发布上线之后还会依赖用到的插件,没有这些插件,项目不能运行,即打包到项目中
    总之: 后面安装的插件都保存到dependencies:{xxx}中就完事了

  • import axios from ‘axios’ 与 import axios from ‘./axios’,
    前一种写法则会在node_modules中找当做插件,后一种在src下的目录中找自己定义的文件

    • 配置文件修改了,需要重启服务器才能生效(如:修改了vue.config.js的配置)
  • vue-cli4.0项目中,组件的插槽< slot name=‘body’ >< /slot >,
    在xxx.vue页面使用,需要包一层template, 如


	

  • this.$store.dispatch(‘saveUserName’,res.username) 这句等同下面3条语句
    1.import { mapActions } from ‘vuex’ 【导入vuex的actions,用于actions方法很多的情况,这里就尝试下新形式】
    2. …mapActions([‘saveUserName’]) 【参数是个数组用于字符串存放方法名,即结构actions中的saveUserName()方法,这里就直接可以使用该方法】
    3. this.saveUserName(res.username) 【正常使用该方法,传递参数】

  • 获取动态路由后面的参数: (如获取参数32, http://localhost:8080/#/product/32)

  const id = this.$route.params.myid    
  【注:动态路由params参数是自己定义的名字,为myid】
  【注: this.$router.push('/login') 是路由跳转,注意区分】
  • cookie中的userid应该做成token(进行加密后的凭证来传输)

  • 路由带参数跳转,有如下两种方式:

【注:用params传参不显示在url地址上;而用query传参回显示在url地址上】  
// 方法一:(效果等同法二,不过该方式参数'?键名=值名'不显示在url上)
  this.$router.push({
     name: 'index',
     params: {
       键名: 值名
     }
   })
   
   // 方法二:(参数‘值名’显示在url上,且跳转到页面/index也不消失)
   this.$router.push({
     path: '/index',
     query: {
       键名: 值名
     }
   })
  • [变量] :加载变量
 components: {
   // [变量]表示加载变量, Pagination.name就是el-pagination
   [Pagination.name]: Pagination,
 }
  • axios使用请求的注意点:
// 【注】get请求的传参需要写在params中
axios.get('url',{
	params: {
		参数名:值
	}
}).then(function (response) {}).catch(function (error) {})

// post请求的传参直接写在第二个参数对象中(无需再写在params里)
axios.get( 'url',{ 参数名:值 } ).then(function (response) {}).catch(function (error) {})
  • 打开新窗口的方式:
    JS代码控制: window.open(‘url’,’_blank’),
    html标签控制: < a href=‘url’ target="_blank" >< /a >

  • CSS属性:

	 // 该属性挺好用,设置border-box后,不用管padding对原来设置的width影响,padding值都算在width内了
	 box-sizing: border-box;
  • 标签的src可以存放.svg的矢量图
一个svg图片 

项目目录

  • public: 一般放大图片,

  • src/assets: 放小图片,可以转成base64,不用请求图片资源

    • src/assets/scss/reset.scss :重置浏览器的样式,防止默认浏览器样式干扰
    • src/assets/scss/mixin.scss :一般放置css函数,即抽取出来复用高的css属性,如span设置图标、flex布局都可以抽离出来,使用函数替代
    • src/assets/scss/base.scss :抽取的一些公共样式,即多处相同类名设置相同的css属性,需要抽离出来,提高代码复用
  • src/components: 一般放页面组件,命名方式用大头驼峰命名:如 NavHeader.vue

  • src/views: 放页面(需要单独配置路由的页面),命名方式用小写:如 index.vue、 home.vue

  • src/router/index.js: 路由的配置

  • src/store/index.js: vuex状态管理

  • src/storage: 这里放置缓存sessionStorage、cookie、localStorage等存取以及删除等公共方法,便于操作缓存(虽然已经缓存提供了一些API,但自己封装的能根据项目而定)

  • env.js: 该配置文件是自己抽取出来的,根据CORS和JSONP跨域才做此设置,接口代理跨越则不需要这个

    • .env.prev: 是自定义vue.config.js --mode=prev(名称为prev自定义的),且env.js中也要对应prev

项目简介

  • public文件夹: 是项目的根目录,即 '/imgs/logo.png’来引用public下的资源

  • main.js:

    • 全局配置,这里配置router、store、Vue, 一些各个.vue页面通用的插件放入Vue.use(VueCookie)中
    • 使用图片懒加载插件,加载内容时,显示loading指向的.svg矢量图(可根据自己需要改变)
    import VueLazyLoad from 'vue-lazyload'
    Vue.use(VueLazyLoad, {
    	loading: '/imgs/loading-svg/loading-bars.svg'
    })
    
  • APP.vue:(别忘记了,单页面App.vue要设置个< router-view >标签)

 
// 用显示路由配置的.vue页面
  • views中:

    • detail.vue、 index.vue、 product.vue 将放入home.vue的< router-view >中(为什么这么写,因为detail、index、product三个页面都包含相同的头部导航和底部导航,所以另起一个home.vue来存放相同部分,不同部分单独替换< router-view >,这样复用性更高)
      【注意】这里其实可以就写成detail.vue、 index.vue、 product.vue三个页面,配置对应单独的路由,不过相比上面的写法,需要每个页面中单独各引一次头部导航和底部导航,代码复用性差点,效果却一样。

    • orderConfirm.vue、 orderList.vue、 orderPay.vue、 alipay.vue 将放入order.vue的< router-view >中,复用了相同的头部导航和底部栏。

  • router/index.js:

  // 动态路由(即url中可加参数并获取):
  // http://192.168.0.107:8080/product/id(一个参数)
  path: '/product/:id',
  name: 'product',
  component: Product

主要使用的插件/库

  • axios / vue-axios
  • element-ui
  • vue-lazyload
  • vue-awesome-swiper
  • vue-cookie
  • qrcode

你可能感兴趣的:(#,Vue项目)