Vue cli 3 项目脚手架 (已配置好环境变量,axios,引入了字体图标 Font Awesome, 若有其他开发需要请自行添加)
Project setup 安装依赖
npm install
Compiles and hot-reloads for development 启动项目
npm run serve //默认开发环境.env文件
npm run serve-prod //生产环境.env.prod文件
Compiles and minifies for production 打包环境
npm run build //默认开发环境.env文件
npm run build-prod //生产环境.env.prod文件
Customize configuration
字体图标Font Awesome
点击在浏览器中选择使用Font Awesome字体图标
插件应用
打包生成 ZIP 文件
1、安装插件 npm install filemanager-webpack-plugin --save-dev
2、vue.config.js配置文件
const FileManagerPlugin = require('filemanager-webpack-plugin');
module.exports = {
configureWebpack: { // webpack 配置,避免缓存js
plugins: [
new FileManagerPlugin({ //初始化 filemanager-webpack-plugin 插件实例
onEnd: {
mkdir: ['./dist'],
archive: [ //然后我们选择dist文件夹将之打包成dist.zip并放在根目录
{source: './dist', destination: './dist/dist.zip'},
]
}
})
]
},
}
工程目录
./dist //打包生成文件存放地址
./public //公共文件
./src //主目录
|-api
|-common //公共接口
|-config //请求相关配置
|-user //用户相关接口
|-zd //宗地相关接口
|-zrz //自然幢相关接口
|-assets //静态资源
|-components //封装组件
|-views //view页面组件总地址
|-login //登录模块
|-mixin //混入组件
|-panel //导航模块
|-systemDZ //多幢
|-systemH //户
|-systemZD //宗地
|-systemZRZ //自然幢
|-App.vue //页面入口vue组件
|-main.js //项目入口js文件
|-router.js //前端路由
|-store.js //vuex应用级数据(state)
./zip //打zip包存放地址
.env //默认开发环境配置
.env.prod //生产环境配置
.eslintrc.js //eslint是用来管理和检测js代码风格的工具,可以和编辑器搭配使用
.babel.config.js //预设可以作为babel插件的数组,甚至是一个可共享的选项配置。
.vue.config.js //vue-cli3配置文件
...
components 封装组件说明
权籍系统整体框架的搭建 1.项目准备