nodejs+webpack+vuejs

1.新建一个目录vuepro 
2.初始化。 
在命令行下cd到该目录下,执行:

$ npm init

之后可以一路回车,在最后输入”yes”后会生成package.json文件 
这里写图片描述

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

先装这么多,后面还要加很多。 
这里写图片描述

4.创建良好的目录层级 
这里写图片描述 
html 放置模板文件,jssrc 放置js文件。 最终编译好的文件放置webapp ,这个目录也就是我们网站的目录。

5.在项目根目录下创建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'   //最终打包生成的文件名(只是文件名,不带路径的哦)
    },
    /*resolve: {
        alias: {
            vue: 'vue/dist/vue.js'
        }
    },*/
    externals: {

    },
    module:{
        loaders:[
            {test:/\.js$/,loader:"babel",query:{compact:true}},
            //这里肯定要加入n个loader 譬如vue-loader、babel-loader、css-loader等等
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename: __dirname+'/src/webapp/index.html',   //目标文件
            template: __dirname+'/src/html/index.html', //模板文件
            inject:'body',
            hash:true,  //代表js文件后面会跟一个随机字符串,解决缓存问题
            chunks:["index"]
        })

    ]
}

6.同样在根目录下创建babel配置文件:.babelrc

{
    "presets" : ["es2015"]
} 

然后就可以在webpack里面配置loader,我们上面webpack配置中已经写了:

 loaders:[
            {test:/\.js$/,loader:"babel",query:{compact:true}},
        ]

这句话的意思就是:凡是.js文件都使用babel-loader,并且压缩。

今天我们学习vue最简单的一个套路

思考:数据如何渲染? 
套路如下: 
1.首先要有个数据块标记 
vue里面可以像模板引擎一样写上{{name}} 
其中name就是变量名

练习: 
这里写图片描述 
index.html如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
    <div id="me">
        我的年龄是{{age}}
    </div>
</body>
</html>

index.js如下:

import Vue from "vue"; //会去node_modules\vue\package.json

new Vue({
    el:"#me",
    data:{age:18}
})

至此,我们需要用webpack打包,打包到webapp目录下。 
需要修改2个地方: 
(1)因为我们的webpack不是全局安装的,所以不能直接执行webpack命令,我们这里借助npm来执行。所以需要修改项目根目录下的package.json文件,加入:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

表示:执行build,就会去node_modules.bin\下去寻找webpack命令。build 这个名字是自定义的。

(2)还需要修改webpack配置文件:webpack.config.js

resolve: {
        alias: {
            vue: 'vue/dist/vue.js'
        }
    },

我们之前把这个注释掉了,现在打开。此处的意义是找到node_modules/vue/dist/vue.js

最后,我们就来打包,看看结果是怎样的? 
终端里还是cd到项目根目录下,执行:

$ npm run build

这里写图片描述 
index.html就是打包之后的模板文件,js/index.js就是打包之后的js文件,在index.html被引用了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
    <div id="me">
        我的年龄是{{age}}
    </div>
<script type="text/javascript" src="js/index.js?43c73980e35f1569ef72"></script></body>
</html>

预览一下index.html: 
这里写图片描述
这样就完成了vueJS的一个简单案列

好的,以下是基于nodejs+vuejs的商城系统实现详细设计。 1. 前端设计 使用Vue.js框架搭建前端,实现用户浏览、购买商品等功能。需要实现的主要页面包括: - 首页:展示热门商品、促销活动等信息。 - 商品列表页:展示所有商品列表,支持按照价格、销量等条件进行排序。 - 商品详情页:展示商品详细信息,包括商品图片、价格、库存、购买数量等。 - 购物车页:展示用户添加到购物车的商品列表,支持修改数量、删除商品等操作。 - 订单确认页:展示用户选择的商品列表、总价等信息,并支持填写收货地址、发票信息等。 - 订单支付页:展示订单信息和支付方式,支持在线支付和货到付款两种方式。 2. 后端设计 使用Node.js搭建后端,实现用户登录、商品管理、订单管理等功能。需要实现的主要接口包括: - 用户登录接口:验证用户输入的用户名和密码,返回验证结果和用户信息。 - 商品列表接口:返回所有商品的基本信息,包括商品名称、价格、库存等。 - 商品详情接口:返回指定商品的详细信息,包括商品图片、价格、库存等。 - 添加商品接口:添加新的商品信息到数据库中。 - 修改商品接口:修改指定商品的基本信息。 - 删除商品接口:从数据库中删除指定商品信息。 - 添加购物车接口:将用户选择的商品添加到购物车中。 - 修改购物车接口:修改购物车中指定商品的数量。 - 删除购物车接口:从购物车中删除指定商品。 - 提交订单接口:将用户选择的商品生成订单,并将订单信息保存到数据库中。 - 获取订单列表接口:返回用户的所有订单列表。 - 获取订单详情接口:返回指定订单的详细信息。 3. 数据库设计 使用MySQL数据库存储商城系统中的所有数据。需要设计的主要表包括: - 用户表:存储用户的基本信息,包括用户名、密码、邮箱等。 - 商品表:存储所有商品的基本信息,包括商品名称、价格、库存等。 - 购物车表:存储用户添加到购物车中的商品信息。 - 订单表:存储用户提交的订单信息,包括订单编号、购买商品列表、收货地址等。 以上就是基于nodejs+vuejs的商城系统实现的详细设计,希望能对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值