从零开始搭建vue-ssr系列之二:纯client端渲染以及webpack2+vue2注意事项

要实现什么效果?
  • 咱们就实现一个项目中常用并且简单的效果:通过Ajax从后端取数据,前端做展示,点列表的每一项,alert出这一项的标题
  • 效果如下:

> 为什么要说Client端的渲染?

  • 因为Client端的渲染是ssr渲染的一部分,这一块是必须要说的,同时,Client端的渲染在我做的时候,也有一些问题和一些坑,尤其是使用webpack2的时候,之前webpack1时代的东西大部分都不好使了,只能重新学,重新试,正好在这也分享给大家
项目目录树
|____.gitignore
|____build
| |____client
| | |____css
| | | |____main.css
| | |____script
| | | |____main.js
| | | |____vendors.js
| |____index.html
|____package.json
|____postcss.config.js
|____readme.md
|____server.js
|____src
| |____component
| | |____List.vue
| |____index.js
|____tools
| |____dev.js
| |____webpack.js
各目录的用处
  • build目录为webpack打包好的静态资源文件,css、js、image等
  • src目录下存放源码
  • tools目录下为编译相关的文件
  • package.json文件为包依赖
  • postcss.config.js这个文件很重要,vue-loader和这个文件,能解决css前缀问题(这里用的是webpack2的解决方案,目测为唯一的解决方案,webpack1有其他解决方案)。
  • server.js为服务启动文件,用的是express
  • 使用的是webpack的nodeAPI进行打包,不是通过config文件打包
这个webpack打包能实现哪些功能?
  • 可以把共用的js库打到一个单独的文件里,代码在这:
// 将vue等框架/库进行单独打包, 并输入到vendors.js文件当中
new webpack.optimize.CommonsChunkPlugin({
    names: ['vendors']
})
  • 可以把.vue文件里面的style都打包到一个css文件中,代码在这:
new ExtractTextPlugin('css/[name].css')
有哪些坑?
  • alias里面其他的可以不要,但是vue是必填,就是'vue$': 'vue/dist/vue.common.js',要不然会报错,因为你import vue的时候,不写这个引用文件不是同一个,只有vue2里会出这个问题,vue1不会
  • webpack2里面想把.vue文件的css抽取出来,只有一个loader是不好使的,这个我找了好久,webpack.js里面的方案好使
  • dev.js里面,webpacknodeAPI里面提供2个方法,一个run, 一个是watch,开发的时候用watch,要上线了得用run这个方法
怎么看效果?
  • cd vue-ssr-1:切换到项目目录
  • yarn install:安装所有依赖
  • npm start:编译并自动打开浏览器查看效果
Github源码请点我
Vue-SSR系列目录

从零开始搭建vue-ssr系列之一:写在前面的话

从零开始搭建vue-ssr系列之二:纯client端渲染以及webpack2+vue2注意事项

从零开始搭建vue-ssr系列之三:服务器渲染的奥秘

从零开始搭建vue-ssr系列之四:Vuex详解

从零开始搭建vue-ssr系列之五:开始第一个简单的server-render

从零开始搭建vue-ssr系列之六:一个完整的项目

阅读 13.6k

推荐阅读
奥巴驴
用户专栏

干货

75 人关注
29 篇文章
专栏主页