0
点赞
收藏
分享

微信扫一扫

https://gitee.com/lz-126/vue3-cli4#top

才德的女子 2022-02-23 阅读 89
vue.jsjavascriptvue-cli3

vue3-cli4

仓库地址====>
参考地址

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Run your unit tests

yarn test:unit

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.

框架说明

See Configuration Reference

  关于旧版本
Vue CLI的包名称由 vue-cli改成了@vue/cli 。如果你已经全局安装了旧版本的 vue-cli(1.x或2.x)，你需要先通过 npm uninstall vue-cli-g 或 yarn global remove vue-cli 卸载它。

  Node 版本要求
Vue CLI需要Node.js89或更高版本(推荐811.0+)。你可以使用nvm或nvm-windows在同一台电脑中管理多个 Node版本。

  安装（卸载）新版本
npm install -g @vue/cli （安装）
npm uninstall -g @vue/cli (卸载)

@vue/cli 4.5.15

项目搭建

  vue create 项目名


  Babel	一种能让浏览器自动识别向后兼容各版本JavaScript的功能（选）
  TypeScript	一种.ts后缀兼容js的语法（不选）
  Progressive Web App（PWA）Support	渐进式网络应用（不选）
  Router	vue的路由管理组件（选）
  Vuex	vue的状态仓库管理组件（选）
  CSS Pre-processors	CSS预编译（选）
  Linter/Formatter	代码检验 格式检查（选）
  Unit Testing	单元测试 以开发角度测试代码（不选）
  E2E Testing	e2e测试 以用户角度测试代码（不选）

目录

✅ 配置多环境变量

  通过在 package.json 里的 scripts 配置项中添加–mode xxx 来选择不同环境

  只有以 VUE_APP 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中，代码中可以通过 process.env.VUE_APP_BASE_API 访问

  NODE_ENV 和 BASE_URL 是两个特殊变量，在代码中始终可用

配置

  在项目根目录中新建.env, .env.production, .env.de 等文件

  • .env

  serve 默认的本地开发环境配置

#测试环境
NODE_ENV = "development"

# 设置打包输出的目录
OUTPUT_DIR='dist'

#服务地址
VUE_APP_BASE_URL = "./"
#图片地址
VUE_APP_IMGBASE_URL = "./"
  • .env.production

  pro 默认的环境配置（正式服务器）

# 生产环境
NODE_ENV = "production"

# 设置打包输出的目录
OUTPUT_DIR='dist_pro'

#服务地址
VUE_APP_BASE_URL = "https://XXXXXXXX.com/"
#图片地址
VUE_APP_IMGBASE_URL = "https://XXXXXXX.com/"
  • .env.test

  test 默认环境配置（测试服务器）

# 测试环境
NODE_ENV = "test"

# 设置打包输出的目录
OUTPUT_DIR='dist_test'

#服务地址
VUE_APP_BASE_URL = "https://XXXXXXXX.com/"
#图片地址
VUE_APP_IMGBASE_URL = "https://XXXXXXX.com/"

  修改 package.json

"scripts": {
  "serve:pro": "vue-cli-service serve --mode production",
  "serve:build": "vue-cli-service serve --mode production",

  "serve:test": "vue-cli-service serve --mode test",
  "serve:test-build": "vue-cli-service serve --mode test",
}
使用环境变量
<template>
  <div class="home">
    <!-- template中使用环境变量 -->
     BASE_URL: {{ BASE_URL }}
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      BASE_URL: process.env.VUE_APP_BASE_URL
    };
  },
  mounted() {
    // js代码中使用环境变量
    console.log("BASE_URL: ", process.env.VUE_APP_BASE_URL);

  }
};
</script>

▲ 回顶部

✅ 配置基础 vue.config.js

module.exports = {
  // 默认'/'，部署应用包时的基本 URL
  publicPath: IS_PROD ? process.env.VUE_APP_BASE_URL : "./",
  // 生产环境构建文件的目录
  outputDir: process.env.OUTPUT_DIR,
  // 相对于outputDir的静态资源(js、css、img、fonts)目录
  // assetsDir: "", 
  
  // eslint-loader 是否在保存的时候检查
  lintOnSave: false,
  // 关闭eslint
  devServer: {
    overlay: {
      warnings: false,
      errors: false
    }
  },
}

▲ 回顶部

  假设 mock 接口为https://www.easy-mock.com/mock/5bc75b55dc36971c160cad1b/sheets/1

module.exports = {
  devServer: {
    overlay: { // 让浏览器 overlay 同时显示警告和错误
      warnings: true,
      errors: true
    },
    // open: false, // 是否打开浏览器
    // host: "localhost",
    // port: "8080", // 代理断就
    // https: false,
    // hotOnly: false, // 热更新
    proxy: {
      "/api": {
        target:
          "https://www.easy-mock.com/mock/5bc75b55dc36971c160cad1b/sheets", // 目标代理接口地址
        secure: false,
        changeOrigin: true, // 开启代理，在本地创建一个虚拟服务端
        // ws: true, // 是否启用websockets
        pathRewrite: {
          "^/api": "/"
        }
      }
    }
  }
};

  访问

<script>
import axios from "axios";
export default {
  mounted() {
    axios.get("/api/1").then(res => {
      console.log('proxy:', res);
    });
  }
};
</script>

▲ 回顶部

✅ SVG 转 font 字体

npm i -D svgtofont

  根目录新增 scripts 目录，并新建 svg2font.js 文件：

const svgtofont = require("svgtofont");
const path = require("path");
const pkg = require("../package.json");

