针对Vue初始项目的整理和配置

一.针对Vue初始项目的整理和配置

查看vue-cli为我们生成的项目目录

1.找到最外层的配置文件，里面的配置用来控制是否每次保存时是否启用eslint检查代码，根据自身情况选择 devServer可以将没有匹配到静态文件的请求都代理到这个URL从而满足跨域的请求（！baseURL 已经被废除 改为publicPath）

最新配置

const path = require('path')
const debug = process.env.NODE_ENV !== 'production'

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? './' : './', // 根路径 cli3.0以上使用publicPath替代baseUrl,解决build后找不到静态资源的问题
    outputDir: 'dist', // 构建输出目录
    assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)
    lintOnSave: false, // 是否开启eslint保存检测，有效值：ture | false | 'error'
    runtimeCompiler: true, // 运行时版本是否需要编译
    transpileDependencies: [], // 默认babel-loader忽略mode_modules，这里可增加例外的依赖包名
    productionSourceMap: true, // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度
    configureWebpack: config => { // webpack配置，值位对象时会合并配置，为方法时会改写配置
        if (debug) { // 开发环境配置
            config.devtool = 'cheap-module-eval-source-map'
        } else { // 生产环境配置
        }
        // Object.assign(config, { // 开发生产共同配置
        //     resolve: {
        //         alias: {
        //             '@': path.resolve(__dirname, './src'),
        //             '@c': path.resolve(__dirname, './src/components'),
        //             'vue$': 'vue/dist/vue.esm.js'
        //         }
        //     }
        // })
    },
    chainWebpack: config => { // webpack链接API，用于生成和修改webapck配置，https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
        if (debug) {
            // 本地开发配置
        } else {
            // 生产开发配置
        }
    },
    parallel: require('os').cpus().length > 1, // 构建时开启多进程处理babel编译
    pluginOptions: { // 第三方插件配置
    },
    pwa: { // 单页插件相关配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    },
    devServer: {
        open: true,
        host: 'localhost',
        port: 8081,
        https: false,
        hotOnly: false,
        proxy: { // 配置跨域
            '/api': {
                target: 'http://localhost:5000/api',
                ws: true,
                changOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
        before: app => { }
    }
}

2.package.json文件定义了如项目名称、项目版本、项目依赖等项目描述

3.public文件夹内存放公共文件，index.html文件为模版文件，webpack在运行或者打包项目是使用这个文件作为模版生成最后的文件

二.针对src文件夹的整理和配置

src文件夹为主文件夹
assets用来放静态资源，如图标、字体
components中存放组件
views中存放组件
App.vue为基础文件
main,js是项目入口文件，项目在开发运行和编译时都以该文件开始
router.js为路由文件
store.js为状态管理文件

在src文件夹下新建api文件夹 用来存放项目的接口
在assets文件夹下创建img、font文件夹用来存放图片和字体
在src文件夹下新建config文件夹 用来存放项目配置
在src文件夹下新建directive文件夹 用来存放vue的自定义指令
在src文件夹下新建lib文件夹并在该文件夹下创建util.js 和tool.js分别用来存放与业务有关系的工具（函数）已经单纯的工具方法

对rooter文件夹进行配置整理

针对项目中可能出现复杂的路由拦截
在rooter文件夹中新建rooter.js，抽出index.js中的路由列表放置到建好的rooter.js中，并使用es6的模块系统进行导出

对store文件夹进行配置整理

查看项目初始中的基础状态，为这些状态创建单独文件，并通过import xxx from xxx引入index.js

创建module板块文件夹,并创建user.js文件


在store文件夹下的index.js文件中引入，如图

配置Mock文件夹

在vscode中启动终端，执行npm install mockjs -D
在src文件夹下创建mock文件夹并配置文件

src整理如图