Vue相关知识点整合

11 篇文章 0 订阅
1.1 vue项目初始化
1.1.1 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
1.1.2 全局安装vue命令
cnpm install -g @vue/cli
1.1.3 创建新项目
vue create study-home
1.1.4 App.vue引入 router-view
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'App',
    components: {}
  }
</script>

<style>
</style>
1.1.5 重置项目样式
  • 安装normalize.css
npm install --save normalize.css
# 或者使用
yarn add normalize.css
yarn install
  • main.js方式引入
import 'normalize.css/normalize.css'
import './assets/style.css';
1.2 vue项目相关操作
1.2.1 vue禁用eslint

​ 在项目的根目录下建立 vue.config.js,添加以下内容:

module.exports = {
  lintOnSave: false
}
1.3 整合vue-router
1.3.1 安装 vue-router
npm install vue-router
1.3.2 引入vue-router

在项目的 src 目录下新建 router/index.js,内容如下:

import Vue from 'vue'
import Router from 'vue-router'
import Home from "../view/Home";


Vue.use(Router)

// 路由配置
let constRouter = [
  {
    path: '/home',
    name: 'Home',
    component: Home,
    meta: {
      title: '首页'
    }
  },
  // 全不匹配的情况下返回主页
  {
    path: '*',
    redirect: '/home'
  },
]

let router = new Router({
  mode: 'history',
  routes: constRouter
})

// 导航守卫
router.beforeEach((to, from, next) => {
  document.title = to.meta.title
  next()
})

// 路由导航钩子
router.afterEach((to, from, next) => {
  window.scrollTo(0, 0)
})

export default router

项目 src 下新建 views 目录,用于存放普通页面,比如 Home.vue 主页

1.3.3 main.js 配置路由
import Vue from 'vue'
import App from './App.vue'
import router from "./router";

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
1.3.4 配置两个字符缩进

​ 在项目根目录下新建 .editorconfig文件,它帮助开发人员在不同的编辑器和IDE维护一致的编码样式。

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
1.4 整合vuex
1.4.1 安装vuex
npm install vuex --save
1.4.2 引入vuex
  • 在项目的 src 下新建 store目录,并在该目录下新建 index.js,内容如下:
import Vue from 'vue'
import Vuex from 'vuex'
import topic from './modules/topic';

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    topic
  }
})
  • 在store目录新建 modules/topic.js 结构,topic.js内容如下:
import request from "../../utils/request";

export default {
  namespaced: true,
  state: {
    topicList: [],
  },
  getters: {},
  mutations: {
    setTopicList(state, data) {
      state.topicList = data
    },
  },
  actions: {
    getTopicList(context) {
      request.get('/v1/topic/list').then(res => {
        if (res.code === 200) {
          context.commit('setTopicList', res.data)
        } else {
          console.log(res.message)
        }
      })
    }
  }
}
1.4.3 使用vuex
<div class="panel">
    <div class="panel-body">
        <a v-for="topic in topicList" :key="topic.id" class="topic-item"
             @click="handleTopic(topic.id)">
            {{topic.topicName}}
        </a>
    </div>
</div>

<script>
  import diaryApi from '../../api/diary'
  import {mapState} from "vuex";

  export default {
    name: 'DiaryList',
    components: {BasicLayout},
    data() {
      return {
        topicId: -1,
      };
    },
    created() {
      this.initData()
      // 初始化vuex数据
      this.$store.dispatch('topic/getTopicList')
    },
    computed: {
      ...mapState('topic', ['topicList']),
    },
    methods: {
      // 初始化数据
      initData() {
        diaryApi.listDiary(this.topicId).then(res => {
          this.diaryList = res.data.rows
        })
      },
      // 处理主题
      handleTopic(topicId) {
        this.topicId = topicId
        this.initData()
      }
    },
  }
</script>
1.5 整合axios
1.5.1 安装axios
npm install --save axios
1.5.2 定义request.js

​ 在项目 src 建立 utils/request.js,内容如下:

import axios from 'axios'
import {message, Modal, notification} from 'ant-design-vue'
import moment from 'moment'

moment.locale('zh-cn')
import router from '../router'

// 统一配置
let SERVICE = axios.create({
  baseURL: "http://localhost:9050",
  responseType: 'json'
})

// 拦截请求
SERVICE.interceptors.request.use((config) => {
  // 有 token就带上
 /* if (store.state.account.token) {
    config.headers.Authentication = store.state.account.token
  }*/
  return config
}, (error) => {
  return Promise.reject(error)
})