svgtofont({
  src: path.resolve(process.cwd(), "src/icons/svg"), // svg 图标目录路径
  dist: path.resolve(process.cwd(), "src/assets/fonts"), // 输出到指定目录中
  fontName: "icon", // 设置字体名称
  css: true, // 生成字体文件
  startNumber: 20000, // unicode起始编号
  svgicons2svgfont: {
    fontHeight: 1000,
    normalize: true
  },
  // website = null, 没有演示html文件
  website: {
    title: "icon",
    logo: "",
    version: pkg.version,
    meta: {
      description: "",
      keywords: ""
    },
    description: ``,
    links: [{
        title: "Font Class",
        url: "index.html"
      },
      {
        title: "Unicode",
        url: "unicode.html"
      }
    ],
    footerInfo: ``
  }
}).then(() => {
  console.log("done!");
});

  添加 package.json scripts 配置：

"font": "node scripts/svg2font.js",

  执行：

npm run font

▲ 回顶部

✅ 使用 SVG 组件

npm i -D svg-sprite-loader

  新增 SvgIcon 组件。

<template>
  <svg class="svg-icon"
       aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

  在 src 文件夹中创建 icons 文件夹。icons 文件夹中新增 svg 文件夹（用来存放 svg 文件）与 index.js 文件：

// require.context(directory,useSubdirectories,regExp)
// directory:表示检索的目录
// useSubdirectories：表示是否检索子文件夹
// regExp:匹配文件的正则表达式,一般是文件名
// 例如 require.context("@/views/components",false,/.vue$/)
const requireAll = requireContext => requireContext.keys().map(requireContext);
const req = require.context("./svg", false, /\.svg$/);
requireAll(req);

  在 components 文件夹中创建 index.js 文件, 用来导出全局组件；

// 注册到全局
import SvgIcon from './SvgIcon.vue';

/**
 *  
  install(Vue,option){
        组件
        指令
        混入
        挂载vue原型
  }
*/ 
const pubcom = {
  install(vue) {
    vue.component('SvgIcon', SvgIcon)
  }
}
  
export default pubcom

  在 main.js 中导入 @/components/index.js , @/icons

// 全局组件
import pubcom from "@/components/index.js"
import "@/icons";

import {
  createApp
} from "vue";
import App from "./App.vue";

createApp(App)
  .use(router)
  .use(pubcom)
  .mount("#app");

  修改 vue.config.js

const path = require("path");
const resolve = dir => path.join(__dirname, dir);

module.exports = {
  chainWebpack: config => {
   // svg组件
    const svgRule = config.module.rule("svg");
    svgRule.uses.clear();
    svgRule.exclude.add(/modules/);
    svgRule
      .test(/\.svg$/)
      // .include.add(resolve('@/icons/svg')) //添加我们要处理的文件路径
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]"
      });

    const imagesRule = config.module.rule("images");
    imagesRule.exclude.add(resolve("src/icons"));
    config.module.rule("images").test(/\.(png|jpe?g|gif|svg)(\?.*)?$/);

    return config;
  }
};

  使用 SVG 组件

<template>
 <div>
    <svg-icon icon-class="email"></svg-icon> 邮箱
  </div>
</template>

▲ 回顶部

✅ 为 sass 提供全局样式，以及全局变量

  可以通过在 main.js 中 createApp(App,{KaTeX parse error: Expected 'EOF', got '}' at position 44: …APP_IMGBASE_URL}̲)，然后在js中使用IMGBASE_URL 访问。

  css 中可以使用注入 sass 变量访问环境变量中的配置信息

const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);

module.exports = {

    // pages
  css: {
    // 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中)
    // 也可以是一个传递给 `extract-text-webpack-plugin` 的选项对象
    extract: false, //IS_PROD
    // 是否开启 CSS source map？
    sourceMap: false,
    // 为预处理器的 loader 传递自定义选项。比如传递给
    // Css-loader 时，使用 `{ Css: { ... } }`。
    loaderOptions: {
      // 这里的选项会传递给 css-loader
      scss: {
        // 向全局sass样式传入共享的全局变量, $src可以配置图片cdn前缀
        // 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
        prependData: `
          @import "@scss/base.scss";
          @import "@scss/variables.scss";
          @import "@scss/mixins.scss";
          $src: "${process.env.VUE_APP_IMGBASE_URL}";
          `
      }
    }
  }
};

在 scss 中引用

.home {
  background: url($src+"/images/500.png");
}

▲ 回顶部

✅ 添加 IE 兼容

  在 main.js 中添加

import 'core-js/stable'; 
import 'regenerator-runtime/runtime';

配置 babel.config.js

const plugins = [];

module.exports = {
  presets: [["@vue/app", { useBuiltIns: "entry" }]],
  plugins: plugins
};

▲ 回顶部

举报

相关推荐

not read Username for “https://gitee.com“: Device not configured

服务器运维提交代码远程仓库Java编程语言

https://gitee.com/pengchenggang/gitBlog gitee上新创建的博客

git虚拟化云计算

fatal unable to connect to gitee.com

gitgithub无法连接Java后端开发yyds干货盘点

git clone克隆代码报错:fatal: Authentication failed for ‘https://gitee.com/.......‘

gitjavascript

gitee.com做在线演示的后续

vite2+vue3前端开发那些事儿每天学一点Vue3

[rejected] master ＞ master (fetch first)error: failed to push some refs to ‘https://gitee.com/

git

解决：error: failed to push some refs to ‘https://gitee.com/freemantang/Flask_Classify.git‘

buglinuxgit解决方法系统/运维

在gitee.com做在线演示踩的坑

vite2+vue3前端开发那些事儿每天学一点Vue3

Pycharm提交代码到gitee时，提示loading account information for gitee.com/

python自动化

解决git clone时fatal: unable to access ‘https://gitee.com/XXX.git/‘: The requested returned error: 403

gitgit操作重启git切换账号403软件研发yyds干货盘点
0 条评论