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

最新推荐文章于 2024-06-06 20:04:24 发布

chenxian9895

最新推荐文章于 2024-06-06 20:04:24 发布

阅读量262

点赞数

文章标签： javascript php webpack ViewUI

原文链接：https://my.oschina.net/u/3488412/blog/902575

版权

前言

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

一、开发前的准备

当前vue已经发布了2.0版本，从学习的角度我们自然选择2.0。简单的说明一下vue。vue是核心部分，它缺乏ui，因此我们需要在项目里面集成其他人已经开发好的ui。这个就好比jquery ui一个道理。还有一个vuex，它类似一个框架。好比php和yii之间的关系。万丈高楼平地起，我们肯定要打好vue的基础学习核心才能自由的驾驭这些外部的工具。
vue我们选择npm的方式安装，如果光是安装vue其实并没有什么卵用，必须要结合 webpack bable等一系列的工具才能很好的工作起来。
在开始安装各种module之前需要规划一下目录结构：
Snip20170308_1

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

首先、需要生成一个 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:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="myapp">
        {{name}}
    </div>
</body>
</html>

变量的绑定非常简单就是 {{变量名}}就可以了，如果你使用过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文件里面写一个启动命令：
Snip20170308_2
ok，来执行一下：