// 异常拦截处理器
const errorHandler = (error) => {
  if (error.response) {
    let errorMessage = error.response.data === null ? '系统内部异常,请联系网站管理员' : error.response.data.message
    switch (error.response.status) {
      case 404:
        router.push('/404')
        break
      case 403:
        router.push('/403')
        break
      case 500:
        router.push('/500')
        return
      case 401:
        notification.warn({
          message: '系统提示',
          description: '很抱歉,您无法执行该操作,可能是因为没有相应权限或者登录已失效!',
          duration: 4
        })
        break
      default:
        notification.error({
          message: '系统提示',
          description: errorMessage,
          duration: 4
        })
        break
    }
  }
  return Promise.reject(error)
}

// 拦截响应
SERVICE.interceptors.response.use((response) => {
  return response.data
}, errorHandler)

// 封装请求
const request = {
  post (url, params) {
    return SERVICE.post(url, params, {
      transformRequest: [(params) => {
        let result = ''
        Object.keys(params).forEach((key) => {
          if (!Object.is(params[key], undefined) && !Object.is(params[key], null)) {
            result += encodeURIComponent(key) + '=' + encodeURIComponent(params[key]) + '&'
          }
        })
        return result
      }],
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    })
  },
  put (url, params) {
    return SERVICE.put(url, params, {
      transformRequest: [(params) => {
        let result = ''
        Object.keys(params).forEach((key) => {
          if (!Object.is(params[key], undefined) && !Object.is(params[key], null)) {
            result += encodeURIComponent(key) + '=' + encodeURIComponent(params[key]) + '&'
          }
        })
        return result
      }],
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    })
  },
  get (url, params) {
    let _params
    if (Object.is(params, undefined)) {
      _params = ''
    } else {
      _params = '?'
      for (let key in params) {
        if (params.hasOwnProperty(key) && params[key] !== null) {
          _params += `${key}=${params[key]}&`
        }
      }
    }
    return SERVICE.get(`${url}${_params}`)
  },
  delete (url, params) {
    let _params
    if (Object.is(params, undefined)) {
      _params = ''
    } else {
      _params = '?'
      for (let key in params) {
        if (params.hasOwnProperty(key) && params[key] !== null) {
          _params += `${key}=${params[key]}&`
        }
      }
    }
    return SERVICE.delete(`${url}${_params}`)
  },
  upload (url, params) {
    return SERVICE.post(url, params, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
  }
}
export default request
1.5.3 main.js 全局引入
import Vue from 'vue'
import App from './App.vue'
import router from "./router"
import store from "./store"
import Axios from "axios";
import request from "./utils/request";

// 引入antd
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);

// 引入mavonEditor
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)

import 'normalize.css/normalize.css'
import './assets/style.css';

Vue.config.productionTip = false

Vue.prototype.$get = request.get
Vue.prototype.$post = request.post
Vue.prototype.$put = request.put
Vue.prototype.$delete = request.delete
Vue.prototype.$export = request.export
Vue.prototype.$download = request.download
Vue.prototype.$upload = request.upload
Vue.prototype.$axios = Axios

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
1.6 整合antd
1.6.1 安装antd
yarn add ant-design-vue
1.6.2 main.js 引入
// 引入antd
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);
1.6.3 定义布局

​ 一般网站页面都有,导航栏,主页面,底部footer所以可以使用插槽其封装成组件,以便以后相似页面使用。

  • src 下创建 layout 目录用于存放页面布局文件,新建一个BasicLayout基础布局组件,内容如下:
<template>
  <a-layout class="layout">
    <a-layout-header class="header">
    </a-layout-header>
    <a-layout-content class="main">
      <div class="w">
        <slot name="mainBox"></slot>
      </div>
      <a-back-top/>
    </a-layout-content>
    <a-layout-footer style="text-align: center">
      <h3>welcome to 欢乐学习谷</h3>
    </a-layout-footer>
  </a-layout>
</template>

<script>
  export default {
    name: 'BasicLayout',
    components: {},
  }
</script>

<style scoped>
  .w {
    max-width: 1200px;
    margin: 0 auto;
  }
  .main {
    margin-top: 15px;
  }
</style>
1.6.4 使用布局组件
<template>
  <BasicLayout>
    <template v-slot:mainBox>
      Hello, this is home
    </template>
  </BasicLayout>
</template>

<script>
  import BasicLayout from "../layout/BasicLayout";

  export default {
    name: "Home",
    components: {BasicLayout}
  }
</script>

<style scoped>

</style>
1.7 vue 整合 mavon-editor
1.7.1 安装 mavon-editor
npm install mavon-editor --save
1.7.2 main.js 引入
// 全局注册
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)
1.7.3 界面引入
<mavon-editor
    class="add-diary-content"
    ref=md
    v-model="diary.content"
    :autofocus="false"
    placeholder="输入日记具体内容..."
/>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值