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

See Configuration Reference.

字体图标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
    |-index    //接口地址
  |-assets     //静态资源
  |-components //封装组件
  |-views      //view页面组件总地址
  |-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.项目准备