作者：gauseen

0. 关于 Vuejs

• 简介：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，易用、天真、高效。
• 生态体系

1. 开辟范例

• JavaScript Standard
• Vue 编码作风范例
• 项目目次范例

2. 建立项目

# 装置 vue cli
yarn global add @vue/cli

# 初始化项目
vue create hello-world-3x

cd hello-world-3x

# 当地运转项目
yarn serve

3. 静态资本

静态资本能够经由过程两种体式格局举行处置惩罚：

• 在 JavaScript 被导入或在 template/CSS 中经由过程相对途径被援用。这类援用会被 webpack 处置惩罚。
• 安排在 public 目次下或经由过程绝对途径被援用。这类资本将会直接被拷贝，而不会经由 webpack 的处置惩罚。

• URL 转换划定规矩

  • 假如 URL 是一个绝对途径 (比方 /images/foo.png)，它将会被保存稳定。
  • 假如 URL 以 . 开首，它会作为一个相对模块要求被诠释且基于你的文件体系中的目次构造举行剖析。
  • 假如 URL 以 ~ 开首，厥后的任何内容都邑作为一个模块要求被剖析。这意味着你以至能够援用 Node 模块中的资本：
  • 假如 URL 以 @ 开首，它也会作为一个模块要求被剖析。它的用途在于 Vue CLI 默许会设置一个指向 <projectRoot>/src 的别号 @

4. public 文件夹

• 任何安排在 public 文件夹的静态资本都邑被复制到 outputDir 对应值的目次下（默许 'dist'）。
• 假如用绝对途径来援用，不会被 webpack 处置惩罚(资本只存在 1 份)；
• 假如用相对途径来援用，会被 webpack 处置惩罚，将图片从新打包到 <outputDir>/<assetsDir>/img/ 目次下，并给图片加 hash 值，以便更好的掌握缓存。资本会存在 2 份(另有第一条复制的 1 份)
• 所以援用 public 文件夹的静态资本发起运用绝对途径，注重设置途径 publicPath 前缀

<img :src="`${publicPath}logo.png`">

data () {
  return {
    publicPath: process.env.BASE_URL,
  }
},

5. vue.config.js

<font style=”color: #ff9966;”>
注：有些 webpack 选项是基于 vue.config.js 中的值设置的，所以不能直接修正。如：你应当修正 vue.config.js 中的 publicPath 选项而不是修正 output.publicPath
</font>

• publicPath(同 baseUrl, vue cli 3.3 弃用)

  作用：设置一切经由 webpack 处置惩罚的静态资本途径前缀（不包含用绝对途径援用的资本）

  默许：'/'

  默许情况下，Vue CLI 会假定你的运用是被布置在一个域名的根途径上，如：https://domain.com，publicPath 不须要锐意设置。
  假如运用被布置在一个子途径上，你就须要用这个选项指定这个子途径，如：https://domain.com/my-app/，那末 publicPath 为 /my-app/。

• webpack 设置
  vue cli 内部设置，是经由过程 webpack-chain 保护的，使 webpack 的设置在后期修正起来更轻易、简朴。

  关于 CSS 相干 loader 来讲，我们引荐运用 css.loaderOptions 而不是直接链式指定 loader。这是由于每种 CSS 文件范例都有多个划定规矩，而 css.loaderOptions 能够确保你经由过程一个处所影响一切的划定规矩

// vue.config.js

// CSS loader 相干设置
css: {
  loaderOptions: {
    stylus: {},
  },
},

