本文版权归和讯和小编周岚本身共同全数 转发和爬虫请注解原著地址
www.cnblogs.com/tdws

从前用Vue2+webpack+express创设单页应用,发现node端无法用es陆的语法,为了前后端都用上es陆的语法,node框架决定尝试koa二

Vue.js是一套营造用户分界面包车型大巴UI框架,它小心于MVVM模型的ViewModel层,通过双向数据绑定把View层和Model层链接起来。

一.写在后面

品类上线有一段时间了,三个依照webpack+vue+ES6的手提式有线电话机端多页面使用。其实说是多页面使用,实际上在webpack中属于八个app,
 要是真是做纯单页面,那应该有二贰17个页面吗。所以本身那里的多页面使用,是分为多少个SPA。比如微信最上边,有四个导航,微信,通信录,发现,小编。
那么那四个导航,正是自作者的八个SPA,配置五个输入就能够。

在此处就背着太多代码了,项目布局将会放到github上,地址在前面给出,以供参考,上传的大约只是一个索引加上配置情状,其实关键点也就在webpack.config.js了,那里主要布局了entry,loader,plugins,output目录啥的。

在此地先附上package.json和webpack.config.js吧:

 

图片 1图片 2

 1 {
 2   "name": "my-web",
 3   "version": "1.0.0",
 4   "description": "desc",
 5   "main": "index.js",
 6   "scripts": {
 7     "test": "echo \"Error: no test specified\" && exit 1",
 8     "start": "webpack-dev-server --inline --hot",
 9     "dev1": "webpack-dev-server --open",
10     "dev": "webpack-dev-server --inline --hot",
11     "build": "set NODE_ENV=production&&webpack"
12   },
13   "author": "ws",
14   "license": "ISC",
15   "devDependencies": {
16     "babel-core": "^6.24.1",
17     "babel-loader": "^7.0.0",
18     "babel-plugin-transform-runtime": "^6.23.0",
19     "babel-preset-es2015": "^6.24.1",
20     "babel-runtime": "^6.23.0",
21     "css-loader": "^0.28.4",
22     "extract-text-webpack-plugin": "^2.1.0",
23     "glob": "^7.1.2",
24     "html-webpack-plugin": "^2.28.0",
25     "jquery": "^3.2.1",
26     "node-sass": "^4.5.3",
27     "sass-loader": "^6.0.5",
28     "slideout": "^1.0.1",
29     "style-loader": "^0.18.2",
30     "url-loader": "^0.5.8",
31     "vue": "^2.3.3",
32     "vue-croppa": "^0.1.0",
33     "vue-hot-reload-api": "^2.1.0",
34     "vue-html-loader": "^1.2.4",
35     "vue-ios-alertview": "^1.1.1",
36     "vue-loader": "^12.2.1",
37     "vue-resource": "^1.3.3",
38     "vue-router": "^2.7.0",
39     "vue-style-loader": "^3.0.1",
40     "vue-template-compiler": "^2.3.3",
41     "vue-touch": "^2.0.0-beta.4",
42     "webpack": "^2.6.1",
43     "webpack-dev-server": "^2.4.5"
44   }
45 }

View Code

 

