Картинка, чтобы научить вас быстро играть в vue-cli3

Vue.js

предисловие

В этой статье систематически разбирается обычное использование vue-cli3 для сборки проектов, цель — дать вам возможность быстро освоить возможность независимой сборки проектов vue. Вы будете знать следующие точки знаний:

  • Как установить плагины проекта
  • Добавить поддержку браузера
  • Как настроить общие глобальные переменные scss/стилуса
  • Как интегрировать сторонние фреймворки, такие как Elementui, и внедрить их по требованию
  • Настроить одно/многостраничный
  • Как настроить пользовательские переменные среды
  • Как настроить собственный веб-пакет в vue.config.js
  • развертывание проекта vue

иллюстрировать

В конце этой статьи для справки будет предоставлен файл конфигурации для всех упомянутых выше функций.

карта разума

Далее мы объясняем и шаг за шагом достигаем нашей цели в соответствии с ментальной картой.

1. Установите плагин проекта

vue add @vue/cli-plugin-eslint
# 或
vue add xjFile

vue add предназначен для установки и вызова плагинов Vue CLI. Для обычных пакетов npm мы по-прежнему можем (в зависимости от выбранного пакета npm) использовать менеджер пакетов. Наконец, вы можете выполнить пользовательскую настройку веб-пакета в vue.config.js.

2. Добавьте поддержку браузера

  1. browserslist

Мы можем указать диапазон целевых браузеров для проекта через поле browserslist в файле package.json или в отдельном файле .browserslistrc. Это значение будет использоваться @babel/preset-env и Autoprefixer, чтобы определить, какие функции JavaScript следует транспилировать и какие префиксы браузера CSS добавить.

Например:

// .browserslistrc
> 1%
last 2 versions

Чтобы получить больше списков браузеров, вы можете переместитьbrowserslist

  1. Polyfill

По умолчанию cli передает useBuiltIns: 'usage' в @babel/preset-env, чтобы он автоматически определял необходимые полифиллы на основе особенностей языка, присутствующих в исходном коде. Это гарантирует, что количество полифилов в конечном пакете сведено к минимуму. Но если для одной из зависимостей требуется специальный полифилл, Babel не может его обнаружить по умолчанию. Мы можем решить такие задачи тремя способами:

  • Добавьте зависимости к параметру transpileDependencies в vue.config.js.
// vue.config.js
module.exports = {
    // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来
    transpileDependencies: ['glob']
}
  • Необходимые полифиллы могут быть предварительно включены с помощью опции полифиллов в @vue/babel-preset-app.
// babel.config.js
module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
        'es6.promise',
        'es6.symbol'
      ]
    }]
  ]
}
  • Используйте useBuiltIns: 'entry', а затем добавьте import '@babel/polyfill' в файл входа, проблема с этим методом заключается в том, что он увеличит размер пакета.

3. Настройте общие глобальные переменные scss/стилуса.

Для scss вы можете использовать следующие методы для открытия:

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // 这里假设你有 `src/variables.scss` 文件
        data: `@import "~@/variables.scss";`
      }
    }
  }
}

Для стилуса, который я лично проверял и использовал вышеописанный способ недействителен, чего можно добиться следующими способами:

vue add style-resources-loader

// vue.config.js
const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      'patterns': [
        path.resolve(__dirname, 'src/styles/abstracts/*.styl'),
      ]
    }
  }
}

4. Интеграция сторонних фреймворков, таких как elementUI, и внедрение по запросу.

  1. Установить компонент Babel-плагина
npm install babel-plugin-component -D
  1. Настройте babel.config.js
