从零开始搭建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系列之六：一个完整的项目