第二节:三方库集成和配置(vue cli-webpack、element-plus、axios、vscode、区分不一样环境)

2021年11月24日 阅读数:10
这篇文章主要向大家介绍第二节:三方库集成和配置(vue cli-webpack、element-plus、axios、vscode、区分不一样环境),主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

一. vue cli-webpack配置javascript

1. 说明css

 在vue cli建立的项目中,配置文件为:vue.config.jshtml

 vue.config.js 是一个可选的配置文件,若是项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。vue

2. vue cli 基本配置java

(详见:https://cli.vuejs.org/zh/config/#全局-cli-配置 ) react

(1). outputDirwebpack

(2). publicPathios

剖析:web

  默认值为‘/’,生成的打包文件的引用的路径都是以/开头,无法直接在vscode中运行,须要部署后才能运行,npm

  若是改成'./',生成的打包文件的引用路径以下图,能够直接在vscode中运行

3. webpack配置 

(详见:https://cli.vuejs.org/zh/guide/webpack.html#简单的配置方式 ) 

 在vue cli建立的项目中,不能配置webpack.config.js文件,须要在vue.config.js中的configureWebpack 或 chainWebpack 属性中配置, configureWebpack 属性中的配置和webpack中的配置同样,自动就合并了。

补充:cli中,@符号已经默认配置了,对应的就是src目录,固然能够重写。

下面是几种写法: 

const path = require('path');

module.exports = {
    //CLI提供的属性
    outputDir: './build',
    // publicPath: './', //打包后的能够直接使用,不用发布,默认是 '/'
    // webpack写法1(json格式)
    // 和webpack属性彻底一致, 最后会进行合并
    configureWebpack: {
        resolve: {
            alias: {
                components: '@/components',
            },
        },
    },
    // webpack写法2(函数形式)
    // configureWebpack: (config) => {
    //   config.resolve.alias = {
    //     '@': path.resolve(__dirname, 'src'),
    //     components: '@/components'
    //   }
    // }
    // webpack写法3(链式编程)
    // chainWebpack: (config) => {
    //     config.resolve.alias
    //         .set('@', path.resolve(__dirname, 'src'))
    //         .set('components', '@/components');
    // },
};

 

二. element-plus配置

1. 全局引用

(1). 说明

  若是你对打包后的文件大小不是很在意,那么使用完整导入会更方便。

(2). 步骤

A. 安装生产依赖 【npm install element-plus】

B. 全局引用,在main.ts文件中导入

import { createApp } from 'vue';
import App from './App.vue';
// 全局引入element-plus
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);
app.use(ElementPlus); //全局引用element-plus
app.use(golbalRegister); // 按需引入element-plus

app.mount('#app');

C. 在页面中直接使用任意组件便可

<template>
    <div>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
    </div>
</template>

<script lang="ts">
    import { defineComponent } from 'vue';
    export default defineComponent({
        setup() {
        },
    });
</script>

<style lang="less"></style>

2. 按需引用

(1).说明

  根据须要导入相应的组件和样式

(2).步骤

 直接在对应页面导入组件和组件的样式,使用便可

<template>
    <div>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
    </div>
</template>

<script lang="ts">
    import { defineComponent } from 'vue';
    import { ElButton } from 'element-plus';
    import 'element-plus/theme-chalk/el-button.css';
    export default defineComponent({
        components: {
            ElButton,
        },
        setup() {
        },
    });
</script>

<style lang="less"></style>

3. 按需引用-全局封装

(1). 说明

 上述在每一个页面导入组件和组件的样式过于繁琐,因此这里将element-plus的组件封装成全局,而后每一个页面直接使用便可,采用插件的形式进行封装  (这里有个问题,高版本的按需导入样式存在问题,这里的封装仅仅按需导入插件,样式使用的总样式)

(2). 步骤 

A. 封装register-element.ts文件(插件形式)

import { App } from 'vue';
import 'element-plus/dist/index.css'; //全局样式
import { ElButton, ElCheckbox } from 'element-plus';
const components = [ElButton, ElCheckbox];

export default function (app: App): void {
    // 注册全局组件
    for (const cItem of components) {
        app.component(cItem.name, cItem);
    }
}

B. 封装global文件夹下的index.ts文件,统一出口

import { App } from 'vue';
import registerElement from './register-element';

// 插件的形式对外导出(函数模式)
export function golbalRegister(app: App): void {
    app.use(registerElement);
}

C. 在main.ts中进行导入

import { createApp } from 'vue';
import App from './App.vue';
// 按需引入element-plus
import { golbalRegister } from './global';

const app = createApp(App);
app.use(golbalRegister); // 按需引入element-plus

app.mount('#app');

D. 页面中直接使用便可 

<template>
    <div>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
    </div>
</template>

<script lang="ts">
    import { defineComponent } from 'vue';
    export default defineComponent({
        setup() {
        },
    });
</script>

<style lang="less"></style>

 

三. axios配置

 

 

 

 

 

 

 

四. vscode配置

 1. 在vscode中设置选项中,输入配置,而后选择settings.json,进行配置

 

2.  分享一个vscode的配置

{
  "workbench.iconTheme": "vscode-great-icons",
  "editor.fontSize": 17,
  "eslint.migration.2_x": "off",
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "files.autoSave": "afterDelay",
  "editor.tabSize": 2,
  "terminal.integrated.fontSize": 16,
  "editor.renderWhitespace": "all",
  "editor.quickSuggestions": {
    "strings": true
  },
  "debug.console.fontSize": 15,
  "window.zoomLevel": 1,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "explorer.confirmDragAndDrop": false,
  "workbench.tree.indent": 16,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "editor.wordWrap": "on",
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  },
  "hediet.vscode-drawio.local-storage": "eyIuZHJhd2lvLWNvbmZpZyI6IntcImxhbmd1YWdlXCI6XCJcIixcImN1c3RvbUZvbnRzXCI6W10sXCJsaWJyYXJpZXNcIjpcImdlbmVyYWw7YmFzaWM7YXJyb3dzMjtmbG93Y2hhcnQ7ZXI7c2l0ZW1hcDt1bWw7YnBtbjt3ZWJpY29uc1wiLFwiY3VzdG9tTGlicmFyaWVzXCI6W1wiTC5zY3JhdGNocGFkXCJdLFwicGx1Z2luc1wiOltdLFwicmVjZW50Q29sb3JzXCI6W1wiRkYwMDAwXCIsXCIwMENDNjZcIixcIm5vbmVcIixcIkNDRTVGRlwiLFwiNTI1MjUyXCIsXCJGRjMzMzNcIixcIjMzMzMzM1wiLFwiMzMwMDAwXCIsXCIwMENDQ0NcIixcIkZGNjZCM1wiLFwiRkZGRkZGMDBcIl0sXCJmb3JtYXRXaWR0aFwiOjI0MCxcImNyZWF0ZVRhcmdldFwiOmZhbHNlLFwicGFnZUZvcm1hdFwiOntcInhcIjowLFwieVwiOjAsXCJ3aWR0aFwiOjExNjksXCJoZWlnaHRcIjoxNjU0fSxcInNlYXJjaFwiOnRydWUsXCJzaG93U3RhcnRTY3JlZW5cIjp0cnVlLFwiZ3JpZENvbG9yXCI6XCIjZDBkMGQwXCIsXCJkYXJrR3JpZENvbG9yXCI6XCIjNmU2ZTZlXCIsXCJhdXRvc2F2ZVwiOnRydWUsXCJyZXNpemVJbWFnZXNcIjpudWxsLFwib3BlbkNvdW50ZXJcIjowLFwidmVyc2lvblwiOjE4LFwidW5pdFwiOjEsXCJpc1J1bGVyT25cIjpmYWxzZSxcInVpXCI6XCJcIn0ifQ==",
  "hediet.vscode-drawio.theme": "Kennedy",
  "editor.fontFamily": "Source Code Pro, 'Courier New', monospace",
  "editor.smoothScrolling": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "workbench.colorTheme": "Atom One Dark",
  "vetur.completion.autoImport": false,
  "security.workspace.trust.untrustedFiles": "open",
  "eslint.lintTask.enable": true,
  "eslint.alwaysShowStatus": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
View Code

 

五. 区分不一样环境

1. 方案1-手动修改

(不可取)

//写法1:每次手动改
const BASE_URL = 'https://www.ypf.org/test';
const BASE_NAME = 'ypf';
export { BASE_URL, BASE_NAME };

2. 方案2-根据process.env.NODE_ENV进行区分

(推荐)

原理:根据cli内置的一个值, process.env.NODE_ENV ,开发环境下为development,生产环境下为production,测试环境下为test,编写一个config.ts文件,if判断,从而对外导出。

分享config.ts代码 

//写法2:根据process.env.NODE_ENV进行区分
// 开发环境: development
// 生成环境: production
// 测试环境: test
let BASE_URL = '';
if (process.env.NODE_ENV === 'development') {
    BASE_URL = 'http://127.0.0.1:8000/';
} else if (process.env.NODE_ENV === 'production') {
    BASE_URL = 'http://ypf.org/prod';
} else {
    BASE_URL = 'http://ypf.org/test';
}
export { BASE_URL }; 

3. 方案3-编写不一样环境变量配置文件 

(推荐)

详见:https://cli.vuejs.org/zh/guide/mode-and-env.html#模式

(1). 定义3个不一样的文件,分别以下,这三个名称是固定的,分别在里面定义变量。

  .env  (各类环境均可以获取)

  .env.development  (开发环境获取)

  .env.production        (生产环境获取)

.env代码以下:

/* 开发和生产环境都能获取 */
VUE_APP_NAME=ypf0

.env.development 代码以下:

VUE_APP_BASE_URL=https://ypf.org/dev
VUE_APP_BASE_NAME=ypf2

.env.production代码以下:

VUE_APP_BASE_URL=https://ypf.org/prod
VUE_APP_BASE_NAME=ypf1

 特别注意:只有 NODE_ENV,BASE_URL 和以 VUE_APP_ 开头的变量将经过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。

(2). 测试代码 

  须要用process.env.xxx进行调用

    export default defineComponent({
        setup() {// 测试写法3
            console.log('测试写法3');
            console.log(process.env.VUE_APP_BASE_URL);
            console.log(process.env.VUE_APP_BASE_NAME);
            console.log(process.env.VUE_APP_NAME);
        },
    });

 

 

 

 

 

 

 

!

  • 做       者 : Yaopengfei(姚鹏飞)
  • 博客地址 : http://www.cnblogs.com/yaopengfei/
  • 声     明1 : 若有错误,欢迎讨论,请勿谩骂^_^。
  • 声     明2 : 原创博客请在转载时保留原文连接或在文章开头加上本人博客地址,不然保留追究法律责任的权利。