Vue 知识点汇总

Vue 评论

创建项目

1
vue create web

安装 vuex

  1. 安装

    1
    npm i vuex@3

  2. 创建 src/store/index.js 文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    import Vue from 'vue';
    import Vuex from 'vuex';
    Vue.use(Vuex);

    // 模块
    const model = {
        namespaced: true,
        actions: {},
        mutations: {},
        state: {}
    }

    // 创建并暴露 store
    export default new Vuex.Store({
        modules: { model }
    })

  3. 在 main.js 文件中引入并使用 store

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    import Vue from 'vue'
    import App from './App.vue'
    import store from './store'

    Vue.config.productionTip = false;

    new Vue({
      render: h => h(App),
      store
    }).$mount('#app')

安装 vuex-router

  1. 安装

    1
    npm i vue-router@3

  2. 创建 src/router/index.js 文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    import VueRouter from 'vue-router';

    import About from '../components/About';
    import Home from '../components/Home';

    export default new VueRouter({
        mode: 'history',
        routes: [
            {
                path: '/home',
                component: Home
            },
            {
                path: '/about',
                component: About
            }
        ]
    })

  3. 在 main.js 文件中引入

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    import Vue from 'vue'
    import App from './App.vue'
    import VueRouter from 'vue-router';
    import router from './router';

    Vue.config.productionTip = false;
    Vue.use(VueRouter);

    new Vue({
      render: h => h(App),
      router
    }).$mount('#app')

  4. 路由守卫

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    /* 全局前置路由守卫 */
    router.beforeEach((to,from,next) => {
        if(to.name == 'about') {
            if(localStorage.getItem('isLogin') == 1) {
                next();
            } else {
                alert('未登录！');
            }
        } else next();
    })

     /* 全局后置路由守卫 */
    router.afterEach((to,from) => {
        console.log(to,from);
    })

  5. 默认路由

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 一级默认路由
    { path: '*', redirect: '/home' },

    // 二级默认路由
    children: [{
      path: 'booklist',
      name: 'booklist',
      component: BookList
    }],
    redirect: '/index/booklist'

安装 ElementUI

  1. 安装

    1
    npm i element-ui

  2. 在 main.js 文件中引入

    1
    2
    3
    4
    5
    6
    7
    8
    import Vue from 'vue'

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

    // 使用 ElementUI 插件
    Vue.use(ElementUI);

安装 VantUI

  1. 安装

    1
    2
    3
    4
    5
    6
    7
    8
    # Vue 3 项目，安装最新版 Vant
    npm i vant

    # Vue 2 项目，安装 Vant 2
    npm i vant@latest-v2

    # 安装插件
    npm i babel-plugin-import -D

  2. 配置 babel.config.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    module.exports = {
      presets: [
        '@vue/cli-plugin-babel/preset'
      ],
      plugins: [
        [
          "import",
          {
            libraryName: "vant",
            libraryDirectory: "es",
            style: true
          }
        ]
      ]
    }

路径重命名

  1. 安装

    1
    npm i path --save

  2. 在根目录创建 vue.config.js 文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    const path = require('path');
    function resolve(dir) {
        return path.join(__dirname, dir);
    }
    module.exports = {
        lintOnSave: false,	// 关闭 eslint 校验
        configureWebpack: {
            resolve: {
                alias: {
                    'src': resolve('src'),
                    'asim': resolve('src/assets/img'),
                    'asic': resolve('src/assets/icon'),
                    'ut': resolve('src/util'),
                }
            }
        }
    };

配置 less

  1. 安装

    1
    2
    npm i less -g
    npm i less-loader@7

  2. 在 vue.config.js 中引入

    1
    2
    3
    alias: {
        'asle': resolve('src/assets/less')
    }

  3. 在 .vue 文件中使用

    1
    2
    3
    4
    5
    6
    7
    <style lang="less" scoped>
        @import "asle/index.less";
        .rigis_box {
            .size(300px,100px);
            .bg(red);
        }
    </style>

安装 Vue-Cookies

1
npm install vue-cookies --save

安装 Axios

1
2
npm i axios
npm i qs

iGmaStation wide Engineer

程码开发