// webpack 别的设置
chainWebpack: config => {
    // 设置别号
    config.resolve.alias
      .set('rootDir', path.join(__dirname))
    config.module
    // 增加一个签字划定规矩 轻易后期修正
      .rule('compile')
        .test(/\.js$/)
        .include
          .add('src')
          .end()
        // 以至能够建立签字 loader，轻易后期修正
        .use('babel')
        .loader('babel-loader')
        .options({
          presets: [
            ['@babel/preset-env', { modules: false }]
          ]
        })

    // 修正签字 loader
    config.module
      .rule('compile')
        .use('babel')
          .tap(options => newOptions)

6. webpack 设置搜检

vue inspect > output.js # 输出开辟形式下 webpack 设置信息
vue inspect --mode production > output.js # 输出临盆形式下 webpack 设置信息

7. 支撑多环境形式打包

场景：有 development、test、preview、production 多种线上环境，每一个环境用到的变量值都差别，该怎样用顺序处理？

vue-cli 3.x 支撑多种环境形式变量设置

.env                # 在一切的环境中被载入
.env.local          # 在一切的环境中被载入，但会被 git 疏忽
.env.[mode]         # 只在指定的形式中被载入
.env.[mode].local   # 只在指定的形式中被载入，但会被 git 疏忽

环境变量优先级：环境变量的文件名 . 越多优先级越高。如：.env.production > .env

默许情况下 vue-cli 3.x 只支撑 3 种形式，分别为:

• development 形式用于 vue-cli-service serve
• production 形式用于 vue-cli-service build
• test 形式用于 vue-cli-service test:unit 和 vue-cli-service test:e2e

那怎样新加形式呢？

能够经由过程通报 --mode 选项参数为敕令行 vue-cli-service 指定详细环境形式。如：新加 preview 形式

• 项目根目次新增 .env.preview 文件，由于每一个形式默许都邑将 NODE_ENV 的值设置为形式的称号，所以要增加 NODE_ENV=production 变量(preview 形式也是须要打包上传效劳器的)。

• package.json scripts 文件新增剧本敕令

  "build:preview": "vue-cli-service build --mode preview"

• 运转 yarn build:preview 打包编译即可

8. mock 数据之 api 接口治理东西

前后端分离式开辟已很常见了，为了前后端并行开辟，mock 数据(造假数据) 已是个不可避免的题目。 对前端来讲 mock 数据的体式格局有很多种：

• Mock.js 模仿数据天生器

  • 须要前端手动去写 mock 数据代码，比较贫苦
  • 每一个项目都要有一套 mock 代码，复用率底
  • 没有 GUI 可视化界面，不轻易后端开辟检察接口、字段等 api 信息

• easy-mock 是一个可视化，并且能疾速天生模仿数据的耐久化效劳

  • 支撑可视化界面
  • 支撑协同编辑
  • 支撑 swagger，可基于 swagger 疾速建立项目接口
  • 支撑 Mock.js 语法
  • 支撑接口预览，等等
  • 免费开源，私有化布置简朴

• RAP 和 RAP2 阿里妈妈出品，开源接口治理东西 RAP 第一代和二代

  • 支撑可视化界面
  • 支撑协同编辑
  • 支撑 Mock.js 语法
  • 不支撑 swagger 数据导入，但支撑 JSON 花样数据的导入导出
  • 免费开源，但私有化布置相对烦琐

• YApi 是一个可当地布置的、买通前后端及 QA 的、可视化的接口治理平台

  • 支撑可视化界面
  • 支撑协同编辑
  • 支撑自动化测试, 对 Response 断言
  • 基于 Json5 和 Mockjs 定义接口返回数据的构造和文档
  • 支撑 swagger、postman、json、har 数据导入
  • 免费开源，私有化布置简朴

9. vue 项目中运用 api 接口治理平台

// vue.config.js

// 基本地点
const baseApi = '/api'
// YApi 项目 ID (YApi 建立项目所得)
const mockProjectId = '66666'

module.exports = {
  // 代办
  devServer: {
    proxy: {
      // 开辟环境代办
      [`${baseApi}/(?!mock)`]: {
        target: process.env.VUE_APP_DOMAIN || 'http://test.domain.com', // 测试环境
        changeOrigin: true,
      },
      // mock 数据代办
      [`${baseApi}/mock`]: {
        target: 'http://yapi.demo.qunar.com',
        changeOrigin: true,
        pathRewrite: {
          [`${baseApi}/mock`]: `/mock/${mockProjectId}${baseApi}`,
        },
      },
    },
  },
}

10. 当地预览打包代码

http-server 是一个基于 node，零设置敕令行 http 效劳器。

# 装置
yarn add -D http-server

# 设置 package.json scripts
"scripts": {
  "preview": "http-server ./ -P",
},

# 打包产出
yarn build

# 修正文件名 dist/ ===> my-app/(与 publicPath 保持一致)
mv -rf dist/ my-app/

# 当地预览(http://ip:port 可选, 为代办效劳)
yarn preview <http://ip:port>

# 浏览器翻开衔接接见即可

11. 线上布置

这里重要报告前后端分离式线上布置

当前运用路由形式分2种，hash 和 history 形式

• hash 形式

  • 款式比较丑，不太相符人的 “审美”
  • 浏览器地点栏 URL 有 # (如：http://localhost:3000/#/a)
  • # 背面的内容不会传给效劳端
  • 转变浏览器地点栏 URL # 背面的值，不会引发网页重载

• history 形式

  • HTML5 新特征，款式比较文雅
  • 浏览器地点没有 # (如：http://localhost:3000/a)
  • 没有 # ，一切 domain 背面的内容都邑传给效劳端
  • 转变浏览器地点栏 URL 会网页重载，再次要求效劳器，并向 history 栈中插进去一条纪录

详细区分看这里

• web 效劳器

前端页面须要跑在 web 效劳器内里，重要包含 Nginx，Apache，IIS 等，重要处置惩罚一些静态资本。我们公司运用 Nginx，下面引见前端运用布置时 Nginx 的一些设置：

• hash 形式设置

location ^~ /pos2/
{
  root /data/www/webproject;
  index  index.html index.htm;
}

• history 形式设置

location ^~ /crmwap/
{
  root /data/www/webproject;
  try_files $uri $uri/ /crmwap/index.html =404;

  # 已知: $document_root = root = /data/www/webproject

  # 若: try_files $uri $uri/ /crmwap/index.html =404; fall back 以下:
  # $document_root$uri --> $document_root$uri/ -->  $document_root/crmwap/index.html --> nginx 404

  # 若：try_files $uri $uri/ /crmwap/index.html; fall back 以下:
  # $document_root$uri --> $document_root$uri/ --> http://domain.com/crmwap/index.html
}

Nginx 常用敕令

# 启动
start nginx

# 重启
nginx -s reload

# 封闭
nginx -s stop

注：try_files 的末了一个位置（fall back）是特别的（仅限 root），它会发出一个内部 “子要求” 而非直接在文件体系里查找这个文件。
在不变动 Nginx 设置文件的情况下，前端页面迭代宣布，不须要重启 Nginx 效劳。

12. 自动化构建东西

• Jenkins

迎接关注民众号: 学前端