Vue/cli 文件架构及开发中的常见问题

一、main.js

import Vue from 'vue';
import ElementUI from 'element-ui';
import router from './router';
import store from "./store";

import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
// axios.defaults.baseURL = "http://localhost/"

Vue.config.productionTip = false;

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

 

二、APP.vue

<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>

<script>
export default {
};
</script>

<style>
@import "./assets/css/index.css";
</style>

 

三、路由配置 router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        redirect: "/login"   //重定向
    },
    {
        path: '/login',
        name: 'Login',
        meta: { title: "登录" },
        component: () => import('@/views/Login/Login.vue'),
    }, {
        path: '/home',
        name: 'Home',
        redirect: "/about",
        meta: { title: "首页" },
        component: () => import('@/views/Home/Home.vue'),
        children: [
            {
                path: "/about",
                name: "about",
                meta: { title: "关于" },
                redirect: "/about/systeminfo",
                component: () => import("@/views/Home/about/index.vue"),
                children: [
                    {
                        path: "/about/systeminfo",
                        name: "about/systeminfo",
                        meta: { title: "系统信息" },
                        component: () => import("@/views/Home/about/systeminfo.vue"),
                    },
                    {
                        path: "/about/aboutwe",
                        name: "about/aboutwe",
                        meta: { title: "关于我们" },
                        component: () => import("@/views/Home/about/aboutwe.vue"),
                    },
                ],
            },
            {
                path: "/stats",
                name: "stats",
                meta: { title: "报表查询" },
                component: () => import("@/views/Home/stats/index.vue"),
            },
            {
                path: "/work",
                name: "work",
                meta: { title: "业务工作" },
                component: () => import("@/views/Home/work/index.vue"),
            },
            {
                path: "/data",
                name: "data",
                meta: { title: "基本信息" },
                component: () => import("@/views/Home/data/index.vue"),
            },
            {
                path: "/setup",
                name: "setup",
                redirect: "/setup/systemmenu",
                meta: { title: "系统设置" },
                component: () => import("@/views/Home/setup/index.vue"),
                children: [
                    {
                        path: "/setup/systemmenu",
                        name: "setup/systemmenu",
                        meta: { title: "系统菜单" },
                        component: () => import("@/views/Home/setup/system_menu.vue"),
                    },
                    {
                        path: '/setup/404',
                        name: 'setup/404',
                        component: () => import('@/views/404.vue'),
                    },
                    {
                        path: '*',
                        redirect: '/setup/404'
                    },
                ],
            },
        ],
    },
]


const router = new VueRouter({
    routes
})


// 路由拦截，在跳转前执行
// to 即将进入的路由
// from 即将离开的路由
// next 钩子函数，下一个
router.beforeEach(function (to, from, next) {
    if (!sessionStorage.getItem('user_mobile')) {    //判断是否登录
        if (to.path != '/login') {
            next('/login');
        }
    };
    next();
})

export default router

 

四、store/index.js

import vuex from "vuex";
import Vue from "vue";

// 1.安装
Vue.use(vuex);

// 2配置
var store = new vuex.Store({
  state: {
    APPCODE: '0f868bc80373404298467c9009cc152f',
    AppName: '爱唯小管家',
  },
})


export default store;

使用方式：

console.log(this.$store.state.APPCODE);

输入：

'0f868bc80373404298467c9009cc152f'

 

五、Axios Post 提交数据时qs的使用及提交Authorization

<script>
import qs from "qs";
import Nav from "@/components/Nav.vue";
import Menu from "@/components/Menu.vue";
export default {
    data() {
        return {
            system_menu: [],
        };
    },
    methods: {
        selectNav() {},
        selectMenu() {},
        get_system_menu() {
            // 得到服务器数据
            let header = {
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                    Authorization: sessionStorage.getItem("token"),
                },
            };
            let url = "/get_system_menu.php";
            let userInfo = {
                user_mobile: sessionStorage.getItem("user_mobile"),
            };
            this.$http.post(url, qs.stringify(userInfo), header).then((rsp) => {
                // console.log(rsp.data);
                if (rsp.data.state == "1") {
                    this.system_menu = rsp.data.system_menu;
                    sessionStorage.setItem(
                        "system_menu",
                        JSON.stringify(this.system_menu)
                    );
                    // this.navlist = this.system_menu.filter(
                    //     (item) => item.parent_id == "0"
                    // );
                } else {
                    this.navlist = [];
                }
                if (rsp.data.state == "2") {
                    this.$emit("tokenerror");
                }
            });
        },
    },
    components: {
        Nav,
        Menu,
    },
    created() {
        if (this.navlist.length > 0) {
            this.nav_id = this.navlist[0].id;
            this.nav_menu_name = this.navlist[0].menu_name;
        }

        // 得到菜单数据
        if (!sessionStorage.getItem("system_menu")) {
            this.get_system_menu();
        } else {
        }
    },
};
</script>

 

