vue3+webpack5 ---- 引入elementplus和router

继续上回,这次主要是配置elementUIPlus,和vue-router4 目前成功

按需引入elementplus 和配置按需引入

npm install element-plus --save
npm install -D unplugin-vue-components unplugin-auto-import

register-element文件

import 'element-plus/dist/index.css'; //全局样式
import { ElButton, ElCheckbox,ElForm,ElFormItem,ElInput,ElIcon, ElMenu} from 'element-plus';
const components = [ElButton, ElCheckbox,ElForm,ElFormItem,ElInput,ElIcon,ElMenu];

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

index

import registerElement from './register-element';

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

main 需要做配置

import { golbalRegister } from './element/index';
app.use(golbalRegister); // 按需引入element-plus

配置路由

npm install vue-router@4

import { createRouter, createWebHashHistory, } from 'vue-router'

import Home from '@/views/Home/index'
import Login from '@/views/Login/index'
import Layout from '@/layouts/index'
/**
 */
const routes = [
  {
    path: '/',
    name: 'Layout',
    component: Layout,
    children: [
      {
        path: '/',
        name: 'home',
        component: Home
      },
      {
        path: '/seting',
        name: '设置',
        children: [
          {
            path: '/seting/map',
            name: '地图',
            component: import ('@/views/Setting/Map/index')
          }
        ]
      }
    ]
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/404',
    name: '报错',
    component: Home
  }
]

/**
 * 定义返回模块
 */
const router = createRouter({
  history: createWebHashHistory('/'), // 设置为history模式，就是路径里面没有#,  createWebHashHistory 是默认的，括号里面的就是基础路径，可以理解为项目名称，就是请求路径的基础url
  routes
})

export default router

在utils中做了路由拦截

import router from '@/router'   // 引入router
const { name: packageName } = require('../../package.json')
import {getToken} from './auth'
router.beforeEach((to, from,next) => {
  console.log(getToken(packageName))
  // 
  if(!getToken(packageName) && to.path !== '/login'){
    router.push({path:'/login'})
  }
  next()
});

webpack 做了下优化

/*
 * @Description:
 * @Author: yourName
 * @Date: 2022-04-15 14:05:30
 * @LastEditors: yourName
 * @LastEditTime: 2022-04-21 17:18:34
 */
//webpack.config.js
// __dirname 代表当前目录，nodejs 会自动识别
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const Components = require('unplugin-vue-components/webpack')
const AutoImport = require('unplugin-auto-import/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  entry: {
    //入口文件
    bundle: __dirname + '/src/main.js'
    // admin:__dirname + "/src/map.js"
  },
  output: {
    //输出文件
    path: __dirname + '/dist', //输出文件路径
    filename: '[name].[contenthash:8].js', //输出文件名
    clean: true //是否清除
  },
  resolve: {
    extensions: ['.vue', '.js', '.json'], //引入这些文件 可以不带后缀 按顺序解析
    alias: {
      '@': __dirname + '/src', //@方式引入资源
      components: '@/components'
    }
  },
  devServer: {
    port: 9999,
    open: 'http://localhost:' + 9999 //打开指定窗口
    // proxy: {
    //   "/api": {
    //     target: "",
    //     secure: true, // 如果是https接口，需要配置这个参数
    //     changeOrigin: true,
    //     pathRewrite: { "^/finchinaAPP": "" },
    //   },
    // },
  },
  //loader 配置
  module: {
    rules: [
      // 解析ES6转为ES5
      {
        test: /\.js$/,
        // exclude：排除
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.s[ac]ss$|\.css$/,
        use: [
          // 将 JS 字符串生成为 style 节点
          // 'style-loader',
          MiniCssExtractPlugin.loader, // 添加 loader
          // 将 CSS 转化成 CommonJS 模块
          'css-loader',
          'postcss-loader',
          // 将 Sass 编译成 CSS
          'sass-loader'
        ]
      },
      {
        test: /\.vue$/,
        exclude: /node_modules/,
        use: ['vue-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './public/index.html',
      // chunks:["m"], //选择需要引入的js 不配置全部引入
      minify: {
        removeAttributeQuotes: true, // 删除双引号
        collapseWhitespace: true // 折叠空行
      } // 打包时的压缩配置
    }),
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    }),
    new MiniCssExtractPlugin({ // 添加插件
      filename: '[name].[contenthash:8].css'
    }),
  ],
  devtool: 'inline-source-map', //webpack使用过程中，控制台出现出现如下警告：
  mode:process.env.NODE_ENV === 'dev' ? 'development' :'production'
}

Layout 可以参考element-plus.gitee.io/zh-CN/compo… 后面引入 vuex 和 axios