图片 3图片 4

  1 var path = require('path');
  2 var webpack = require('webpack');
  3 // 将样式提取到单独的 css 文件中,而不是打包到 js 文件或使用 style 标签插入在 head 标签中
  4 var ExtractTextPlugin = require('extract-text-webpack-plugin');
  5 // 生成自动引用 js 文件的HTML
  6 var HtmlWebpackPlugin = require('html-webpack-plugin');
  7 var glob = require('glob');
  8 
  9 var entries = getEntry('./source/**/*.js'); // 获得入口 js 文件
 10 var chunks = Object.keys(entries);
 11 console.log('输出chunks', chunks);
 12 module.exports = {
 13     entry: entries,
 14     output: {
 15         path: path.resolve(__dirname, 'public'), // html, css, js 图片等资源文件的输出路径,将所有资源文件放在 Public 目录
 16         publicPath: '/public/',                  // html, css, js 图片等资源文件的 server 上的路径
 17         filename: 'js/[name].js',         // 每个入口 js 文件的生成配置
 18         chunkFilename: 'js/[id].[hash].js'
 19     },
 20     externals: {
 21         jquery: "$",
 22         EXIF: "EXIF",
 23         wx: "wx"
 24     },
 25     resolve: {
 26         extensions: ['.js', '.vue'],
 27         alias: {
 28             'vue': __dirname + '/lib/vue/vue.js',
 29             //'vue-alert': __dirname + '/lib/vue-alert/vue-alert.js'
 30         },
 31     },
 32 
 33     module: {
 34         loaders: [
 35             {
 36                 test: /\.css$/,
 37                 // 使用提取 css 文件的插件,能帮我们提取 webpack 中引用的和 vue 组件中使用的样式
 38                 //loader: "style-loader!css-loader",
 39                 loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
 40             },
 41             {
 42                 // vue-loader,加载 vue 组件
 43                 test: /\.vue$/,
 44                 loader: 'vue-loader',
 45                 options: {
 46                     //解析.vue文件中样式表
 47                     loaders: {
 48                         // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
 49                         // the "scss" and "sass" values for the lang attribute to the right configs here.
 50                         // other preprocessors should work out of the box, no loader config like this necessary.
 51                         //'scss': 'vue-style-loader!css-loader!sass-loader',
 52                         //'css': 'vue-style-loader!css-loader!sass-loader',
 53                         //'js': 'babel-loader',
 54                         //'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
 55                         css: ExtractTextPlugin.extract({ fallback: 'vue-style-loader', use: 'css-loader' }),
 56                         //exclude: [
 57                         //    path.resolve(__dirname, ""),
 58                         //    //path.resolve(__dirname, "app/test")
 59                         //]
 60                         //exclude:'/source/course/course-detail/course-detail.css'
 61                     }
 62                     // other vue-loader options go here
 63                 }
 64             },
 65             {
 66                 test: /\.js$/,
 67                 // 使用 es6 开发,这个加载器帮我们处理
 68                 loader: 'babel-loader',
 69                 exclude: /node_modules/
 70             },
 71             {
 72                 test: /\.(png|jpg|gif|svg)$/,
 73                 // 图片加载器,较小的图片转成 base64
 74                 loader: 'url-loader',
 75                 query: {
 76                     limit: 10000,
 77                     name: './imgs/[name].[ext]?[hash:7]'
 78                 }
 79             }
 80         ]
 81     },
 82     plugins: [
 83         // 提取公共模块
 84         new webpack.optimize.CommonsChunkPlugin({
 85             name: 'vendors', // 公共模块的名称
 86             chunks: chunks,  // chunks 是需要提取的模块
 87             minChunks: chunks.length
 88         }),
 89         // 配置提取出的样式文件
 90         new ExtractTextPlugin('css/[name].css')
 91     ]
 92 };
 93 
 94 var prod = process.env.NODE_ENV === 'production';
 95 module.exports.plugins = (module.exports.plugins || []);
 96 if (prod) {
 97     module.exports.devtool = 'source-map';
 98     module.exports.plugins = module.exports.plugins.concat([
 99         // 借鉴 vue 官方的生成环境配置
100         new webpack.DefinePlugin({
101             'process.env': {
102                 NODE_ENV: '"production"'
103             }
104         }),
105          new webpack.optimize.UglifyJsPlugin({
106              compress: {
107                  warnings: false
108              }
109          })
110     ]);
111 } else {
112     module.exports.devtool = 'eval-source-map';
113     module.exports.output.publicPath = '/view/';
114 }
115 
116 var pages = getEntry('./source/**/*.html');
117 for (var pathname in pages) {
118     // 配置生成的 html 文件,定义路径等
119     var conf = {
120         filename: prod ? '../views/' + pathname + '.html' : pathname + '.html', // html 文件输出路径
121         template: pages[pathname], // 模板路径
122         inject: true,              // js 插入位置
123         minify: {
124             removeComments: true,
125             collapseWhitespace: false
126         },
127         hash:true
128     };
129     if (pathname in module.exports.entry) {
130         conf.chunks = ['vendors', pathname];
131         //conf.hash = false;
132     }
133     // 需要生成几个 html 文件,就配置几个 HtmlWebpackPlugin 对象
134     module.exports.plugins.push(new HtmlWebpackPlugin(conf));
135 }
136 
137 // 根据项目具体需求,输出正确的 js 和 html 路径
138 function getEntry(globPath) {
139     var entries = {},
140         basename, tmp, pathname;
141 
142     glob.sync(globPath).forEach(function (entry) {
143         basename = path.basename(entry, path.extname(entry));
144         tmp = entry.split('/').splice(-3);
145         pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出 js 和 html 的路径
146         entries[pathname] = entry;
147     });
148     console.log(entries);
149     return entries;
150 }