六、数组内容筛选

数组内容筛选
 
this.navlist = this.system_menu.filter(
     (item) => item.parent_id == "0"
);



数组中查询内容

let type = {"允许负库存","程序自动锁定"}
if (this.type.indexOf("允许负库存") != -1) {
     negative_inventory = "1";
}
if (this.type.indexOf("程序自动锁定") != -1) {
     auto_lock = "1";
}

七、Axios Post 提交数据时qs的使用及提交Authorization

<script>
import qs from "qs";
import Nav from "@/components/Nav.vue";
import Menu from "@/components/Menu.vue";
export default {
    data() {
        return {
            system_menu: [],
        };
    },
    methods: {
        selectNav() {},
        selectMenu() {},
        get_system_menu() {
            // 得到服务器数据
            let header = {
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                    Authorization: sessionStorage.getItem("token"),
                },
            };
            let url = "/get_system_menu.php";
            let userInfo = {
                user_mobile: sessionStorage.getItem("user_mobile"),
            };
            this.$http.post(url, qs.stringify(userInfo), header).then((rsp) => {
                // console.log(rsp.data);
                if (rsp.data.state == "1") {
                    this.system_menu = rsp.data.system_menu;
                    sessionStorage.setItem(
                        "system_menu",
                        JSON.stringify(this.system_menu)
                    );
                    // this.navlist = this.system_menu.filter(
                    //     (item) => item.parent_id == "0"
                    // );
                } else {
                    this.navlist = [];
                }
                if (rsp.data.state == "2") {
                    this.$emit("tokenerror");
                }
            });
        },
    },
    components: {
        Nav,
        Menu,
    },
    created() {
        if (this.navlist.length > 0) {
            this.nav_id = this.navlist[0].id;
            this.nav_menu_name = this.navlist[0].menu_name;
        }

        // 得到菜单数据
        if (!sessionStorage.getItem("system_menu")) {
            this.get_system_menu();
        } else {
        }
    },
};
</script>

八、数组中上移记录，下移记录

        handleUp(index, row) {
            let no = Number(index);
            let parr = [];
            if (row.parent_id == "0") {
                // 主菜单
                parr = this.system_menu;
            } else {
                // 子菜单
                let parent_id = row.parent_id;
                parr = [];
                for (var i = 0; i < this.system_menu.length; i++) {
                    if (this.system_menu[i]["id"] === parent_id) {
                        parr = this.system_menu[i]["sub_list"];
                        break;
                    }
                }
            }

            if (!no == 0) {
                // 在上一项插入该项
                parr.splice(no - 1, 0, parr[no]);
                parr.splice(no + 1, 1);
                for (var i = 0; i < parr.length; i++) {
                    parr[i]["rid"] = i;
                }
            } else {
                this.$message.error("已经是第一了，不能再向上移动了!");
                return;
            }
        },
        handleDown(index, row) {
            let no = Number(index);
            let parr = [];
            if (row.parent_id == "0") {
                // 主菜单
                parr = this.system_menu;
            } else {
                //子菜单
                let parent_id = row.parent_id;
                for (var i = 0; i < this.system_menu.length; i++) {
                    if (this.system_menu[i]["id"] === parent_id) {
                        parr = this.system_menu[i]["sub_list"];
                        break;
                    }
                }
            }
            if (no < parr.length - 1) {
                // 在上一项插入该项
                parr.splice(no + 2, 0, parr[no]);
                parr.splice(no, 1);
                for (var i = 0; i < parr.length; i++) {
                    parr[i]["rid"] = i;
                }
            } else {
                this.$message.error("已经是最后一行了，不能再向移动了！");
            }
        },

 

九、vue/cli 拼音码生成工具

安装：

npm install js-pinyin --save


使用：

<script>
let pinyin = require("js-pinyin");
export default {
    mounted() {
        console.log(pinyin.getFullChars("爱唯小管家"));
        console.log(pinyin.getCamelChars("爱唯小管家"));
        console.log(pinyin.getCamelChars("12爱唯小管家34"));
        console.log(pinyin.getCamelChars("a爱唯小管家b"));
    },
};
</script>