环境搭建事先准备
本文只注重前端的搭建,后端只提及部分
本框架是基于vue-cli3搭建的,首先你需要安装vue-cli脚手架。
新手上路,有什么写错的请指点
- 查看你的版本,cmd命令
vue -V
- 创建你的项目(admin为项目名称)
vue create admin
然后安装你的各种负载,这里不进行详细说明
我的package.json可以进行参考
"dependencies": {
"axios": "^0.19.0",
"babel-plugin-import": "^1.12.2",
"core-js": "^3.3.2",
"enquire.js": "^2.1.6",
"less": "^3.10.3",
"vue": "^2.6.10",
"vue-apexcharts": "^1.5.1",
"vue-router": "^3.1.3",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.0.0",
"@vue/cli-plugin-eslint": "^4.0.0",
"@vue/cli-service": "^4.0.0",
"@vue/eslint-config-standard": "^4.0.0",
"babel-eslint": "^10.0.3",
"babel-plugin-component": "^1.1.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"less-loader": "^5.0.0",
"lint-staged": "^9.4.2",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"svg-sprite-loader": "^4.1.6",
"vue-template-compiler": "^2.6.10"
},
- 配置vue.config.js
在vue-cli3以后,目录结构十分精简,那么我们的配置写在哪里?
官方文档有说明,在项目根目录下面新建vue.config.js文件
以下我的配置,可以结合官网文档参考一下
const path = require('path') // 引入path模块
function resolve (dir) {
return path.join(__dirname, dir) // path.join(__dirname)设置绝对路径
}
module.exports = {
publicPath: '/', // 基本路径
outputDir: 'dist', // 输出文件目录
lintOnSave: true, // eslint-loader 是否在保存的时候检查
productionSourceMap: true, // 生产环境是否生成 sourceMap 文件
// css相关配置
css: {
extract: true, // 是否使用css分离插件 ExtractTextPlugin
sourceMap: false, // 开启 CSS source maps
modules: false,
loaderOptions: {
less: {
modifyVars: {
'primary-color': '#1DA57A',
'link-color': '#1DA57A',
'border-radius-base': '2px'
},
javascriptEnabled: true
}
}
},
chainWebpack: config => {
// 配置路径别名
co