View Code

 

开垦工具使用的VS20一七,本来使用WS,不过用习惯VS的小编大概受不了,毕竟1七照旧太庞大了嘛。既然是vue项目,那数据请求断定正是vue-res,
路由便是vue-loader,编写翻译es六豪门都以babel。 上面是体系组织预览:

图片 5图片 6图片 7她们分别是图表能源,引用库财富,公布打包后的js和css,src源码和包裹后的html

代码地址:https://github.com/chenjiaj/Vue2-koa2-demo

图片 8

贰.几点重要的获得

一.组件化开荒爽啊,
调用者只须求关心输入和输出,代码明朗,轻巧保证

二.vue-res promise异步风格太美观,太喜欢了。可是有坑,ios捌.x,使用基本浏览器运维js,
不支持promise语法,所以须要在入口中,import多少个npm下载的node
module:

 npm i whatwg-fetch core-js es6-promise –save-dev

 图片 9

三.回忆从前做贰个部手提式有线电话机端项目,完全未有自动化,种种页面间跳转慢的一比,一点也不通畅,项目结构不易于管理,重复代码特别多。

 近百个页面js版本得不到调整,管理js,css引用困难。微信静态能源缓存如此严重,未有版本调控,每一种页面js版本的修改要人命。

4.缓解缓存难题,应明确命令禁止html缓存,由于使用extract-text-webpack-plugin,能够有限支持你html入口中唯有大约的几行代码,等着自动化帮你引进所需js,所以固然禁止html缓存,也不会影响响应速度,终归我们的html文件
     也就1-二k左右.html禁止缓存的原因是防止,js更新后,js
hash版本已改成,但浏览器缓存的html中,照旧是呼吁旧版本js文件,这样一来js版本调整变得没有意义。

  1. js调用手提式有线电话机雕塑,
    调用安卓手提式有线电话机拍照不便于呀,所以假使只想在微信上使用网页的话,建议选拔微信js SDK。

6.
苹果手提式有线电话机和个别安卓手机,使用原生input调用拍录后,图片到页面中会出现旋转难题,所以在微信上
使用js sdk, 在其余浏览器上,就用EXIF.js  手动将其旋转90度
或然180度举行校勘。

7.推荐1款mobile用的科学的弹窗组件
vue-ios-alert.  ios风格的弹窗。地址以及github:  
 http://isay.me/vue-ios-alertview/example/![](https://images2017.cnblogs.com/blog/686162/201709/686162-20170904231146210-1849602734.png)

 

八.手提式有线电话机上的 日期
时分秒选用器,推荐二个有坑的货
 https://github.com/k186 
有坑哦,使用的话,请看closed的率先个issue。其它日期选择依旧比较推荐原生。加上时分秒的话原生的只怕就不佳用。图片 10

