一 前言
1.简介
这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。
2.项目地址
- 集成方案: vue-element-admin
- 基础模板: vue-admin-template
- 桌面终端: electron-vue-admin
- Typescript 版: vue-typescript-admin-template (鸣谢: @Armour)
- Others: awesome-project
建议使用基础模板进行二次开发 ：github.com/PanJiaChen/…
3.开始开发
3.1 克隆项目
git clone https://github.com/PanJiaChen/vue-admin-template.git
3.2 进入项目目录
cd vue-admin-template
3.3 安装依赖
npm install
3.4 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
3.5 启动服务
npm run dev
二 目录结构
├── build # 构建相关
├── mock # 项目mock 模拟数据
├── plop-templates # 基本模板
├── public # 静态资源
│ │── favicon.ico # favicon图标
│ └── index.html # html模板
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件
│ ├── directive # 全局指令
│ ├── filters # 全局 filter
│ ├── icons # 项目所有 svg icons
│ ├── lang # 国际化 language
│ ├── layout # 全局 layout
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法
│ ├── vendor # 公用vendor
│ ├── views # views 所有页面
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件 加载组件 初始化等
│ └── permission.js # 权限管理
├── tests # 测试
├── .env.xxx # 环境变量配置
├── .eslintrc.js # eslint 配置项
├── .babelrc # babel-loader 配置
├── .travis.yml # 自动化CI配置
├── vue.config.js # vue-cli 配置
├── postcss.config.js # postcss 配置
└── package.json # package.json
三 src下的setings.js文件
- 可以配置网页标题
- 可以配置是否在侧边栏显示logo
详细请看代码：
--> src/settings.js
module.exports = {
title: '花裤衩 后台管理系统基础模板',
/**
* @type {boolean} true | false
* @description Whether fix the header 是否修复头部
*/
fixedHeader: false,
/**
* @type {boolean} true | false
* @description Whether show the logo in sidebar 是否在侧边栏中显示logo
*/
sidebarLogo: false
}
四 vue.config.js文件配置
vue.config.js是vue-cli 配置文件，是一个可选的配置文件，如果项目的（和package.json 同级的）根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。
配置选项
- publicPath
- outputDir
- configureWebpack
- chainWebpack
- devServer
- devServer.proxy
详细注解：
'use strict' // 使用严格
// * vue-cli 配置文件，是一个可选的配置文件，如果项目的（和package.json 同级的）根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。
// 1. 引入path模块 拼接文件路径
const path = require('path')
// 2. 引入settings配置文件
const defaultSettings = require('./src/settings.js')
// 1.1 封装拼接方法
function resolve(dir) {
return path.join(__dirname, dir)
}
// 2.1 获取文件里面的标题
const name = defaultSettings.title || 'vue Admin Template' // page title
// If your port is set to 80,
// 如果您的端口设置为80，
// use administrator privileges to execute the command line.
// 使用管理员权限执行命令行。
// For example, Mac: sudo npm run
// 例如:Mac: sudo npm run
// You can change the port by the following methods:
// port = 9528 npm run dev OR npm run dev --port = 9528
const port = process.env.port || process.env.npm_config_port || 9528 // dev port
// All configuration item explanations can be find in https://cli.vuejs.org/config/
// 导出一个包含了选项的对象
module.exports = {
/**
* You will need to set publicPath if you plan to deploy your site under a sub path,
* 如果计划在子路径下部署站点，则需要设置publicPath，
* for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
* 例如GitHub页面。如果您计划将站点部署到https://foo.github.io/bar/
* then publicPath should be set to "/bar/".
* 那么publicPath应该设置为"/bar/"。
* In most cases please use '/' !!!
* 在大多数情况下请使用'/' !!
* Detail: https://cli.vuejs.org/config/#publicpath
* 细节:https://cli.vuejs.org/config/ publicpath
*/
publicPath: '/', //基本路径
outputDir: 'dist', //构建时的输出目录
assetsDir: 'static', //放置生成的静态资源（js,css,img,fonts)的目录。
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
// 3. DevServer.proxy :
// 如果你的前端应用 和 后端API服务器没有运行在同一个主机上，你需要在开发环境下将API请求代理到API服务器。
// 这个问题可以通过 vue.config.js 中的 devServer.proxy 来配置。
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
before: require('./mock/mock-server.js')
},
// 4. webpack相关配置
configureWebpack: {
// provide the app's title in webpack's name field, so that
// 在webpack的名称字段中提供应用程序的标题，这样
// it can be accessed in index.html to inject the correct title.
// 它可以通过index.html来注入正确的标题。
name: name,
resolve: {
alias: {
'@': resolve('src')
}
}
},
// 5. chainWebpack 是一个函数，会接收一个基于 webpack-china 的chainableConfig 实例，允许对内部的webpack 配置进行更细粒度的修改。
chainWebpack(config) {
// it can improve the speed of the first screen, it is recommended to turn on preload
// 5.1 可以提高第一屏的速度，建议开启预加载
config.plugin('preload').tap(() => [{
rel: 'preload',
// to ignore runtime.js
// https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
include: 'initial'
}])
// when there are many pages, it will cause too many meaningless requests
// 5.2 当页面太多时，会导致太多无意义的请求
config.plugins.delete('prefetch')
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
// process.env环境变量
config
.when(process.env.NODE_ENV !== 'development',
config => {
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [{
// `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/
}])
.end()
config
.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // only package third parties that are initially dependent
},
elementUI: {
name: 'chunk-elementUI', // split elementUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
// 重量需要大于libs和app，否则会被打包成libs或app
test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm 为了适应cnpm
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules 可以自定义规则
minChunks: 3, // minimum common number 最低常见的数量
priority: 5,
reuseExistingChunk: true
}
}
})
// https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
config.optimization.runtimeChunk('single')
}
)
}
}
五 Build文件下的index.js
- chalk
chalk是一个 可以修改终端输出字符样式的 npm 包，提高在终端输出的信息的辨识度
- process
process是node的全局模块，作用比较直观。可以通过它来获取node进程相关的信息，比如运行node程序时的命令行参数。或者设置进程相关信息，比如设置环境变量。
- express
express连接中间件connect,connect维护了一个中间件栈，栈stack：数据结构，每次调用use，都会向这个应用（app)实例的栈（stack）推入一个带路径和处理函数的对象。
详细注解：
// * 构建相关 build
// 1. 引入 runjs , 可以使用node运行
const {
run
} = require('runjs')
// 2. chalk是一个 可以修改终端输出字符样式的 npm 包，提高在终端输出的信息的辨识度
const chalk = require('chalk')
// 3. 引入vue-cli 配置文件
const config = require('../vue.config.js')
// 4. process是node的全局模块，作用比较直观。可以通过它来获取node进程相关的信息，比如运行node程序时的命令行参数。或者设置进程相关信息，比如设置环境变量。
// 4.1 process.argv 获取命令行参数，返回一个数组。
// 参数0: /Users/a/.nvm/versions/node/v6.1.0/bin/node
// 参数1: /Users/a/Documents/argv.js
// 参数2: --env
// 参数3: production
const rawArgv = process.argv.slice(2)
const args = rawArgv.join(' ')
// 4.2 process.env环境变量
if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
const report = rawArgv.includes('--report')
run(`vue-cli-service build ${args}`)
const port = 9526
// 3.1 引入 配置文件的 基本路径
const publicPath = config.publicPath
// 5. express连接中间件connect,connect维护了一个中间件栈，栈stack：数据结构，每次调用use，都会向这个应用（app)实例的栈（stack）推入一个带路径和处理函数的对象。
var connect = require('connect')
// 6. 实现静态资源访问，引入静态资源访问模块，serviceStatic 返回值是一个方法，调用返回的这个方法就可以开启静态资源服务
var serveStatic = require('serve-static')
const app = connect()
app.use(
publicPath,
serveStatic('./dist', {
index: ['index.html', '/']
})
)
app.listen(port, function () {
// 2.1 终端打印出来的信息，通过 chalk.green() 修改颜色，提高信息辨识度。
console.log(chalk.green(`> Preview at http://localhost:${port}${publicPath}`))
if (report) {
console.log(chalk.green(`> Report at http://localhost:${port}${publicPath}report.html`))
}
})
} else {
run(`vue-cli-service build ${args}`)
}
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！