Vue.js + Vuex + Typescript 项目实战 --- 搭建项目架构

创建项目

• 安装 Vue CLI

  npm i -g '@vue/cli'
  

• 创建项目

  vue create edu-boss-fed
  

• 安装结束，启动开发服务

  cd edu-boss-fed
  npm  run server
  

加入 Git 版本管理

• 创建远程仓库

• 将本地仓库推到线上

• 如果没有本地仓库

  # 创建本地仓库
  git init
  
  # 将文件添加到暂存区
  git add 文件
  
  # 提交历史记录
  git commit "提交⽇志"
  
  # 添加远端仓库地址
  git remote add origin 你的远程仓库地址
  
  # 添加远端仓库地址
  git push -u origin master
  

• 如果已有本地仓库：

  # 添加远端仓库地址
  git remote add origin 你的远程仓库地址
  
  # 添加远端仓库地址	
  git push -u origin master
  

初始目录结构说明

调整初始目录结构

• 删除初始化的默认文件
• 新增调整我们的目录结构
  • 创建一下内容：
  • src/services 目录，接口模块
  • src/utils 目录，存储一些工具模块
  • src/styles 目录，存储一些样式资源

代码规范和 ESLint

• 所有的 Component 文件以大写开头，除了index.vue

• 所有的 .js 文件都遵循横线连接 (kebab-case)。

• 在 views 文件下，代表路由的 .vue 文件都使用横线连接 (kebab-case)，代表路由的文件夹也是使用同样的规则。

• ESLint 配置文件：

  在这里插入代码片module.exports = {
    root: true,
    env: {
      node: true
    },
    // 使用插件的编码校验规则
    extends: [
      'plugin:vue/essential', // eslint-plugin-vue
      '@vue/standard',  // @vue/eslint-config-standard
      '@vue/typescript/recommended' // @vue/eslint-config-typescrip
    ],
    parserOptions: {
      ecmaVersion: 2020
    },
  
    // 自定义编码校验规则
    rules: {
      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      // 'semi': ['error', 'always']
      '@typescript-eslint/member-delimiter-style': ['error', {
        "multiline": {
          "delimiter": "none",
          "requireLast": true
        }
      }]
    }
  }
  

• eslint-plugin-vue

  • GitHub 仓库：https://github.com/vuejs/eslint-plugin-vue
  • 官方文档：https://eslint.vuejs.org/
  • 该插件使我们可以使用 ESLint 检查 .vue 文件的 和 <script
  • 查找语法错误
  • 查找对Vue.js指令的错误使用
  • 查找违反Vue.js样式指南的行为

• @vue/eslint-config-standard

  • eslint-plugin-standard
  • JavaScript Standard Style

• @vue/eslint-config-typescrip

  • 规则列表 https://github.com/typescript-eslint/typescripteslint/tree/master/packages/eslint-plugin#supported-rules

vscode 配置 ESLint

安装并配置完成 ESLint 后，我们继续回到 VSCode 进行扩展设置，依次点击文件 > 首选项 > 设置 打开 VSCode 配置⽂件,添加如下配置

{
  "files.autoSave": "off",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue-html",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.run": "onSave",
  "eslint.autoFixOnSave": true
}

自动修复

 npm run lint -- --fix

路由懒加载

const Foo = () => import(/* webpackChunkName: 'foo' */ './Foo.vue')

样式处理

• 深度选择器
  • 建议你使用 ::v-deep 的写法，它不仅兼容了 css 的 >>> 写法，还兼容了 sass /deep/ 的写法。而且它还是 vue 3.0 RFC 中指定的写法。
  • 而且原本 /deep/ 的写法也本身就被 Chrome 所废弃，你现在经常能在控制台中发现 Chrome 提示你不要使用 /deep/ 的警告。

共享全局样式变量

参考：https://cli.vuejs.org/zh/guide/css.html#%E5%90%91%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8-loader-%E4%BC%A0%E9%80%92%E9%80%89%E9%A1%B9

module.exports = {
  ...
  css: {
    loaderOptions: {
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `prependData` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
      scss: {
        prependData: `@import "~@/styles/variables.scss";`
      }
    }
  },
}

接口跨域问题

平时被问到最多的问题还是关于跨域的，其实跨域问题真的不是一个很难解决的问题。这⾥我来简单总结一下我推荐的几种跨域解决方案。

我最推荐的也是我工作中在使用的方式就是： cors 全称为 Cross Origin Resource Sharing（跨域资源共享）。这种方案对于前端来说没有什么工作量，和正常发送请求写法上没有任何区别，工作量基本都在后端这里。每一次请求，浏览器必须先以 OPTIONS 请求方式发送一个预请求（也不是所有请求都会发送 options，展开介绍 点我），通过预检请求从而获知服务器端对跨源请求支持的 HTTP 方法。在确认服务器允许该跨源请求的情况下，再以实际的 HTTP 请求方法发送那个真正的请求。推荐的原因是：只要第一次配好了，之后不管有多少接口和项目复用就可以了，一劳永逸的解决了跨域问题，而且不管是开发环境还是正式环境都能方便的使用。详细 MDN 文档

但总有后端觉得麻烦不想这么搞，那纯前端也是有解决方案的。

在 dev 开发模式下可以下使用 webpack 的 proxy 使用也是很方便，参照 文档 就会使用了，楼主一些个人项目使用的该方法。但这种方法在生产环境是不能使用的。在生产环境中需要使用 nginx 进行反向代理。不管是 proxy 和 nginx 的原理都是一样的，通过搭建一个中转服务器来转发请求规避跨域的问题。

配置客户端层面的服务端代理跨域可以参考官方文档中的说明：

https://cli.vuejs.org/zh/config/#devserver-proxy
https://github.com/chimurai/http-proxy-middleware

具体操作流程，在项目根目录下添加 vue.config.js 配置文件。

module.exports = {
  ...
  devServer: {
    proxy: {
      '/boss': {
        target: 'http://eduboss.lagou.com',
        changeOrigin: true // 把请求头中的 host 配置为 target
      },
      '/front': {
        target: 'http://edufront.lagou.com',
        changeOrigin: true
      }
    }
  }
}

配置环境变量

• 知识点：

  • 配置 Vue 项⽬中的环境变量
  • dotenv

• .env.development

  VUE_APP_API=http://eduboss.lagou.com
  

• env.production

  VUE_APP_API=http://eduboss.lagou.com