使用vue构建一个项目-1

一个vue 的项目前期配置:

1.使用vue-cli3  直接构建项目 ,配置less babel ...

2.vue-cli3的一些配置,

    a.新建一个vue.config.js 的文件   (类似于 webpack.js )
            1.vue.config.js模板的写法:
                参考 :https://blog.csdn.net/qq_35167373/article/details/80671346
            2.配置别名:
                    function resolve(dir) {
                        console.log(__dirname);
                        return path.join(__dirname, dir);
                    }
                    chainWebpack: (config) => {
                        config.resolve.alias
                            .set('@', resolve('./src'))
                    },
            3.配置代理:
                 devServer: {
                    port: 8080, // 端口号
                    disableHostCheck: true,
                    host: "0.0.0.0",        
                    https: false, // https:{type:Boolean}
                    open: false, //配置自动启动浏览器
                    proxy: {// 配置多个代理
                        '/api': {
                            target: '',   // 需要请求的地址
                            changeOrigin: true,  // 是否跨域
                            pathRewrite: {
                                // '^/api': '/'   // 替换target中的请求地址，也就是说，在请求的时候，url用'/proxy'代替'http://ip.taobao.com'
                            }
                        },
                    },
                    before(app) {
                        //查勘模拟后台模拟后台   app  就是一个express 的实例,你可以再这里使用 express的语法  
                        app.use("/aaaa", (req, res, next) => {
                            res.send(require("./aaa.json"));
                        });
                    }    
                }
                
                建议:
                    1.因为前端有express的服务.vue-cli 自带的  
                        请求的接口  的请求顺序  
                            页面发起请求 ==>  请求nodeJS  ===>请求 java / php 服务器 (很显然,不涉及跨域 , nodeJS就是本地的)   
                    2.前端端分离,请求的假数据,需要要求后端,写在接口文档里面
                        在前端,将这些数据统一放在一个文件夹下面, 写成json文件 
                    3.接口使用的时候:
                        建议使用,一张  const  的常量表,存放所有接口
                    4.控制接口使用假数据  还是直接请求后台:
                        方法1:修改代理 ,这样 可以直接全部切换为请求真实的后台
                        
                        方法2:写两个代理  font / back  使用前缀正则匹配
                        
                        方法3: 手动配置一个变量
                            如果变量里面有,走mock 的假数据 ,没有,就直接请求后端
                    5.关于请求
                        需要封装axios  的,
                        
                        
    b.入口index.html文件:
        1.在  public  的文件夹 index.html 里面 ,有如下的写法:                 
            <link rel="icon" href="<%= BASE_URL %>favicon.ico">  e'j's的语法,webpack 默认就是支持ejs 的,你同样可以使用ejs的语法                       

        2.配置移动端的一些兼容:
             <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
            ... 其余的可自行百度 ...
    c.app.vue 和 main.js 
        app.vue :
            一般直接在app.vue  直接设置router-view 
            <keep-alive>
                <router-view v-if="$route.meta.keep"></router-view>
            </keep-alive>
            <router-view :key="$route.fullpath"  v-else></router-view>
        
     d. main.js 
            入口文件,在这里将初始的依赖,引入进来 ...
            1.引入全局的依赖 
                vue vue-router  vuex(不建议使用 vue-bus)  ...
            2.使用webpack 批量引入组件:
                const requireComponent = require.context(
                    './path',
                    true,
                    /\w+\.(vue|js)$/
                );
                requireComponent.keys().forEach(fileName => {
                    const componentConfig = requireComponent(fileName);
                    const componentName = upperFirst(
                        camelCase(
                            fileName.replace(/(.*\/)*([^.]+).*/ig, "$2"))
                    );
                    Vue.component(componentName, componentConfig.default || componentConfig)
                });
            3.注册全局过滤器:
                Object.keys(filter).forEach(key => {
                    Vue.filter(key, filter[key])
                });
            4.定义一些全局类和变量:(使用的时候,注意作用域)
                直接放在vue的类的原型上面
                    Vue.prototype.aa=()={}
                放在windows 的作用域下面:
                    windows.$= .....
            
            5.引入全局的css样式
                全局的样式,没有组件的作用域的限制
       e. router 的组件配置:
            path: '',
            name: '',
            meta: {
               
            },
            props: {
                //静态属性 直接写在组件里面
            },
            component(resolve) {  //动态异步引入组件
                require.ensure([''], () => {
                    resolve(require(''));
                });
            }
            注释:
                在组件里面,建议异步引入组件  ...
                "a": () => import('a'),
            
      f.  store:
            配置命名空间:参照官网
            [变量](state,payload) {       //方法名,是可以写成变量的 ...
               
            },
      g.  mixins:
            不建议大量使用  混入 ,
            
        国际化:(使用国际化要尽早准备,否则容易返工)
            import VueI18n from 'vue-i18n'
            Vue.use(VueI18n);
          
       h. vue前端的缓存:
            利用localstorage 或者 indexdb 
            很烦,找了两个插件:
                vue-local-storage : https://github.com/pinguinjkeke/vue-local-storage
            
                createPersistedState: import createPersistedState from 'vuex-persistedstate'
            
                IdbKvStore :import IdbKvStore from 'idb-kv-store'
            如何缓存:
                vuex缓存
                请求缓存
                页面缓存
                
                H5提供了页面缓存的 一些方法,可以参考 .....