前言

针对新手，开始搭建vue开发环境，采用vue-cli

@vue/cli 4.3.1

环境搭建

nrm 安装

nrm(npm registry manager )是 npm 的镜像源管理工具，有时候国外资源太慢，使用这个就可以快速地在 npm 源间切换

*  在命令行执行命令，npm install -g nrm，全局安装nrm。
* 执行命令nrm ls查看可选的源。
> nrm ls

如果要切换到 taobao 源，执行命令 nrm use taobao。
你可以增加定制的源，特别适用于添加企业内部的私有源，执行命令nrm add <registry> <url>，其中 reigstry 为源名，url 为源的路径。
执行命令 nrm del 删除对应的源。

Node.js

安装配置

Vue-cli 安装

安装教程

创建项目过程操作键盘的上下键选择对应的配置
- 选择 Manually select features
- 选择项目需要的一些特性（此处我们选择需要 Babel 编译、使用 Vue 路由、Vue 状态管理器、CSS 预处理器、代码检测和格式化、以及单元测试，暂时不考虑端到端测试(E2E Testing)
- 选择 CSS 预处理器语言，此处选择 LESS
- 选择 ESLint 的代码规范，此处使用 Airbnb 代码规范
- 选择何时进行代码检测，此处选择在保存时进行检测
- 选择单元测试解决方案，此处选择 Jest
- 选择 Babel、PostCSS、ESLint 等配置文件存放位置，此处选择保存在 json 文件中

项目改造

vue.config.js 配置

配置参考

vue.config.js 是一个可选的配置文件，如果项目的（和 package.json 同级的）根目录中存在这个文件，那么它会被@vue/cli 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

常见配置

代理配置

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置

devServer 所有 webpack-dev-server 的选项都支持.注意： _ 有些值像 host、port 和 https 可能会被命令行参数覆写 _ 有些像 publicPath 和 historyApiFallback 不应该被修改，因为它们需要和开发服务器的 baseUrl 同步以保障正常工作
- devServer.proxy
  - Type:string | object devServer.proxy可以是一个指向开发环境API服务器的字符串：
  - vue-cli3.0的代理配置，直接将proxyTable中配置copy到devServer.proxy中即可: devServer: { overlay: { warnings: false, errors: false }, proxy: { '/api': { target: (process.env.NODE_ENV === 'development') ? 'http://127.0.0.1:8080/project_manager_Web_exploded' : 'http://127.0.0.1:8883/project_manager_Web_exploded', changeOrigin: true, pathRewrite: { '^/api': '' } }, }, },

请求拦截器

安装 axios

npm install axios

自定义拦截器

在项目的 src 目录下新建一个 api 文件夹
- 在 api 文件夹下新建一个 axios.js 的文件

    import axios from 'axios';

    axios.defaults.timeout = 500000000000;
    axios.defaults.headers.post['Content-Type'] = 'application/json';
    axios.defaults.baseURL = (process.env.NODE_ENV === 'development') ? '/' : '';
    // http request 拦截器 
    axios.interceptors.request.use(
        config => {
            if (!config.url.includes('dologin')) {
                // 这里设置的 token 每次都是不一样的
                // config.headers.token = localStorage.getItem('token');
                // 这句代码应该在请求路由不是 Login 时才执行
                config.headers.token = sessionStorage.getItem('token');
            }
            return config;
        },
        err => {
            return Promise.reject(err);
        },
    )

    // http response 拦截器
    axios.interceptors.response.use(
        response => {
            if (response.data.tokenStr) {
                sessionStorage.setItem('token', response.data.tokenStr);
            }
            return response;
        },
        error => {
            if (error.response) {}
            return Promise.reject(error)
        },
    )

    export default axios;

将自定义的配置文件导入 main.js

![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/14f874174b694fd692cf619a87056097~tplv-k3u1fbpfcp-zoom-1.image)

router 目录改造

给每个大模块建立一个文件夹用来存放属于哪个哪个模块的路由

例如；新建一个 mine 文件夹用来存放我的模块路由,文件内容如下

    // src/router/mine/index.js

    export default {
        path: "/mine",
        component: () =>
        import ("@/views/mine"),
        name: "mine",
        children: []
    }

    // src/router/index.js

    import Vue from 'vue';

    import VueRouter from 'vue-router';

    // 我的
    import Mine from './mine';

    Vue.use(VueRouter);

    const routes = [{
    path: '/',
    redirect: '/mine'
    },
    Mine,
    ];
    const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes,
    });
    export default router;

store 文件设置

按照官方推荐设立如下几个文件夹
- action.js 异步方法
- getters.js getter
- index.js store主文件
- mutation-type.js mutation的类型管理文件夹
- mutation.js 类型 mutation实现

vue-cli 搭建工程

前言