• React 框架搭建

    > 框架基于 **create-react-app 2.x** 版本进行搭建,在原基础上完成了UI库及主题定义、axios、路由、国际化以及国际化消息文件的管理、配置管理、本地代理、集成CSS扩展语言等,你可以选择你能掌握或喜欢的技术栈快速搭建出React框架。框架中我们根据多年经验“擅自”定义了一些配置来更好的帮助你完成项目研发,这也是我们推荐的配置。如打包时通过npm run build:test打包测试环境代码、提供全局别名“@”来代替src/pages。当然如果你可以理解并掌握这些内容,你可以随意修改这些配置和代码。 以下介绍了框架各方面的使用方式或实现方式: # 版本锁定(必读) 为了避免npm install时项目依赖升级导致项目无法启动(这通常是依赖升级后,配置发生了变化),代码生成后将包含package-lock.json和yarn.lock文件用于锁定版本,所以请勿删除这两个文件。 # 项目启动 1. 安装依赖,npm install或yarn install 2. npm start # 项目路由 提供HashRouter和BrowerRouter供选择,如果使用BrowserRouter,则需要添加额外的服务器配置,否则会出现页面刷新404问题。如果你必须使用BrowserRouter,请添加`try_files $uri $uri/ /index.html;`配置(注意:以下配置在nginx-1.10.3测试通过,不同nginx版本配置可能会不同),完整配置如下 ``` location / { try_files $uri $uri/ /index.html; root D:\Documents\Downloads\my-react\build; index index.html index.htm; } ``` # 项目打包 - 打包测试环境:npm run build:test(可选) - 打包uat环境:npm run build:uat(可选) - 打包生产环境:npm run build > 打包命令成功后将在项目根目录下生成build目录。 # 环境配置 不同的环境拥有不同的配置文件,方便配置存在环境差异的配置信息,配置文件如下 - env.development: 开发环境 - env.test: 测试环境(可选) - env.uat: 预发布环境(可选) - env.production: 生产环境 > 需要注意的是,环境变量必须以`REACT_APP`开头,如REACT_APP_BASE_URL # 本地代理配置 本地代理配置在src/setupProxy.js中 # 接口定义和调用 **接口定义** 按照模块划分出不同的js文件定义在src/api目录中,如userApi.js, orderApi.js等。接口定义示例如下 order.js ```javascript import request from '../utils/request' export function getOrderInfo (id) { return request.post('/order', { id }) } ``` **请求封装** 项目使用Axios来处理请求,通过请求拦截和响应拦截对请求参数和响应数据进行了统一处理,详见src/utils/request.js。 # 路由配置 采用React-Router-dom,路由信息均配置在src/router/index.js文件中 # 端口配置 在环境配置文件中,如.env.development设置PORT属性即可 # 全局样式 全局样式定义在src/index.css(less, scss)中 # antd主题配置(如果整合了antd) antd的主题配置在src/style/theme.less文件中,可通过此文件对antd的全局样式变量进行覆盖,或定义antd组件的特殊样式。 # 国际化 国际化采用react-intl-universal,消息文件存放在src/locale目录中。通过src/router/index.js初始化国际化配置。国际化消息包含了antd内置的国际化消息,通过src/locale下的国际化消息文件可对内置消息进行覆盖和添加新的消息。 # 代码格式化(可选) 代码格式化采用ESLint实现,对应项目根目录下的.eslintrc.js文件,可通过修改此文件来规范代码格式,具体可参考ESLint官网。

    1次收藏 26次使用
    2020-08-17 03:32
  • Vue PC端框架搭建
    vuex框架搭建

    # 版本说明 在v2.0.0基础上进行了完善,完善内容如下 1. 增加包管理工具的选择 2. 增加npm和yarn的版本锁定文件 3. 支持less和sass同时集成 4. 修复axios封装时接口前缀未定义的bug 5. 删除项目描述属性 # 关于element-ui的主题定制 由于element-ui使用sass作为预编译语言,所以使用less的项目不得不集成sass。如果你只需要更改element-ui中定义的全局样式变量,可以根据官网给出的步骤进行定制,如下: 1. 在assets/style下新增element-theme.scss文件如下 ```scss /* 改变主题色变量 */ $--color-primary: teal; /* 改变 icon 字体路径变量,必需 */ $--font-path: '~element-ui/lib/theme-chalk/fonts'; @import "~element-ui/packages/theme-chalk/src/index"; ``` 2. 修改main.js ```javascript import ElementUI from 'element-ui' import './assets/style/element-theme.scss' // import 'element-ui/lib/theme-chalk/index.css' ``` # 项目目录说明 - build: 打包逻辑,通过`npm run build`时执行该目录下的build.js - config: 配置文件目录 - dist: 打包后的目录,用于发布。(在执行npm run build后产生) - src/assets/constants: 常量文件目录 - src/assets/service: 存放接口定义文件 - src/assets/style: 存放样式文件 - src/assets/utils: 存放工具文件 - src/components: 存放项目自定义组件文件 - src/pages: 存放项目页面文件 - src/router: 存放Vue路由配置 - src/filters: 存放自定义过滤器 - src/directives: 存放自定义指令 - src/layouts: 存放布局组件 - src/store: 存放store文件 - static: 存放静态文件,通过`项目域名/static`可直接访问该目录下的资源 # Store模块化 - 根Store中的state, mutations, actions和getters分别对应src/store中的state.js, mutations.js, actions.js和getters.js。 - 模块Store对应src/store/modules目录,一个模块对应一个js文件。详情参考src/store/modules/sample.js文件。 - 新增模块时,则可以在src/store/modules目录下新建js文件,如demo.js,并在src/modules/index.js中导入即可。 # 环境配置 默认情况下,仅存在开发环境和生产环境,如需添加测试环境和预发布,在生成代码时添加选中即可。 #### 环境运行命令 - 开发环境: `npm run dev` - 测试环境: `npm run build-test` - 预发布环境: `npm run build-uat` - 生产环境: `npm run build` #### 环境配置文件 - config/dev.env.js - config/test.env.js - config/uat.env.js - config/prod.env.js 在配置文件中配置的属性,可通过`process.env.属性名`获取,可参考src/page/Index.vue。 其中,非开发环境命令运行后将产生dist目录,dist目录则为发布内容,将其发布至nginx或其他服务器即可。 # API本地代理配置 接口本地代理配置在config/index.js中,代码如下: ```javascript module.exports = { dev: { proxyTable: { '/api': { target: 'http://127.0.0.1:9000', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` # 国际化 国际化配置在src/i18n目录中,语言配置在src/i18n/langs下。 # 懒加载 采用import方法即可。详细用法请参考[Vue Router懒加载部分](https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E6%8A%8A%E7%BB%84%E4%BB%B6%E6%8C%89%E7%BB%84%E5%88%86%E5%9D%97)和[Webpack代码分离](https://webpack.docschina.org/guides/code-splitting/) # API调用 - 接口调用采用axios,axios的默认配置信息在src/assets/utils/axios.js文件中。为了统一处理请求,我们为其做一层封装,详情请查看src/assets/utils/request.js。 - 关于request.js的使用,可以参考src/pages/Index.vue和src/assets/service/IndexService.js。 # 代码格式化 运行`npm run fix`即可,将自动根据ESLint配置进行代码格式化。 # ESLint的启动和关闭 默认关闭,如需开启,修改config/index.js文件中配置即可,如下: ```javascript module.exports = { dev: { useEslint: true, } } ``` 在关闭ESLint的情况下,仍可以运行`npm run fix`进行代码格式化。 # 常见问答 #### 提示找不到npm命令? 答:这是因为电脑未安装npm,Mac电脑请参考[这篇文章](https://blog.csdn.net/u012627861/article/details/83120476),Windows请自行百度一下下哦~ #### 如何修改端口号? - 第一种方式:端口号配置在config/index.js文件里,你应该可以看到一个名为`port`的属性,修改即可。 - 第二种方式:在package.json中增加PORT参数,例如你需要修改dev的端口号,则可以参考以下代码 ```json { "scripts": { "dev": "cross-env PORT=8081 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js" }, } ``` #### 本地如何修改访问域名? 首先你需要修改hosts文件! - Windows: C:\Windows\System32\drivers\etc\hosts - Mac: /private/etc/hosts 在hosts文件中添加如下内容(需要用管理员身份修改) `test.com 127.0.0.1` 然后修改项目配置,有两种方式! - 第一种方式:在config/index.js文件里,修改`host`属性 - 第二种方式:在package.json中增加HOST参数,可参考以下代码 ```json { "scripts": { "dev": "cross-env HOST=test.com webpack-dev-server --inline --progress --config build/webpack.dev.conf.js" }, } ``` #### 在常见问答里找不到答案? 加入懒猴子QQ群直接找站长!群号:877957236

    8次收藏 425次使用
    2019-11-14 02:21
  • Vue移动端框架搭建

    # 简介 为了实现快速的构建一套完整的基于Vue的移动端框架,我们编写了此套模版。在构架移动端框架时,你或许会处理以下方面的事情 1. 采用rem或vw来适配不同的手机 2. 采用axios并对其进行封装来处理http调用 3. 整合less或sass来更好的编写网页样式 4. 整合i18n来实现国际化 5. 增加测试环境、预发布环境 6. 整合eslint或prettier来格式化或美化我们的代码 7. 使用Vant或其它UI库来快速开发 8. 其它 这些内容通过模版都可以直接构建出来,你也可以选择你喜欢的技术栈进行生成。 # 项目启动 你需要安装node才可以启动本项目!!!安装了node后,你可以按照以下步骤来启动项目 1. 下载生成好的项目 2. 将项目导入编辑器 3. 在项目根目录下运行`npm install`来安装项目依赖包 4. 在项目根目录下运行`npm run dev`来启动项目。 项目启动后,默认访问地址为http://localhost:8080,你可以通过项目访问地址看到如下页面内容; ![1.png](/resources/template/37e22615-6641-439b-87a3-e27c5d4e076d.png)

    1次收藏 49次使用
    2020-07-03 10:44
  • Angular框架搭建(配置中)
    框架搭建angular

    ### Angular框架正在配置中,敬请期待!!! ### 配置完成后,你可以选择以下技术栈进行快速构建 - 可选UI库:Ant Design、Element UI、iView - 除开发环境和生产环境外,可选增加环境:UAT环境、测试环境 - 可选是否需要组件懒加载 - 可选是否是否整合国际化 - 可选预编译语言:Less、Sass 如需添加更多技术栈,可评论区留言!!!

    0次收藏 10次使用
    2020-03-14 00:08

Angular框架搭建(配置中)
0
0

版本号:v0.0.1 | 10次使用
2020-03-14 00:08
Javascript框架搭建angular

    评论

    • 快捷评论:
    • 666
    • 支持一下
    • 请你一定要继续完善
    • 不错,再完善完善就更好了