Инструкции по использованию и настройке vue-cli@3.0

Vue.js

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

(1) Установка:

1. Загрузите и установите узел: авторизуйтесьофициальный сайт узлаИ выберите свою собственную подходящую версию узла для установки;

2. Установите инструмент создания лесов vue-cli

npm install -g @vue/cli
# OR
# 推荐使用
npm install -g yarn # 如果已有安装，此步骤不需要
yarn global add @vue/cli

(2) Создайте проект:

vue create my-project
# OR
vue ui
  • Выберите правильную конфигурацию
# 版本信息
Vue CLI v3.7.0 
? Please pick a preset:
# 基础配置
  vue-cli3-demo (vue-router, vuex, sass, babel, typescript, unit-mocha)
  default (babel, eslint)
# 自定义配置，这里我们选择自定义选项，点击回车
> Manually select features
  • Выберите необходимые плагины и инструменты компиляции
? Check the features needed for your project:
# 代码转换，可以让你更好的书写前沿技术
 (*) Babel
# JavaScript 的一个超集，好东西用起来
 (*) TypeScript
# PWA支持,不要求使用可以不选
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
# css预编译器
 (*) CSS Pre-processors
# 代码格式化
 (*) Linter / Formatter
# 书写单元测试用的，不要求使用可以不选
>(*) Unit Testing
 ( ) E2E Testing
  • Следующие параметры конфигурации
# 是否使用class风格进行组件开发
? Use class-style component syntax? Yes
# 使用 babel 对 TypeScript 代码进行编译转换
? Use Babel alongside TypeScript for auto-detected polyfills? Yes

? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
# 选择css预编译，这里我们选择Sass/SCSS
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
# 选择代码格式化配置
? Pick a linter / formatter config: Standard
# 代码检查方式
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
# 选择单元测试工具
? Pick a unit testing solution: Mocha
# 是否将配置放在单独的文件中
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
# 是否将此次配置保存
? Save this as a preset for future projects? No
  • Наконец
cd my-project
npm run install
npm run serve
# OR 推荐使用
yarn install
yarn serve

(3) Структура каталогов

预览图

(4) Конфигурация переменной среды

Описание переменных среды

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略
  1. Создайте новую переменную среды .env.development.test для тестовой среды. и добавьте следующий код
NODE_ENV='development'
VUE_APP_URL='你的测试环境域名'

Только переменные, начинающиеся с VUE_APP_, будут статически встроены в пакет на стороне клиента с помощью webpack.DefinePlugin. Вы можете получить к ним доступ в коде вашего приложения следующим образом:

console.log(process.env.VUE_APP_URL)
  1. Исправлятьpackage.json, И вscriptsДобавьте следующий код внутри
"serve:test": "vue-cli-service serve --mode development.test",
  1. Если в проекте используются общедоступные переменные среды, чтобы избежать настройки в каждом файле .env, мы также можемvue.config.jsнастроить внутри

Перед настройкой давайте взглянем на конфигурацию переменных окружения в эпоху 2.0.Ранее в prod.env.js мы будем настраивать следующим образом:

'use strict'
module.exports = {
    NODE_ENV: '"production"'
}

Очевидно, мы не можем изменить такую ​​конфигурацию в настоящее время, потому что текущий файл конфигурации имеет толькоvue.config.js, поэтому мы добавляем следующий код для установки общедоступных переменных среды.

// vue.config.js
module.exports = {
    chainWebpack: config => {
        // 添加环境变量 
        config.plugin("define")
            .tap(args => {
                args[0]["process.env"].VUE_APP_ENVBANE = JSON.stringify("环境变量值")
                return args;
            });
    },
}

(5) Добавьте файл конфигурации vue.config.js

vue.config.js— это необязательный файл конфигурации, который будет автоматически загружен @vue/cli-service, если он существует в корневом каталоге проекта (на том же уровне, что и package.json ). Вы также можете использовать поле vue в package.json, но учтите, что такой способ записи требует строгого соблюдения формата JSON.

// vue.config.js
module.exports = {
    // baseUrl从 Vue CLI 3.3 起已弃用，请使用publicPath。
    // baseUrl:'./', 
    // 配置sub-path后访问路径为https://xxx-path/sub-path/#/
    publicPath: process.env.NODE_ENV === 'production' ? '/sub-path/' : '/',
    // 输出文件路径，默认为dist
    outputDir: 'dist',  
    // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
    assetsDir: '', 
    // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
    indexPath: '',
    // 配置多页应用
    pages: {
        index: {
            // page 的入口
            entry: 'src/index/main.js',
            // 模板来源
            template: 'public/index.html',
            // 在 dist/index.html 的输出
            filename: 'index.html',
            // 当使用 title 选项时，
            // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'Index Page',
            // 在这个页面中包含的块，默认情况下会包含
            // 提取出来的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        // 当使用只有入口的字符串格式时，
        // 模板会被推导为 `public/subpage.html`
        // 并且如果找不到的话，就回退到 `public/index.html`。
        // 输出文件名会被推导为 `subpage.html`。
        subpage: 'src/subpage/main.js',
    },
    lintOnSave: true,  // 保存时 lint 代码
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {
            // pass options to sass-loader
            sass: {
                // 自动注入全局变量样式
                data: `
                    @import "src/你的全局scss文件路径";
                `
            }
        },
        // 启用 CSS modules for all css / pre-processor files.
        modules: false,
    },
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: false,
    //是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
    parallel: require('os').cpus().length > 1,
    // 所有 webpack-dev-server 的选项都支持
    devServer: {
        port: 8080, // 配置端口
        open: true, // 自动开启浏览器
        compress: true, // 开启压缩
        // 设置让浏览器 overlay 同时显示警告和错误
        overlay: {
            warnings: true,
            errors: true
        },
        // 设置请求代理
        proxy: {
            '/api': {
                target: '<url>',
                ws: true,
                changeOrigin: true
            },
            '/foo': {
                target: '<other_url>'
            }
        }
    },
}

