Vue+Node+MongoDB实现商城系统——1、2章：基础配置

最新推荐文章于 2023-11-12 20:19:32 发布

Sophie_U

最新推荐文章于 2023-11-12 20:19:32 发布

阅读量839

点赞数 1

分类专栏： Vue 文章标签： Vue项目实践教程 Node MongoDB

本文链接：https://blog.csdn.net/Sophie_U/article/details/80000142

版权

Vue 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

第一章框架及导学

1.1 Vue和React框架对比

相较于Vue和react，angular更像是一套完整的项目解决方案，框架本身也较大，所以在此不进行讨论

Vue:
- 模板和渲染函数的弹性选择
- 简单的语法及项目创建
- 更快的渲染速度和更小的体积
React:
- 更适用于大型应用和更好的可测试性
- 同时适用于web端和原生App
- 更大的生态圈带来的更多支持和工具
共同点：
- 利用虚拟DOM实现快速渲染（vue2.0开始使用virtual dom）
- 轻量级
- 响应式组件（在页面改变后，组件实时变化）
- 支持服务器端渲染，ssr
- 易于集成路由工具，打包工具以及状态管理工具
- 优秀的支持和社区
说明：Vue核心思想：数据驱动，状态管理，组件化

1.2 Vue双向绑定的实现

核心：Object.defineProperty().通过设置属性的get，set函数来动态设置值。当给属性设置get,set时，只要修改属性就会自动触发set，获取值就会触发get

<body>
    <input id='inputVal' type='text'>
    <div id='showVal'></div>
    <script type="text/javascript">
          //1、设置属性
        var obj = {};
        Object.defineProperty(obj,'userName',{
            get:function(){
                console.log()
            },
            set: function(newValue){
                document.getElementById('userName').value = newValue
                document.getElementById('uName').innerText = newValue
            }
        })
        //监听事件并改变对应属性
        document.getElementById('userName').addEventListener('keyup',function(event){
            obj.userName = event.target.value
        })
    </script>
</body>

1.3 课程导学

项目涵盖功能：商品列表、购物车、地址、结算、订单及登录模块
项目技术栈：前端使用Vue全家桶及ES6，后端Node+Express ，DB用MongoDB
课程安排： 1、2章：vue基础知识； 3.4章VueRouter，axios，vureResource； 5章:ES6常用语法； 6-14章商城项目开发； 15章 vuex实现商城登录，购物车数量等功能； 16章 webpack使用； 17章线上部署

第二章环境配置

2.1 node和npm环境

window下,直接官方下载node（附有npm）

2.2 vue环境

1、多页面应用：只需要在页面中通过\

2.3 Vue配置

目录结构

|-- build
|--  |-- *.js
|-- config
|-- |-- *.js
|-- src
|-- | -- App.vue
        main.js
        assests
        component
        router
|--static
|-- .babelrc
|-- .gitignoor
|-- .postCssrc.js
|-- index.html
|--  package.json
|--  README.md

一、build文件

项目打包以及配置文件存放目录

1、webpack.base.conf.js 核心关注

2、build.js ：加载webpack和index.js，并打包

require('./check-versions')() //引入版本检查，并立即执行

process.env.NODE_ENV = 'production' //配置为生产环境

var ora = require('ora') //日志输出
var rm = require('rimraf') //移除文件
var path = require('path') //node自带的路径模块
var chalk = require('chalk') //用于控制台输出带颜色的字体
var webpack = require('webpack') //webpack核心模块
var config = require('../config') //../config/index.js文件引入（打包相关配置信息）
var webpackConfig = require('./webpack.prod.conf') //开发环境配置

var spinner = ora('building for production...') //输出日志
spinner.start() //进入loading状态

rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err
  webpack(webpackConfig, function (err, stats) {
    spinner.stop()
    if (err) throw err
    process.stdout.write(stats.toString({
      colors: true,
      modules: false,
      children: false,
      chunks: false,
      chunkModules: false
    }) + '\n\n')

    console.log(chalk.cyan('  Build complete.\n'))
    console.log(chalk.yellow(
      '  Tip: built files are meant to be served over an HTTP server.\n' +
      '  Opening index.html over file:// won\'t work.\n'
    ))
  })
})

dev-client.js 热重载文件配置

dev-server.js 通过node express来启动的一个服务
- opn：一个自动打开的插件
- express: node 服务插件
- webpack: webpack打包插件
- proxyMiddleware: 代理中间件插件，用于前后端分离，跨域涉及到的一些插件

二、config文件

项目webpack配置文件存放目录

index.js 核心关注

三、src

项目源码文件

四、static

静态资源目录

Sophie_U

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue+Node+MongoDB实现商城系统——1、2章：基础配置

第一章框架及导学1.1 Vue和React框架对比相较于Vue和react，angular更像是一套完整的项目解决方案，框架本身也较大，所以在此不进行讨论 Vue: - 模板和渲染函数的弹性选择 - 简单的语法及项目创建 - 更快的渲染速度和更小的体积 React: - 更适用于大型应用和更好的可测试性 - 同时适用于web端和原...
复制链接

扫一扫