vue后台管理系统记录-基础配置

基于vue + element-ui 后台管理系统
技术栈： vue webpack vuex vue-router ，element-ui axios es6 ESModule sass
单页面应用

性能优化： js css压缩，拆分打包js库文件 js模块 css文件所有静态资源添加指纹

开始：

1.创建admin后台管理系统目录 admin文件下创建config配置文件包含webpack.dev.js开发配置，webpack.prod.js发布配置，创建public静态目录下创建index.html模板文件，在index.html中定义视图div#app，创建开发目录src创建components组件 views目录页面 tools目录工具插件 store目录下index.js 创建vuex文件，main.js为src的入口文件， router路由文件index.js App.vue应用程序组件

2.在main.js文件下引入vue 引入App.vue 实例化Vue渲染应用程序App到div#app上，在引入router和store

store引自src目录下的store router引自src目录下的的router

　　1要在vue实例化中注册store，注册router对App补全代码div#app及代码

　　2要在store的入口文件index.html中引入vue vuex和vuex 解构vuex中的Store,安装Vuex 暴露接口 Store实例化对象，里面有许多参数 state静态数据， mutations 同步消息队列 actions异步消息队列等

　　3要在router的入口文件index.html中引入vue 和 vue-router 安装Router 暴露接口 Router实例化对象并在其中定义路由规则routes

书写webpack.dev.js

　使用elementui要配置ttf woff加载机图标

　简化开发配置，发布配置指令操作在src外部 admin里面创建一个package.json文件

　　{ "scripts": { "serve": "webpack -w --config ./config/webpack.dev.js", "build": "webpack --config ./config/webpack.prod.js" 　　　　 } 　　} 即可npm run serve npm run build发布引入webpack-html-plugin用于拆分模板文件

let HtmlWebpackPlugin= require('html-webpack-plugin')　　// 引入path

let path = require('path');
// 定义根目录
let root = process.cwd();
// 引入vue-loader模块
let {VueLoaderPlugin} = require('vue-loader');
// 引入webpack-html-plugin
let HtmlWebpackPlugin= require('html-webpack-plugin')
// 拆分css
let MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 暴露接口
module.exports = {
    // 配置环境
    mode: 'development',
    // 解决问题
    resolve: {
        alias: {
            '@':path.join(root, './src/'),
            '@v':path.join(root, './src/views'),
            '@c':path.join(root, './src/components/'),
            '@t':path.join(root, './src/tools/'),
        },
        // 配置默认拓展名
        extensions:['.js', '.vue']
    },
    // 入口
    entry: path.join(root, './src/main.js'),
    // 出口
    output: {
        // 我们将静态资源发布到server/static/admin目录下
        path: path.join(root, '../server/static/admin'),
        // 我们将模板资源发布到server/views/admin.html文件中
        filename:'./[name].js',
        // 更改模板文件中引入的相对位置
        publicPath: '/static/admin/'
    },
    module: {
        // 定义规则
        rules: [
            // vue
            {
                test: /\.vue$/,
                use:['vue-loader']
            },
            // 配置css
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            // 配置less
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'

                ]
            },
            // 配置scss
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            },
            // 小图标
            {
                test:/\.(ttf|woff)$/,
                use:['url-loader']
            },
            // 图片
            {
                test:/\.(png|jpg|gif)$/,
                use:['url-loader']
            }
        ]
    
    },
    plugins: [
        new VueLoaderPlugin(),
        // 拆分模板文件
        new HtmlWebpackPlugin({
　　　　　　　　//找到模板文件的位置
            template: path.join(root, './public/index.html'),
            // 指定发布的位置
            filename: path.join(root, '../server/views/admin.html'),
            // 设置hash
            hash: true
        }),
        // 拆分css
        new MiniCssExtractPlugin({
            // 发布的位置是相对于path来说的
            filename: './style.css'
        })
    ],
      // 优化
      optimization: {
        // 拆分文件
        splitChunks: {
            // 缓存分组
            cacheGroups: {
                lib: {
                    // 名称
                    name: 'lib',
                    chunks: 'initial',
                    // 特征
                    test: /node_modules/
                }
            }
        }
    }
}

webpack.prod.js

// 导入webpack.dev.js文件
let devObject = require('./webpack.dev.js');

// 改变环境 压缩js
devObject.mode = 'production';

// 压缩css
let OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

devObject.plugins.push(new OptimizeCssAssetsWebpackPlugin() );

// 暴露接口
module.exports = devObject;

后台管理项目杂记

vue后台管理系统记录-基础配置

相关

标签