9.页面touch切换tag 使用的四个vue-tab
 github找1找,ios八不援救flex-shrink,要采纳-webkit-flex-shrink。

  1. 上拉加载更多用的vue-loadmore,侧方滑动菜单 使用了jquery的slideout

11.
只要路由比较多以来,提出路由单独分八个js配置,并且一定要按需加载,不然打包文件太大。假设是用户点击率异常高的路由,能够间接require进去。

1二.片段js库,就不要通过require了,直接在html引进进来算了,毕竟那么些库基本不会转移,也没供给决定版本

1三.前端AOP,
 vue-res的拦截器点个赞,作者能够在拦截器中,为小编每3个伸手
都增多authentication
header等音讯,像用jq的时候,小编只得手动把ajax包装壹层

14.像微微数据的加载,文字方面,最佳预先给出加载中这种唤醒,不能够给空白。列表的加载
要多思量加载中,加载成功和暂无数据的拍卖。见过多数app和网页都以跻身到列表页,首先二个暂无数据的背景图给出去 
       了,结果稍等一下,数据又加载出来了….

一5.虽说一度组件化了,但自己还建议有一个各类页面公用要求require的js,小编一般都叫application.js
 在此处 能够放1些你的常量,枚举,公共措施,helpers,utils,ajax
等安插,并且在那边能够import footer header vue-res vue-alert
等部分各种组件也许页面都亟需来讲的零件

1六.热替换是必须的,比此前用gulp
livereload方便

一七.手提式有线电话机端页面调节和测试,推荐vConsole(去github找)。
示例:图片 11图片 12

1捌.经过babel编写翻译es伍的都没难点.。
 作者有个独立的小功用,没用es陆,间接谷歌(谷歌(Google))调节和测试开垦,结果到了ios玖.x上
 不协理也不报错,未来制止踩进去吧。上面是代码:

图片 13

1九. IOS上计算时间 供给new Date(‘2017/09/0玖’)的格式,
 而不能够选取横杠的格式

一、须求环境

node版本在7及以上
选料新本子的条件是为着node端不用引进babel对es六做拍卖,新的node版本对es陆有特出的支撑。

vue专注viewModel.png

3.部分缺陷

 一.脑子抽风啊,分为八个SPA,
整套项目下来,以为依旧应当做二个SPA。毕竟SPA之间切换,3个SPA切换来另3个SPA
仍然加载东西太多,不够流畅。尽管微信浏览器缓存“严重”

二.项目结构划分还是不够合理,但感到也还能够应付用。

三.组件化没有公布到极致,本人vue组件间通讯没搞好,md找子组件,我如故还有通过遍历的点子。

四.有个别组件用的jquery的,搭配的不是很流畅,导致个别操作强行使用dom操作。

5.自家有两个条件,开辟,测试,demo, 线上。
每一遍发布到3个条件
 都亟待改了安插后,重新包装,非常惨痛啊,关于这点有啥好的措施吧? 

二、成立基本项目

它有如下特点:

4.写在末了

 这么些项目产品将持续支付,可是下一阶段还有个品种,笔者将动用1个SPA达成,关于vue有怎样好的各类mobile组件,希望dalao不吝推荐。

 

 

如若,您感觉读书那篇博客让你有个别收获,无妨点击一下右下加【推荐】按钮。
要是,您希望更易于地觉察笔者的新博客,不要紧点击下方象牙白【关切】的。
因为,作者的享受热情也离不开您的早晚帮助。

谢谢您的阅读,作者将不止输出分享,小编是蜗牛,
保持学习,谨记谦虚。不端不装,有意思有梦。

1.1 启动koa小项目demo

壹.新建文件夹koa二+vue二-demo,然后进入文件夹,展开cmd进入文件夹内的目录恐怕webstorm的通令面板。

2.施行npm init命令生成package.json文件,然后实践npm install koa
koa-onerror –save 下载koa和 koa-onerror

三.在档次根目录下新建config文件夹,然后进入文件夹新建config.js,输入以下内容,配置端口号

