# frame2 **Repository Path**: cbqi/frame2 ## Basic Information - **Project Name**: frame2 - **Description**: 使用vue2.x来构建一个简单的项目框架 - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-01-18 - **Last Updated**: 2021-03-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # frame2 ## Project setup ``` npm install ``` ### Compiles and hot-reloads for development ``` npm run serve ``` ### Compiles and minifies for production ``` npm run build ``` ### Lints and fixes files ``` npm run lint ``` ### Customize configuration See [Configuration Reference](https://cli.vuejs.org/config/). ### 使用的插件 - vuex 数据全局状态管理 - router 全局路由管理和配置 - ant-design-vue ui框架 - mock.js 用于调试使用，拦截http请求 正式开发请关闭这个插件 - vue-ls 用于操作本地存储，会话存储 内存存储 - vue-json-viewer 用于展示json的vue组件，支持大体积的json文件快速解析渲染， 页面中使用： - v-viewer 用于实现轮播图+缩放，旋转照片 - moment 时间插件，用于各种时间格式互转 - nprogress 浏览器进度条 基本用法 NProgress.start(); NProgress.done(); ### vue使用的全局配置 - assets/reset/reset.css // 格式化所有html标签的样式 - assets/reset/resetAant.css //用于修改全局ant design vue的样式， - assets/reset/global.less // 还有 less的全局变量，在vue.config.js 中配置 - assets/font/font.css //全局的字体样式配置,修改于 app.vue中 - src/api //这里面是网络请求配置 - src/store //模块化vuex - @/filters/index ; //全局过滤组件 ### 注意如果真的用于开发请将mock.js关闭，否者网络请求发不出去 ### demo 在components文件夹中有一个demo文件夹，其中编写了一些插件的简单应用，可以通过路由的方式打开页面查看 ### 目录结构 src目录下 tree /f > 文件名 ： 根据这个命令自动生成目录结构树 ``` | App.vue 项目的根节点 │ main.js 项目的主体配置 │ mock.js 拦截路由的插件 │ tree.md │ ├─api 网络请求相关配置 │ article.js 请求地址模块 │ base.js 接口域名管理 │ http.js axios配置 │ index.js 导出请求模块 │ ├─assets │ │ logo.png │ │ │ ├─font 配置字体 │ │ font.css 当前使用的字体配置 │ │ PingFangBold.ttf 字体库 │ │ PingFangExtraLight.ttf 字体库 │ │ PingFangHeavy.ttf 字体库 │ │ PingFangLight.ttf 字体库 │ │ PingFangMedium.ttf 字体库 │ │ PingFangRegular.ttf 字体库 │ │ │ ├─image 静态图片 │ └─reset 全局css配置 │ │ global.less 全局less变量 │ │ reset.css 清除默认样式 │ │ resetAant.less 配置全局ant design vue 样式 │ │ │ └─common 全局less变量模块化 │ color.less 颜色 │ rem.less rem │ size.less 大小 │ ├─components 组件 │ │ HelloWorld.vue │ │ │ └─demo 编写 插件的基本用法 │ index.vue demo │ moment.vue moment插件的基本用法 │ vueJsonViewer.vue 一款用于展示json的vue组件， │ vueLs.vue 封装的一个本地存储的一个插件，可以设置过期时间 │ VViewer.vue 查看图片的插件，功能非常强大 │ ├─filters 全局路由方法 │ index.js │ ├─less 未来存放每个页面的less文件 ├─router 路由管理 │ demo.js demo模块的子路由配置 │ index.js 一级路由配置 │ ├─store vuex │ │ index.js │ │ │ └─modules vuex 模块化 │ user.js 用户模块 │ ├─util 工具类 └─views 视图页面 About.vue Home.vue ``` ### 环境切换 - 启动命令： npm run serve 本地环境 npm run serve:release 预生产环境 npm run serve:production 生产环境 - process.env.NODE_ENV 全局变量 根据这个变量的值来判断当前的环境，使用不同的命令启动项目这个变量的值也会进行相应的改变 development 本地环境 release: 预发布环境 production: 线上环境