Vue干货分享

1.进入要创建项目的目录

cd 路径
#创建项目
vue init webpack luffycity
#进入项目目录，启动项目进行测试
npm run dev

2.常用组件安装

npm i element-ui -S --registry https://registry.npm.taobao.org
npm i axios -S --registry https://registry.npm.taobao.org

3.main.js文件配置如下

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// 注册并使用vue-video插件
import 'video.js/dist/video-js.css';
// require('video.js/dist/video-js.css'); 与上一句等同。

import 'vue-video-player/src/custom-theme.css';
// require('vue-video-player/src/custom-theme.css'); 与上一句等同。

import VideoPlayer from 'vue-video-player';
Vue.use(VideoPlayer);

Vue.config.productionTip = false;
Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});

4.router 下的index.js配置如下

此时一定要在App.vue中设置出口，否则不会自动匹配路由

5.关于路径的问题

例如匹配静态路径使用

#这个路径是以src为根目录
<img src="@/assets/head-logo.svg" alt="">

坑：字典中的值为路径时，我们需要通过require( )将路径包裹起来，否则这个路径不可用

6.常用方法及功能

token认证需要携带的参数

get请求

let token = localStorage.user_token || sessionStorage.user_token;
        this.$axios.get(`${this.$settings.Host}/users/information/${this.id}/`, {
          headers: {
            'Authorization': 'jwt ' + token,
          }
        }).then((res) => {
          console.log(res.data);
          this.mobile = res.data.mobile;
          this.WeChat = res.data.WeChat;
          this.email = res.data.email;
          this.username = res.data.username;
        })

post请求与put请求一样

let token = localStorage.user_token || sessionStorage.user_token;

this.$axios.put(`${this.$settings.Host}/users/information/${this.id}/`, {
          userid: this.id, username: this.username, WeChat: this.WeChat, email: this.email,

        }, {
          headers: {
            'Authorization': 'jwt ' + token,
          }
        }).then(data => {
          console.log(data);
          this.$message({
            message: '修改信息成功',
            type: 'success'
          });

7.错误展示

let data = {'mobile': '手机号码', 'password': '密码', 'WeChat': '微信', 'email': "邮箱", 'username': "用户名"};
          let ret = error.response.data;
          let msg = '';
          for (let key in ret) {
            // console.log(ret[key]);
            if (!data[key]) {
              msg = ret.non_field_errors[0];
            } else {
              let s = ret[key][0];
              console.log(s);
              msg = s.replace(/.*?字段/, data[key]);
            }
          }
          this.get_information();
          this.$message.error({'message': msg})

8.组件传值

父组件像子组件传值

父组件

          <CartItem v-for="(value,index) in cart_list" :key="value.id" :cart="value"></CartItem>

子组件接收

    props: ['cart']

9.配置vuex，及使用

官网:https://vuex.vuejs.org/zh/

安装

https://vuex.vuejs.org/zh/

这个状态自管理应用包含以下几个部分：

创建如下目录

• state，驱动应用的数据源；

• view，以声明方式将 state 映射到视图；

• actions，响应在 view 上的用户输入导致的状态变化。

index.js 文件

import Vue from 'vue'
import Vuex from 'vuex'
import {default} from "vuex/dist/vuex";

Vue.use(Vuex)

export default new Vuex.Store({
  // 数据仓库，类似于vue中的data
  state: {
    cart: {
      cart_length: 0,
    }
  },
  // 操作数据的具体方法 类似于vue的methods
  mutations: {
    add_cart(state, cart_len) {
      state.cart.cart_length = cart_len;
      
    }
  }
})

在main.js中将store挂载进去

此时我们所有的 应用就可以使用公共使用store了

• 具体使用

例如获取购物车中的条数
         <b>{{$store.state.cart.cart_length}}</b>

• 调用其具体的方法

          this.$axios.get(`${this.$settings.Host}/cart/course_len/`, {
  
  

  

10.配置vue-video

• 安装vue-video

  npm install vue-video-player --save
  

• main中注册

  在main.js中注册加载组件

  require('video.js/dist/video-js.css');
  require('vue-video-player/src/custom-theme.css');
  import VideoPlayer from 'vue-video-player'
  Vue.use(VideoPlayer);
  

• detail.vue

<div class="wrap-left">
          <video-player class="video-player vjs-custom-skin"
                        ref="videoPlayer"
                        :playsinline="true"
                        :options="playerOptions">
          </video-player>
        </div>