module.exports = {
    node: {
    port: 3011
}

};

4.在档次根目录新建app.js文件,然后输入以下内容,创设3个主旨的类型

const Koa = require('koa');
const app = new Koa();
const Config = require('./config/config');
const onerror = require('koa-onerror');

//错误信息处理
onerror(app);

//控制台打印请求信息
app.use(async(ctx, next) => {
    const start = Date.now();
    await next();
    const ms = Date.now() - start;
    console.log(`${ctx.method} ${ctx.url} - ${ms}ms`);
});

app.listen(Config.node.port);
  1. 修改package.json,在script对象中增多 “start”: “node
    ./app.js”,如下图所示

图片 14

Paste_Image.png

六.那儿在命令面板中输入npm start就可以运行项目,然后在浏览器中做客
http://localhost:3011/,因为以往还未有对请求做任何处理,所以回来not
found。

图片 15

Paste_Image.png

  1. 渐进式框架,接纳自底向上增量开采设计
  2. 模板双向绑定机制
  3. 选用指令(directive)对DOM实行李包裹装
  4. 组件化设计思想
    如下图,将UI页面分割为多少组件进行重组和嵌套。

1.2 添加vue页面,实现hello world

1.在根目录下新建src,然后在src下加多index.html文件,并且增加叁个id为app的div,如下。同时在命令面板输入
npm install vue –save

图片 16

Paste_Image.png

2.在src目录下新建views文件夹(存放全数的.vue文件),并在此文件夹下增加app.vue文件。在app.vue写入一下代码:

<template>
    <div>hello world!</div>
</template>

三.在src下新建main.js作为vue的输入文件。在main.js中丰盛以下内容:

import Vue from 'vue';
import App from './views/app.vue';

new Vue({
  el: '#app',
  render: h=> h(App)
});

方今目录结构如下:

图片 17

Paste_Image.png

三个hello world
的demo就写好了,可是要在浏览器看到功效,还索要引进vue包,同时也急需增多webpack打包必要的公文与安顿。将vue内容打包引进index.html中,然后再将node接收到的页面请求重回打包后的index.html页面

