vue项目框架(移动端)

零.框架说明

主体技术用得是vue全家桶+webpack

页面自适应是基于rem

跨域问题用proxyTable解决

前后端交互用axios

一.使用vue-cli构架项目主体

1.安装vue-cli

安装vue-cli的前提是你已经安装了npm

npm install vue-cli -g

全局安装

vue -V

察看版本,确定安装成功

2.项目初始化

      vue init

init:表示我要用vue-cli来初始化项目

      :表示模板名称

webpack-一个全面的webpack+vue-loader的模板,

功能包括热加载,linting,检测和CSS扩展。

:标识项目名称,这个你可以根据自己的项目来起名字

vue init webpack vuetest

3.项目配置

Project name :项目名称 ,如果不需要更改直接回车就可以了。注意:这里不能使用大写,所以我把名称改成了vueclitest

Project description:项目描述,默认为A Vue.js project,直接回车,不用编写。

Author:作者,如果你有配置git的作者,他会读取。

Install vue-router? 是否安装vue的路由插件,我们这里需要安装,所以选择Y

Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n,如果你是大型团队开发,最好是进行配置。

setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha,我们这里不需要,所以输入n。

Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试,我们这里不需要,所以输入n。

4.项目启动

npm install 安装我们的项目依赖包,也就是安装package.json里的包,如果你网速不好,你也可以使用cnpm来安装。

npm run dev 开发模式下运行我们的程序。给我们自动构建了开发用的服务器环境和在浏览器中打开,并实时监视我们的代码更改,即时呈现给我们。

5.项目结构

|-- build                            // 项目构建(webpack)相关代码

|  |-- build.js                    // 生产环境构建代码

|  |-- check-version.js            // 检查node、npm等版本

|  |-- dev-client.js                // 热重载相关

|  |-- dev-server.js                // 构建本地服务器

|  |-- utils.js                    // 构建工具相关

|  |-- webpack.base.conf.js        // webpack基础配置

|  |-- webpack.dev.conf.js          // webpack开发环境配置

|  |-- webpack.prod.conf.js        // webpack生产环境配置

|-- config                          // 项目开发环境配置

|  |-- dev.env.js                  // 开发环境变量

|  |-- index.js                    // 项目一些配置变量

|  |-- prod.env.js                  // 生产环境变量

|  |-- test.env.js                  // 测试环境变量

|-- src                              // 源码目录

|  |-- components                    // vue公共组件

|  |-- store                          // vuex的状态管理

|  |-- App.vue                        // 页面入口文件

|  |-- main.js                        // 程序入口文件,加载各种公共组件

|-- static                          // 静态文件,比如一些图片,json数据等

|  |-- data                          // 群聊分析得到的数据用于数据可视化

|-- .babelrc                        // ES6语法编译配置

|-- .editorconfig                    // 定义代码格式

|-- .gitignore                      // git上传需要忽略的文件格式

|-- README.md                        // 项目说明

|-- favicon.ico

|-- index.html                      // 入口页面

|-- package.json                    // 项目基本信息

.

6.项目发布

npm run build

参考链接http://jspang.com/post/vue-cli2.html

二.使用vue-router路由

由于Vue在开发时对路由支持的不足,后来官方补充了vue-router插件,它在Vue的生态环境中非常重要,在实际开发中只要编写一个页面就会操作vue-router。要学习vue-router就要先知道这里的路由是什么?这里的路由并不是指我们平时所说的硬件路由器,这里的路由就是SPA(单页应用)的路径管理器。再通俗的说,vue-router就是我们WebApp的链接路径管理系统。

参考链接:http://jspang.com/post/vue-router.html

三.前端代理解决跨域问题

1.原理

http-proxy-middleware

用于把请求代理转发到其他服务器的中间件。

本地服务器将请求转发给了目标服务器。之所以出现跨域是因为浏览器有

同源策略的限制,但服务器是没有的,所以这种代理方式能够实现的机制大体就是:

本地服务器 --》 代理 --》目标服务器 --》拿到数据后通过代理伪装成本地服务请求的返回值 ---》然后浏览器就顺利收到了我们想要的数据

参考链接:https://www.jianshu.com/p/a248b146c55a

2.webpack中的实现

proxyTable

dev: {

  env: require('./dev.env'),

  port: 8080,

  autoOpenBrowser: true,

  assetsSubDirectory: 'static',

  assetsPublicPath: '/',

  proxyTable: {

    '/api': {

      target: 'http://www.abc.com',  //目标接口域名

      changeOrigin: true,  //是否跨域

      pathRewrite: {

        '^/api': '/api'  //重写接口

      }

    },

  cssSourceMap: false

}

在自己的请求链接前需加上api

'api/ccsrv/h5_act/h5_class_info'

3.优化

这里的项目名api是我们人为加上去的,经过代理之后就没了,

这样我们在配置代理这里还是只需要配置一份就够了,

只是在写接口地址时要注意区分开发环境和线上环境就可以了。

//先人为给接口地址前面加上一个自定义的项目名

let someApi = 'api' + '/xx/xx';

dev: {

  env: require('./dev.env'),

  port: 8080,

  autoOpenBrowser: true,

  assetsSubDirectory: 'static',

  assetsPublicPath: '/',

  proxyTable: {

    '/api': {

      target: 'http://www.abc.com',  //目标接口域名

      changeOrigin: true,  //是否跨域

      pathRewrite: {

        '^/api': '/'  //重写接口

      }

    },

  cssSourceMap: false

}

四.使用rem实现自适应布局

rem代码如下:

export default function() {

    // var devicePixelRatio = 1;

    // var scale = 1 / devicePixelRatio;

    // document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

    // 7.5根据设计稿的横向分辨率/100得来

    // alert(document.documentElement.clientWidth)

    var deviceWidth = document.documentElement.clientWidth;

    // var deviceWidth = window.screen.availWidth

    // alert(navigator.userAgent)

    // alert(deviceWidth)

    // console.log(navigator.userAgent)

    if(deviceWidth > 750) {

        // deviceWidth = 750;

        deviceWidth = 7.5 * 50;

    }

    document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';

    // 禁止双击放大

    document.documentElement.addEventListener('touchstart', function (event) {

        if (event.touches.length > 1) {

            event.preventDefault();

        }

    }, false);

    var lastTouchEnd = 0;

    document.documentElement.addEventListener('touchend', function (event) {

        var now = Date.now();

        if (now - lastTouchEnd <= 300) {

            event.preventDefault();

        }

        lastTouchEnd = now;

    }, false);

}

然后在main.js中引入使用。

结构

main.js

然后在index.css中设置默认大小:

基础css

index.scss一般也在main.js里面引入:


main.js

你可能感兴趣的:(vue项目框架(移动端))