脚本宝典收集整理的这篇文章主要介绍了从零开始搭建vue-ssr系列之二:纯client端渲染以及webpack2+vue2注意事项,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
要实现什么效果?
Client端的渲染?
项目目录树
|____.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打包能实现哪些功能?
// 将vue等框架/库进行单独打包, 并输入到vendors.js文件当中
new webpack.optimize.CommonsChunkPlugin({
names: ['vendors']
})
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系列之二:纯client端渲染以及webpack2+vue2注意事项
从零开始搭建vue-ssr系列之五:开始第一个简单的server-render
以上是脚本宝典为你收集整理的从零开始搭建vue-ssr系列之二:纯client端渲染以及webpack2+vue2注意事项全部内容,希望文章能够帮你解决从零开始搭建vue-ssr系列之二:纯client端渲染以及webpack2+vue2注意事项所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。