![](https://upload-images.jianshu.io/upload_images/25750-ee807e6ffc0810a0.png)

组件化.png

一.3 增加webpack打包文件与布局

壹.下载webpack打包需求的依靠包

npm install webpack webpack-merge koa-webpack extract-text-webpack-plugin html-webpack-plugin css-loader file-loader vue-template-compiler vue-loader vue-style-loader  --save-dev

webpack :webpack打包必要引进的大旨包

koa-webpack:封装了webpack-dev-middleware和webpack-hot-middleware三个插件

webpack-dev-middleware是内需webpack打包的档次,开荒时使用的中间件,重要效能是不要求将包装生成的公文放在硬盘中,而是位于内部存储器中,那样能够增长支付成效,而且极度webpack-hot-middleware中间件使用能够达成热加载

extract-text-webpack-plugin:重假设为着抽离css样式,幸免将样式打包在js中滋生页面样式加载错乱的现象

html-webpack-plugin:是webpack的插件,这些插件用来简化成立服务于
webpack bundle 的 HTML 文件,特别是对此在文书名中包罗了 hash
值,而这一个值在历次编写翻译的时候都产生变化的意况。你既能够让那么些插件来赞助您自动生成
HTML 文件,也能够接纳 lodash 模板加载生成的 bundles,恐怕本人加载这些bundles。

vue-loader:是webpack的loader,能够将.vue文件转产生js文件

vue-html-loader、vue-template-compiler、css-loader、vue-style-loader:那七个都以webpack的loader,都以将.vue文件转变到js文件的依靠

2.下载babel供给的借助包

npm install babel-core babel-loader babel-plugin-transform-runtime babel-polyfill babel-preset-es2015 babel-preset-stage-0 babel-runtime   --save-dev

以babel-开头:都是用以包容es陆写法,将es六的代码转换来es5的代码
babel-core、babel-loader:babel合营webpack工具使用供给求引进的
babel-plugin-transform-runtime、babel-runtime:解决重复出现在部分模块里,导致编写翻译后的代码体量变大的标题。
babel-preset-es2015:将 ES2015 编译成 ES5
babel-preset-stage-2:除了覆盖stage-3的富有机能,不是对ES陆意义的加码,而是为了升高代码的可读性和可修改性而建议的参照:http://babeljs.io/docs/setup/\#installation

三.在根目录下加多.babelrc文件,增多以下配置:

    {
          "presets": ["es2015","stage-0"],
          "plugins": ["transform-runtime"],
          "comments": false
     }

4.在根目录下新建build文件夹,然后增添webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js
webpack.base.conf.js:开垦和变化环境①致配置写字那些里面
webpack.dev.conf.js:针对开垦时陈设的文本
webpack.prod.conf.js:针对生产条件(正式上线)配置的文本

伍.在webpack.base.conf.js中增进以下配置

 /* 引入操作路径模块和webpack */
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
/* 输入文件 */
entry: {
    index: ['babel-polyfill', path.resolve(__dirname, '../src/main.js')]
},
output: {
    /* 输出目录,没有则新建 */
    path: path.resolve(__dirname, '../dist'),
    /* 静态目录,可以直接从这里取文件 */
    publicPath: '/',
    /* 文件名 */
    filename: 'js/[name].[hash].js',
    chunkFilename: 'js/[name].[chunkhash].js'
},
module: {
    rules: [{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
            loaders: {
                css: ExtractTextPlugin.extract({
                    use: 'css-loader',
                    fallback: 'vue-style-loader' // <- this is a dep of vue-loader, so no need to explicitly install if using npm3
                })
            }
        }
    }, {//页面中import css文件打包需要用到
        test: /\.css/,
        loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
    }, {
        test: /\.js$/,
        loader: 'babel-loader',
        /* 排除模块安装目录的文件 */
        exclude: /node_modules/
    },{
        test: /\.png$|\.jpg$|\.gif$|\.ico$/,
        loader: "file-loader",
        exclude: /node_modules/
    }]
},
plugins: [
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: path.resolve(__dirname, '../src/index.html'),
        inject: true
    }),
    new ExtractTextPlugin("style.css")
]

};

陆.大家先安插开辟是急需文件,生成环境之后再近些配置。
首先在webpack.dev.conf.js中添加

const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.conf');
const webpack = require('webpack');

let devConfig =  merge(baseConfig, {
output: {
    path: '/'
},
plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
]
});

module.exports = devConfig;

7.然后在app.js中添加webpack配置,如下

图片 18

Paste_Image.png

8.然后运营npm start运维项目,看到打字与印刷出一下日志,注脚运转成功

图片 19

Paste_Image.png

玖.在浏览器中访问http://localhost:3011/,效果如下,vue

  • koa营造3个hello world的小品种就马到成功了。

图片 20

Paste_Image.png

围绕Vue.js框架,涉及到的常用手艺/插件有:

叁、增加路由达成单页

1. vue-cli

迅猛创设vue项目标脚手架工具,使用办法如下:

安装并构建项目
1. npm install -g vue-cli
2. 选择简单模板搭建vue项目:vue init webpack-simple my-webpack-simple-demo
3. 选择webpack(略复杂)模板搭建vue项目: vue init webpack my-webpack-demo

建立好项目之后,如下启动:
1. npm install
2. npm run dev
3. 打开游览器访问localhost:8080

如果在发布环境,需要生成build文件,运行命令npm run build。

一.一 vue增加路由

1.下载路由的借助包 npm install vue-router –save

2.在src文件夹下增多router文件夹,然后新建index.js,存放路由重点布局

3.在views文件夹下,增添example文件,然后增添八个文本,分别是example.vue和example1.vue,作为路由中的七个页面。分别拉长以下内容:

