nodejs php集成,VUEJS+PHP(YII2)+NODEJS 实战视频类电商网站 :(四)结合nodes＋web pack+vue开启时尚学习套路...

前言

学习了如何简单的使用yii框架，如何去查看手册和折腾。今天开始正式学习制作视频类电商网站。

一、开发前的准备

当前vue已经发布了2.0版本，从学习的角度我们自然选择2.0。简单的说明一下vue。vue是核心部分，它缺乏ui，因此我们需要在项目里面集成其他人已经开发好的ui。这个就好比jquery ui一个道理。还有一个vuex，它类似一个框架。好比php和yii之间的关系。万丈高楼平地起，我们肯定要打好vue的基础学习核心才能自由的驾驭这些外部的工具。

vue我们选择npm的方式安装，如果光是安装vue其实并没有什么卵用，必须要结合 webpack bable等一系列的工具才能很好的工作起来。

在开始安装各种module之前需要规划一下目录结构：

大致的目录结构弄好了，开始安装各种配套软件：

首先、需要生成一个 package.json文件，执行命令：

npm init

按照提示一路回车就可以了。

接着、通过npm按照一系列相关软件：

npm install vue webpack babel-cli babel-loader babel-preset-es2015 html-webpack-plugin --save-dev

注意这里我们不采用全局按照，这样可以体验不同版本的webpack

然后、配置webpack.config.js文件：

var HtmlWebpackPlugin = require('html-webpack-plugin');

var webpack=require("webpack");

module.exports =

{

entry:

{

"index":__dirname+'/src/jssrc/index.js',

},

output: {

path: __dirname+'/src/webapp/js', //输出文件夹

filename:'[name].js' //最终打包生成的文件名(just 文件名，不带路径的哦)

},

resolve: { //vue英文文档会有这部分的配置

alias: {

vue: 'vue/dist/vue.js'

}

},

externals: {

},

module:{

loaders:[

{test:/\.js$/,loader:"babel-loader",query:{compact:true}},//表示后缀是js的文件都通过babel进行压缩和翻译

//这里肯定要加入n个loader 譬如vue-loader、babel-loader、css-loader等等

]

},

plugins:[

new HtmlWebpackPlugin({ //htmlwebpack插件都配置

filename: __dirname+'/src/webapp/index.html',//目标文件

template: __dirname+'/src/html/index.html',//模板文件

inject:'body',

hash:true,

chunks:["index"]

})

]

}

最后来配置一下babel的配置文件，打开 .babelrc:

{

"presets": ["es2015"]

}

二、简单的数据绑定

环境搭建好了就可以开始正式的vue编程了，官方手册一开始就出了一个起手的例子，我们就以此为开始。打开 html目录下面的index.html:

Title

{{name}}

变量的绑定非常简单就是 {{变量名}}就可以了，如果你使用过php的模板引擎就会感觉它们非常相似。既然变量写好了，那么它的值去哪里设置呢？当然是在 index.js里面：

import Vue from "vue"

new Vue(

{

'el':"#myapp",

data:{

"name":"www.php70.com"

}

}

)

注意这里采用的是es2015的写法，import方式载入vue。vue的变量绑定注意两个地方一个是el表示某个dom对象，一个data表示数据的内容

写好了之后，我们就可以通过webpack工具来打包啦,为了简单，我们可以在package.json文件里面写一个启动命令：

ok，来执行一下：

npm run r

接着就是一顿的编译工作，编译好之后我们的程序该去哪里执行呢？永远记住我们最终的程序一定是在webapp下面：

用phpstom内置的服务器跑一下：