module.exports = {
  presets: [
    '@vue/app',
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

На этом этапе компоненты элементов могут быть введены по мере необходимости для оптимизации объема проекта.

5. Настройте одно/многостраничный

Vue-cli по умолчанию имеет одностраничную структуру, и мы можем настроить проект на несколько страниц через файл конфигурации:

// vue.config.js
const path = require('path')
module.exports = {
  // 单/多页面
    pages: {
        index: {
          // page 的入口
          entry: 'src/home/main.js',
          // 模板来源
          template: 'public/index.html',
          // 在 dist/index.html 的输出
          filename: 'index.html',
          // 当使用 title 选项时，
          // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
          title: 'Your Web For PC',
          // 在这个页面中包含的块，默认情况下会包含
          // 提取出来的通用 chunk 和 vendor chunk。
        //   chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        // 当使用只有入口的字符串格式时，
        // 模板会被推导为 `public/subpage.html`
        // 并且如果找不到的话，就回退到 `public/index.html`。
        // 输出文件名会被推导为 `subpage.html`。
        // subpage: 'src/subpage/main.js'
    },
}

6. Как настроить пользовательские переменные среды

Вы можете указать переменные среды, заменив следующие файлы в корневом каталоге вашего проекта:

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

следующим образом:

// .env.local
APPID=123
VUE_APP_SECRET=secret

Если вы хотите использовать переменные среды в клиентском коде, имя переменной начинается с VUE_APP_, а определенные переменные среды можно получить следующим образом:

console.log(process.env.VUE_APP_SECRET)

7. Как настроить собственный веб-пакет в vue.config.js

Мы можем использовать связанные вызовы, поддерживаемые cli, или пользовательские вызовы:

// vue-cli内部webpack配置
    chainWebpack: config => {
        // 设置快捷目录别名
        config.resolve.alias.set('utils',resolve('../utils'))

        // 修改静态资源打包方式，下例为超过10k才用文件导入的方式，否则为base64.默认为4k
        // config.module
        // .rule('images')
        //     .use('url-loader')
        //     .loader('url-loader')
        //     .tap(options => Object.assign(options, { limit: 10240 }))
    },
    // webpack自定义配置
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
          // 为生产环境修改配置...
        } else {
          // 为开发环境修改配置...
        }
    }

7. Развертывание проекта Vue

Здесь мы используем сценарий оболочки для развертывания, конечно, каждый может также выполнить развертывание самостоятельно:

#!/usr/bin/env sh

# 当发生错误时中止脚本
set -e

# 构建
npm run build

# cd 到构建输出的目录
cd dist

git init
git add -A
git commit -m 'deploy'

git push -f git@bitbucket.org:<USERNAME>/<USERNAME>.bitbucket.io.git master

cd -

Наконец, последний относительно полный список настроек:

// vue.config.js
// 自定义vue配置
const path = require('path');
const resolve = dir => path.join(__dirname, dir);
// mock数据
const mockData = require('./mock/test.json');

module.exports = {
    // 基本路径
    publicPath: './',

    // 输出文件目录
    // outputDir: 'dist',

    // eslint-loader 是否在保存的时候检查
    // lintOnSave: true,

    // 单/多页面
    pages: {
        index: {
          // page 的入口
          entry: 'src/main.js',
          // 模板来源
          template: 'public/index.html',
          // 在 dist/index.html 的输出
          filename: 'index.html',
          // 当使用 title 选项时，
          // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
          title: 'OpenCoder For PC',
          // 在这个页面中包含的块，默认情况下会包含
          // 提取出来的通用 chunk 和 vendor chunk。
        //   chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        // 当使用只有入口的字符串格式时，
        // 模板会被推导为 `public/subpage.html`
        // 并且如果找不到的话，就回退到 `public/index.html`。
        // 输出文件名会被推导为 `subpage.html`。
        // subpage: 'src/subpage/main.js'
    },

    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {
            // stylus: {
            //     // @/ 是 src/ 的别名
            //     // 所以这里假设你有 `src/variables.stylus` 这个文件, 不过目前测试无效
            //     data: `@import "~@/style/variables.styl";`
            //   }
        },
        // 启用 CSS modules for all css / pre-processor files.
        modules: false
   },


    pluginOptions: {
        // 共享变量
        'style-resources-loader': {
            preProcessor: 'stylus',
            patterns: [
                //这个是加上自己的路径，
                //注意：试过不能使用别名路径
                resolve('src/style/variables.styl'),
            ]
        }
    },

    devServer: {
        // 端口
        port: 3000,

        // 配置代理
        proxy: {
            '^/api': {
              target: 'http://localhost:8081',
              ws: true,
              changeOrigin: true
            },
            '^/data': {
              target: 'http://localhost:3000'
            }
        },

        // mock
        before(app){
            app.get('/api/getUser',(req,res,next)=>{
                res.json(mockData);
            })
        }
    },
    // vue-cli内部webpack配置
    chainWebpack: config => {
        // 设置快捷目录别名
        config.resolve.alias.set('utils',resolve('../utils'))

        // 修改静态资源打包方式，下例为超过10k才用文件导入的方式，否则为base64.默认为4k
        // config.module
        // .rule('images')
        //     .use('url-loader')
        //     .loader('url-loader')
        //     .tap(options => Object.assign(options, { limit: 10240 }))
    },
    // webpack配置
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
          // 为生产环境修改配置...
        } else {
          // 为开发环境修改配置...
        }
    }
}

// babel.config.js
module.exports = {
  presets: [
    '@vue/app',
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

// .browserslistrc
> 1%
last 2 versions

// package.json
{
  "name": "pc",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:serve": "serve -s dist",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "clipboard": "^2.0.4",
    "core-js": "^2.6.5",
    "element-ui": "^2.9.1",
    "register-service-worker": "^1.6.2",
    "serve": "^11.0.2",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-plugin-eslint": "^3.8.0",
    "@vue/cli-plugin-pwa": "^3.8.0",
    "@vue/cli-plugin-unit-mocha": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-eslint": "^10.0.1",
    "babel-plugin-component": "^1.1.1",
    "chai": "^4.1.2",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "style-resources-loader": "^1.2.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-cli-plugin-style-resources-loader": "^0.1.3",
    "vue-template-compiler": "^2.6.10"
  }
}

В этой статье рассматривается базовый процесс настройки проекта cli3.Мы можем построить наш собственный проект в соответствии с этой картой ума.

Ссылка в этой статьеофициальный сайт vue-cli

Если вы хотите получить исходный файл карты разума в высоком разрешении, отсканируйте общедоступную учетную запись ниже:

Нажмите, чтобы войти в группу на официальном аккаунте, вы можете присоединиться к учебной группе Vue и вместе изучить передовые технологии.

больше рекомендаций

Категории