# vueCliModel

**Repository Path**: li_ya_xu/vue-cli-model

## Basic Information

- **Project Name**: vueCliModel
- **Description**: 这是一个Vue2.0的脚手架创建的空白项目，已配置Element UI，同时封装了axios，配置了全局的filter过滤器和directive自定义指令，将router和store模块化，在util文件夹里封装了全局可能用到的公共函数，同时该模板里包含了一个我封装的可高度自由化布局的table组件，使用该空白模板可以省去一部分的项目配置使我们直接快速地开发。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2020-09-21
- **Last Updated**: 2022-07-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## vueCliModel
这是一个Vue2.0的脚手架创建的空白项目，已配置Element UI，同时封装了axios，配置了全局的filter过滤器和directive自定义指令，将router和store模块化，在util文件夹里封装了全局可能用到的公共函数，同时该模板里包含了一个我封装的可高度自由化布局的table组件，使用该空白模板可以省去一部分的项目配置使我们直接快速地开发。

## 项目目录说明


```
|-- public                              // 任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。
|   |-- favicon.ico                     // 浏览器收藏夹图标
|   |-- index.html                      // 单页面 HTML 文件
|-- src                        
|   |-- assets                          // 公共资源目录，放图片等资源
|   |-- components                      // 公共组件目录
|       |-- li-table                    // 封装的可自由布局的table组件
|       |-- LandingPage                 // 封装的logo组件
|       |-- HelloWorld                  // HelloWorld组件
|-- |-- directive                       // 存放全局自定义指令文件夹
|-- |-- filters                         // 存放全局过滤器文件夹
|-- |-- http                            // axios封装
|       |-- api.js                      // 整个项目地api地址管理
|       |-- interceptor.js              // 拦截器封装
|       |-- request.js                  // 封装GET、POST等请求
|-- |-- router                          // Vue Router 路由模块
|       |-- index.js                    // router 主文件
|       |-- modules                     // modules文件夹，模块化配置路由
|-- |-- store                           // Vue 容器模块
|       |-- modules                     // modules文件夹，模块化配置容器
|       |-- index.js                    // store 主文件
|-- |-- util                            // 存放工具文件
|       |-- globalMethods.js            // 存放全局共用方法或变量
|       |-- print.js                    // 打印插件
|       |-- resetMessage.js             // 封装Element UI的message组件，使其每次只弹一个
|-- views                               // 视图组件存储目录，所有的路由页面都存储到这里
|-- App.vue                             // 根组件，最终被替换渲染到 index.html 页面中 #app 入口节点
|-- main.js                             // 整个项目的启动入口模块
|-- .browserslistrc                     // 指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀
|-- .gitignore                          // Git 的忽略配置文件，告诉Git项目中要忽略的文件或文件夹
|-- babel.config.js                     // Babel 的配置文件
|-- package-lock.json                   // 记录安装时的包的版本号，以保证自己或其他人在 npm install 时大家的依赖能保证一致
|-- package.json                        // 包说明文件，记录了项目中使用到的第三方包依赖信息等内容
|-- README.md                           // 说明文档
```


## 运行程序

项目地址：（`git clone`）
```
git clone https://gitee.com/li_ya_xu/vue-cli-model.git
```
通过`npm`安装本地服务第三方依赖模块(需要已安装[Node.js](https://nodejs.org/))

启动发布代码

```
//初始化

npm install

//开发

npm run serve

//打包发布

npm run build

```
## 最后
- 如果喜欢一定要 star哈!!!（谢谢!!）