vue项目知识点汇总

1、安装依赖  

  cnpm i  xx   --save  -dev

  cnpm  i xx   --save

2、vue项目中引入jquery

  webpack.base.conf.js   ---配置下

  在main.js中导入jquery

  

 3、根组件   App.vue

     写全局样式   不用加scoped

    

    想改变eleui的样式 或者是其他ui插件的样式

   用deep---

   

 4、main.js    ----程序的入口文件   很重要

   所有的功能依赖

  --- 导入

  --- 挂载

     挂载在Vue构造函数的原型上的方法/属性，实例化出的实例可以直接通过this.    来访问 （和普通构造函数一样）---全局的

import Vue from 'vue'

import 'normalize.css/normalize.css'// A modern alternative to CSS resets

import ElementUI from 'element-ui'

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

import locale from 'element-ui/lib/locale/lang/zh-CN'

import App from './App'

import router from './router'

import store from './store'

import '@/icons' // icon

import '@/permission' // 权限

import '@/components/ImgIcon' // 底footer 图标

import {default as api} from './utils/api'

import {hasPermission} from "./utils/hasPermission";

import plugin from './plugin'

import {axiosAsync, getAllDictionary, code2name,showMarksBySwitchBtn,resetALlSwitchBtn,getHuangpuPoints} from './utils/commonApi'

import VuePhotoZoomPro from 'vue-photo-zoom-pro'

Vue.use(VuePhotoZoomPro)

import echarts from 'echarts' //引入echarts

Vue.prototype.$echarts = echarts //引入组件

import $ from 'jquery'

import commonMap from "./assets/js/map.js";//地图引入

import VueAwesomeSwiper from "vue-awesome-swiper";

console.dir(Vue,'vuemain')

Vue.use(ElementUI, {locale})

Vue.prototype.api = api

Vue.prototype.$axiosAsync = axiosAsync;

Vue.prototype.getAllDictionary = getAllDictionary;

Vue.prototype.showMarksBySwitchBtn = showMarksBySwitchBtn;

Vue.prototype.resetALlSwitchBtn = resetALlSwitchBtn;

Vue.prototype.getHuangpuPoints = getHuangpuPoints;

Vue.prototype.$code2name = code2name;

$.extend(Vue.prototype,{ commonMap: commonMap});

//全局的常量

Vue.prototype.hasPerm = hasPermission

//生产环境时自动设置为 false 以阻止 vue 在启动时生成生产提示。

Vue.config.productionTip = (process.env.NODE_ENV != 'production')

Vue.use(plugin);

Vue.use(VueAwesomeSwiper /* { default global options } */);

//修改dev

new Vue({

  el: '#app',

  router,

  store,

  template: '<App/>',

  components: {App}

})

 5、路由对应的 鉴权问题

　　beforeEach  ---导航守卫

　　

import router from './router'

import store from './store'

import NProgress from 'nprogress' // Progress 进度条

import 'nprogress/nprogress.css' // Progress 进度条样式

import {getToken,removeToken} from '@/utils/auth' // 验权

const whiteList = ['/login', '/404', '/home'] //白名单,不需要登录的路由

router.beforeEach((to, from, next) => {

  next();

  // NProgress.start();

  // next({path: '/'});

  // NProgress.done();

  // removeToken();

  //   else if (!store.getters.role) {

  //     store.dispatch('GetInfo').then(() => {

  //       next({...to})

  //     })

  //   } 

  if (getToken()) {

    //如果已经登录

    if (to.path === '/login') {

      next({path: '/'})

      NProgress.done() // 结束Progress

    } else {

      next()

    }

  } else if (whiteList.indexOf(to.path) !== -1) {

    //如果前往的路径是白名单内的,就可以直接前往

    next()

  } else {

    //如果路径不是白名单内的,而且又没有登录,就跳转登录页面

    next('/login')

    NProgress.done() // 结束Progress

  }

})

router.afterEach(() => {

  NProgress.done() // 结束Progress

})

 6、封装axios

  加入  request拦截器   

　　　respone拦截器

 7、vuex

     模块化、

    模块下又是小的存储工具