图片 21

Paste_Image.png

图片 22

Paste_Image.png

肆.在router下的index.js编辑以下内容:

图片 23

Paste_Image.png

5.修改main.js如下,将路由:

图片 24

Paste_Image.png

六.修改app.vue,配置的路由中的compent将浮以往router-view中

图片 25

Paste_Image.png

柒.刷新浏览器,能够看看以下功用

图片 26

Paste_Image.png

点击example一将显得(点击example一跳转并未刷新页面,只是vue的路由跳转)

图片 27

.

8.但是在http://localhost:3011/example1下刷新浏览器,以后会发现找不到

图片 28

Paste_Image.png

那是如何来头导致的吧?

因为vue的路由是在浏览器中进行保管,假设刷新http://localhost:3011/时方可访问到的,因为请求/路线,node将其针对性了index.html(因为webpack打包会把index.html打包到根目录,而koa-webpack在向来不传递参数的动静下也是指向的webpack配置文件中output中的publicPath,配置文件中安排的是/,所以暗许/请求指向index.html),以下是koa-webpack中暗中同意配置的源代码

![Paste_Image.png](http://upload-images.jianshu.io/upload\_images/1210894-bb4f6395ba003114.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240z

而/example一请求到node,node会去搜寻node端的路由处理,因为node端未有配置那几个路由,全部找不到。

倘使想要访问到/example1,供给请求到index.html,然后由vue的路由处理找到呼应的模块

化解方法有:

(1)vue路由运用hash格局,修改router下的index.js文件,将mode的值改为hash,借使是hash,不过如此浏览器路线会形成http://localhost:3011/\#/example1,有有些其貌不扬,http://localhost:3011/\#/example1以此路子照旧请求的/前面包车型大巴会被看成参数处理

图片 29

Paste_Image.png

(2)将富有html请求转到index.html 然后让vue的浏览器处理

2. npm, webpack, babel, es6

Vue开辟中,会用到不少注重包,古板艺术是用<script>标签引进,可是,在大型项目中更推荐使用npm安装。npm能够很好得和webpack等模块打包器合营使用。同时,vue提供单文件组件开垦格局,这样,更亟待webpack的合作,对.vue文件进行分析编写翻译。

Vue中推荐使用ES陆语法,那就须要编码器Babel的赞助,而webpack对Babel协助美好,由此,webpack的重大分明,围绕着它,能够支撑广大效率。

1.2 配置node端端

1.将有着的html请求转到index.html,有3个现存的插件connect-history-api-fallback替大家做了这件事,但是急需多少封装一下才具在koa第22中学利用。
(1)npm install connect-history-api-fallback –save 下载插件包
(二)在根目录下增添middleware文件夹,用于存放koa的中间件
(3)在middleware文件夹中加多koa贰-connect-history-api-fallback.js
文件,koa第22中学间件需求传入要求的格局,所以封装重返了2个主意

    const history = require('connect-history-api-fallback');
    module.exports = options=> {
        const middleware = history(options);
        const noop = ()  => {
        };

        return async (ctx, next)=> {
          middleware(ctx, null, noop);
        await next();
        };
    };

2.在app.js添加const history =
require(‘./middleware/koa2-connect-history-api-fallback’);和
app.use(history({
verbose: true//打出转载日志
}));
瞩目:app.use(history(…))要写在app.use(middleware({…}))从前,不然koa-webpack已经回来not
found了,app.use(history(…))就不会一蹴而就了

1壹.写好之后重启服务,然后访问浏览器刷新http://localhost:3011/example1就足以访问到了
同时能够观察日志,唯有请求html转到了index.html

图片 30

Paste_Image.png

3. vue-router

Vue卓殊适合单页面(SPA)应用开垦,而单页面应用的主导是路由和模板。Vue大旨库自身提供模板机制(mushtache),路由援助则由第1方库vue-router提供(Vue-router
2.0-
汉语文档)。

那足够显示出Vue的“增量式开垦设计”:Vue.js只提供基本功能,别的赞助成效由第一方库援助。

1.3 优化

4. axios

Vue更新到二.0自此,作者就揭露不再对vue-resource更新,而是推荐axios。axios
是3个依据 promise 的 HTTP 库,能够用在浏览器和 node.js 中。

由于axios并不是对准vue框架开垦的,因而,假诺将其行使在vue框架中,建议如下配置:

import Vue from 'vue';
import axios from 'axios';
...
Vue.prototype.$http = axios;

使用:
this.$http.post(url, data).then((response) => {...});

一.增多less布局,让.vue文件帮助写less文件

(1)下载less打包编写翻译供给的借助,npm install less less-loader
–save-dev
(2)在webpack.base.conf.js中配置,加多这三个布局,将会识别.vue里边的less,也可以将less写成单身的文本

图片 31

Paste_Image.png

(三)在页面中引进less文件(常常便于维护,less写在单身文件中)
在src文件夹中增添static文件夹,然后在static文件夹中加多less文件,专门存放less文件,然后增多example.less文件,顺便写1些体制进去,如下

图片 32

Paste_Image.png

然后在example.vue文件中引入那些less文件

图片 33

Paste_Image.png

页面效果如下

图片 34

Paste_Image.png

5. Vuex

Vuex 是3个专为 Vue.js
应用程序开采的场所管理方式。它采纳集中式存款和储蓄管理应用的具有组件的动静,并以相应的平整保险状态以壹种可预测的章程爆发变化。

Vue老爹和儿子组件是单向通讯的,由父组件向子组件传递数据。假使实组件要转移父组件状态,也许零部件间有通讯,那么,供给运用事件emit。不过,1旦组件数量巨大起来,通讯特别复杂,那么,事件监听方式就展现混乱,无秩序,不只怕统1管理。那时,须要Vuex集中储存组件状态,并更新组件。

二.完成懒加载,优化开首化加载

在页面相比多的时,单页应用依据在此之前的方法打包成二个js会形成首页加载时相当的慢,为了缓解那一个主题材料,能够修改打包,让首页只加载通用代码和首页要用到的代码,跳转到别的页面再加载对应页面的js,那样能够化解项目较大首页加载缓慢的题目。

修改router中index.js,将.vue文件加载改为
const Example = r => require.ensure([], () =>
r(require(‘../views/example/example.vue’)), ‘Example’);
const Example1 = r => require.ensure([], () =>
r(require(‘../views/example/example1.vue’)), ‘Example1’);

因为webpack.base.conf.js已经加了chunkFilename:
‘js/[name].[chunkhash].js’,所以并非再修改webpack配置

图片 35

Paste_Image.png

浏览页面,今年会发现,访问example页面唯有example.js

图片 36

Paste_Image.png

点击example一页面,才会新参预example一.js,并且加载之后,以后再次回到example1页面不会重复加载,提升品质

图片 37

Paste_Image.png

通过上述步骤,大家曾经得以在本地跑起来开拓vue项目了。

6. UI库

支撑Vue二.0的UI库繁多,能够去网上搜搜。作者推荐多少个:

  • element-ui:http://element.eleme.io/\#/zh-CN/component/installation
  • iview:https://www.iviewui.com/
7. 调剂工具

Vue有基于chrome插件的调节和测试工具:https://github.com/vuejs/vue-devtools
留意:一定要在vue项目中开启debugger情势,技巧激活该调节和测试工具:

Vue.config.devtools = true;

图片 38

vue-devtool.jpg

小结

专注,Vue.js 不支持 IE八 及其以下版本,因为 Vue.js 使用了 IE捌 无法达成的
ECMAScript ⑤ 天性Object.defineProperty()

什么安顿Vue项目,可以参见小说《详解基于Vue二.0品种的webpack配置文件》。

下一节:Vue入门连串(二)Vue实例和零部件

微信公众号:

图片 39

相关文章