(6) Модификацияwebpackинформация о конфигурации

vue-cli3.0версия былаwebpackконфигурация интегрирована вvue.config.jsвнутри

// 安装 babel-polyfill
// npm install babel-polyfill 或者 yarn add babel-polyfill
// 安装 uglifyjs-webpack-plugin
// npm install uglifyjs-webpack-plugin -D 或者 yarn add uglifyjs-webpack-plugin -D

// vue.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
    chainWebpack: config => {
        // 引入babel-polyfill
        config
            .entry('index')
            .add('babel-polyfill')
            .end();
        // 添加文件路径别名
        config.resolve.alias.set("@", resolve("src"));
        if (isProduction) {
            // 生产环境注入cdn
            config.plugin('html')
                .tap(args => {
                    args[0].cdn = cdn;
                    return args;
                });
        }
    },
    configureWebpack: config => {
        if (isProduction) {
            // 为生产环境修改配置...
            config.plugins.push(
                //添加代码压缩工具，及设置生产环境自动删除console
                new UglifyJsPlugin({
                    uglifyOptions: {
                        compress: {
                            warnings: false,
                            drop_debugger: true,
                            drop_console: true,
                        },
                    },
                    sourceMap: false,
                    parallel: true,
                })
            );
        } else {
            // 为开发环境修改配置...
        }
    },
}
  1. Отдельные сторонние плагины и введение конфигурации cdn

Вот библиотека cdn с открытым исходным кодомwww.bootcdn.cn/

// vue.config.js
const isProduction = process.env.NODE_ENV === 'production';
const cdn = {
    css: [],
    js: [
        'https://xxx-cdn-path/vue.runtime.min.js',
        'https://xxx-cdn-path/vue-router.min.js',
        'https://xxx-cdn-path/vuex.min.js',
        'https://xxx-cdn-path/axios.min.js',
    ]
}

module.exports = {
    configureWebpack: config => {
        if (isProduction) {
            // 用cdn方式引入,分离第三方插件
            config.externals = {
                'vue': 'Vue',
                'vuex': 'Vuex',
                'vue-router': 'VueRouter',
                'axios': 'axios'
            }
        } else {
            // 为开发环境修改配置...
        }
    },
}

Измените html-файл

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>static/favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" href="<%= BASE_URL %>static/favicon.ico" type="image/x-icon" />
  <title>my-project</title>
  <!-- 使用CDN的CSS文件 -->
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
  <% } %>
  <!-- 使用CDN的JS文件 -->
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script">
  <% } %>
</head>

<body>
  <noscript>
    <strong>We're sorry but eye-admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>
</body>

</html>

(7) Пункты оптимизации Preload и Prefetch о количестве запросов после упаковки

Сначала посмотрим на картинку

预览图

Из рисунка видно, что ресурсов загружается много впервые, запросов 217, почему так происходит?

Проверятьофициальная документация, можно узнать, что:

<link rel="preload"> 是一种 resource hint，用来指定页面加载后很快会被用到的资源，所以在页面加载的过程中，我们希望在浏览器开始主体渲染之前尽早 preload。

默认情况下，一个 Vue CLI 应用会为所有初始化渲染需要的文件自动生成 preload 提示。

这些提示会被 @vue/preload-webpack-plugin 注入，并且可以通过 chainWebpack 的 config.plugin('preload') 进行修改和删除。

<link rel="prefetch"> 是一种 resource hint，用来告诉浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容。

默认情况下，一个 Vue CLI 应用会为所有作为 async chunk 生成的 JavaScript 文件 (通过动态 import() 按需 code splitting 的产物) 自动生成 prefetch 提示。

这些提示会被 @vue/preload-webpack-plugin 注入，并且可以通过 chainWebpack 的 config.plugin('prefetch') 进行修改和删除。

Так изменитьvue.config.jsдокумент

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // 移除 prefetch 插件
    config.plugins.delete('preload');
    config.plugins.delete('prefetch');
  }
}

(8) Резюме

vue-cli3 значительно упрощает настройку проекта, а также предоставляет множество параметров конфигурации для удовлетворения потребностей в настройке. Различные конфигурации также очень важны и могут быть настроены и изменены в соответствии с потребностями вашего собственного проекта, что значительно снижает и повышает эффективность работы по разработке.

Вышеизложено все содержание этой статьи.Мы закончили объяснять процесс vue-cli3.0 от установки до изменения конфигурации.Я надеюсь, что это будет полезно для всех в обучении.

Автор этой статьи: Эчи
Ссылка на эту статью:Талант /user/729731…
Заявление об авторских правах: если не указано иное, в этой статье используется@BY-NC-SAсоглашение. Пожалуйста, укажите источник!

Категории