# VueServer

**Repository Path**: luoyal/VueServer

## Basic Information

- **Project Name**: VueServer
- **Description**: Vue + Webpack PC端框架
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-02-21
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# aquaculture

> 水产养殖项目

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report
```


## 项目搭建

```
#安装vue-cli脚手架
npm install vue-cli

#查看vue脚手架的模板
vue list

#初始化一个webpack模板项目
vue init webpack [项目名]

#安装重置样式表
npm install --save-dev normalize.css

#main.js中引入重置样式表
import 'normalize.css'

#安装css预处理scss
npm install --save-dev sass-loader node-sass css-loader style-loader

#安装sass-resources-loader,避免一个文件多次引入,生产环境
npm install sass-resources-loader -D

#修改build/utils.js文件
scss: generateLoaders('sass').concat({
     loader: 'sass-resources-loader',
     options: {
       resources: path.resolve(__dirname, '../src/styles/index.scss')
     }
   })

#修改config/index.js,方便打包后静态页面展示
module.exports = {
....
  build: {
    assetsPublicPath: './'
  }
....
}

#添加static/js/polyfill.min.js文件,兼容IE浏览器
<script src="/static/js/polyfill.min.js"></script>

#添加mddir模块自动生成文档目录结构
npm install mddir
cd node_modules/mddir/src
node mddir "../../../"

```

## 项目目录结构

```
  |-- build                                               // 构建相关
  |   |-- build.js
  |   |-- check-versions.js
  |   |-- logo.png
  |   |-- utils.js
  |   |-- vue-loader.conf.js
  |   |-- webpack.base.conf.js
  |   |-- webpack.dev.conf.js
  |   |-- webpack.prod.conf.js
  |-- config                                              // 配置相关
  |   |-- dev.env.js
  |   |-- index.js
  |   |-- prod.env.js
  |-- src                                                 // 源代码
  |   |-- App.vue                                         // 入口组件
  |   |-- main.js                                         // 入口js文件
  |   |-- assets                                          // 静态资源目录,css js images
  |   |   |-- logo.png                                    // logo图片
  |   |-- components                                      // 公用组件
  |   |   |-- HelloWorld.vue
  |   |-- api                                             // api请求文件夹
  |   |   |-- api-p                                       // api单独模块文件夹
  |   |   |   |-- home.js                                 // home模块api文件
  |   |   |-- index.js                                    // api主文件
  |   |-- config                                          // 配置文件夹: api请求分装,浏览器存储
  |   |   |-- mixin                                       // vue混淆文件夹
  |   |   |   |-- index.js                                // 请求封装导出文件
  |   |   |   |-- searchMixin.js                          // 请求封装,并集中到mixin中
  |   |   |   |-- server.js                               // axios请求拦截响应封装
  |   |   |-- storage                                     // 浏览器存储文件夹
  |   |   |   |-- localStorage.js                         // localStorage存储
  |   |-- router                                          // 路由文件夹
  |   |   |-- module                                      // 路由模块文件夹
  |   |   |   |-- module1.js                              // module1模块路由文件
  |   |   |-- index.js                                    // 路由总文件
  |   |-- styles                                          // 样式文件夹
  |   |   |-- common                                      // 全局样式文件夹
  |   |   |    |-- flex.scss                              // flex布局样式
  |   |   |    |-- index.scss                             // 全局公用样式
  |   |   |    |-- mixin.scss                             // 混淆样式
  |   |   |    |-- variables.scss                         // 基本配置样式
  |   |-- views                                           // 源文件视图文件夹
  |   |   |-- base                                        // 架构视图文件夹
  |   |   |   |-- layout.vue                              // layout.vue文件
  |   |   |-- demo                                        // demo视图文件夹
  |-- static                                              // 第三方不打包资源
  |   |-- .gitkeep
  |   |-- js
  |   |   |-- polyfill.min.js
  |-- .babelrc                                            // babel-loader 配置
  |-- .editorconfig
  |-- .eslintignore
  |-- .eslintrc.js                                        // eslint 配置项
  |-- .gitignore                                          // git忽略项配置文件
  |-- .postcssrc.js                                       // css预编译器配置
  |-- index.html                                          // 首页文件
  |-- package-lock.json                                   // 当 node_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新
  |-- package.json                                        // 项目依赖库
  |-- README.md                                           // 项目介绍

```