# vue-cli

**Repository Path**: dew_admin/vue-cli

## Basic Information

- **Project Name**: vue-cli
- **Description**: 个人vuecli手脚架常用配置
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-01-27
- **Last Updated**: 2021-01-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 说明
本项目是vue-cli3进行配置改善的多页面应用，可用于单应用但是多登陆入口、多页面模块的应用开发~~~~**vue多页面应用开发**!
打包后所有内容将会打包成一个项目

## public文件夹(主要用于存放静态文件以及引入的插件)
static 静态资源文件夹
jquery.min.js引入JQ (针对一些插件需要引入JQ作为前置内容，现在配置完毕)
browse.html 浏览器升级页面，针对低版本浏览器进行提示升级
favicon.ico 页面标题小图标
index.html 主html文件入口

## src文件夹
###api文件夹---主要用于本项目所有接口内容的编写与管理，可根据模块分割成不同的Js文件
api.js文件用于定义全局接口调用方法，可以直接通过this.$api.方法名调用
     
###assets文件夹---主要用于存放项目的一些常用静态文件
css---common.scss全局自定义样式表、localElementUI.css饿了么UI自定义样式表、reset.css重置样式表
font---字体图标
images---图片存放文件，建议按照模块建立文件夹放置图片（layout、login......）

###components---主要用于存放全局组件（建议：按照功能模块命名文件夹存放）注意：需要在当前文件夹的components.js中进行全局注册，注册完毕后可以无需引用直接使用
layout（全局布局组件）：401页面、404页面、app-footer页脚、app-header页头。
根据项目的需要进行合理的划分。如：弹出框组件、搜索组件等

###config文件夹：配置文件夹
axios配置文件
include插件引入配置文件

###store文件夹：vuex状态管理文件夹
modules 文件夹，分块管理vuex的数据状态
admin-store.js 后台vuex模块
index-store.js 门户vuex模块
store.js 主状态管理配置文件，可按照需求进行多模块配置

###utils文件夹：各种功能文件配置文件夹
directives.js 全局自定义指令配置文件
filter.js  全局过滤器配置文件
format.js  数据格式转换配置文件：用于将后台返回非文字内容转换成对应前端需要文字内容（统一集中起来方便管理使用）
methods.js 全局方法配置文件(可通过this.的方式调用)
utils.js  工具方法配置文件（与methods.js区别在于本文件内容按需引用）
validator.js  正则与内容校验方法配置文件

###views文件夹：主应用文件夹
admin---后台管理主功能模块入口 http://localhost/admin.html#/
 -router 后台管理路由配置
 -Home.vue 后台管理主Vue入口
 -main.js 后台管理主控制入口
index---门户管理主功能模块入口 http://localhost/index.html#/
 -router 门户管理路由配置
 -Home.vue 门户管理主Vue入口
 -main.js 门户管理主控制入口
library:共享组件模块，收集了一些有用有趣的组件内容，可以按照需要import导入引用，不引用则不会打包
每个模块根据自己的内容划分为多个子模块，建议：命名按照模块名称+功能名称的形式来

###App.vue: vue项目入口文件 
###.env: 通用环境配置文件：在此处配置的内容将同时在开发和生产环境生效  
###.env.development: 开发配置文件  
###.env.production: 生产配置文件  
###.eslintrc.js: eslint配置文件  
###.gitignore git忽略的文件配置内容 
###babel.config.js: babel配置文件  
###postcss.config.js: postcss配置文件
###package-lock.json: 包文件，参考网上
###package.json: 包管理与引入配置，参考网上
###vue.config.js: vue核心项目配置文件，参考vue-cli3官网

合作开发约定:
1、命名：功能模块单词组合，避免使用中文缩写.
2、每个新建组件都应该有一个最外层的class类名，并且和组件名称一样。如：组件名为：login.vue 里面的内容为：
    <template>
        <div class="login">这里写开发内容</div> 
    </template>
好处在与能够快速准确的定位到指定组件在页面中的具体展示情况。
3、router.js路由中导入组件时按照 先导入，后引用，如：
//单位管理 - 单位列表
const componyManage = ()=>import('src/views/project-entrance/company-manage/company-manage');
{  path: "/home/company/companyList",
    name: "componyList",
    component:componyList,
    meta: {requireAuth: true,title:'单位列表'}
},
这样可以模块话管理路由的内容以及引用