从零开始搭建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里面，webpack的nodeAPI里面提供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系列之六：一个完整的项目